关于echarts使⽤的常见问题总结
关于echarts使⽤的问题总结
1.legend图例不显⽰的问题:
在legend中的data为⼀个数组项，数组项通常为⼀个字符串，每⼀项需要对应⼀个系列的 name，如果数组项的值与name不相符则图例不会显⽰;
2.图表位置⽆法紧贴画布边缘的问题:
在grid绘图⽹格⾥,containLabel(grid 区域是否包含坐标轴的刻度标签，默认不包含)为true的情况下,⽆法使图表紧贴着画布显⽰，但可以防⽌标签标签长度动态变化时溢出容器或者覆盖其他组件，将containLabel设置为false即可解决;
grid:{
containLabel:false
}
3.反向坐标轴:
在echarts3中xAis和
yAis:{
inverse:true
}
新添加了inverse属性，在inverse为true的情况下执⾏反向坐标轴;
function mapCharts(name,id){
$.get('json路径/'+name+'.json', function (geoJson) {
var chart = echarts.ElementById(id));
chart.setOption({
series: [{
type: 'map',
map: name
}]
});
});
};
setoption
5.柱状图的宽度问题:
如设计图给出柱状图指定宽度，直接指定series.barWidth柱状图的宽度(默认barWidth为⾃适应),⾃适应功能会失效，在⼩尺⼨状态下柱状图宽度不会发⽣改变;
如不指定宽度，使⽤默认⾃适应会导致多条数据与单条数据宽度显⽰不⼀致，所以在设计图明确宽度的情况下，使⽤series.barMaxWidth(最⼤宽度)属性，来解决这⼀问题;
⾃适应多条数据的效果
⾃适应单条数据的效果
使⽤了最⼤⾼度的效果
6.部分情况下初始化图表失败的问题
在使⽤类似Bootstrap轮播图等使⽤display:none属性隐藏其他图⽚的插件时，这种情况下会导致echarts初始化时获取不到画布宽⾼，导致绘制图表失败;
如果不考虑ie9以下可考虑swiper3等使⽤overfllow:hidden属性隐藏多余图⽚的插件，如需兼容ie9以下可考虑swiper2(⾼度⽆法⾃适应)，或者⾃⼰⼿写轮播图;
echarts提供了图表的resize⽅法，使⽤时可在setoption后添加如下代码:
$(window).on('resize',function(){
});
8.图表判断返回颜⾊
echarts的color属性提供了function⽅法
color: function(params) {
//颜⾊数组
var colorList = [
‘#C1232B‘,‘#B5C334‘,‘#FCCE10‘,‘#E87C25‘,‘#27727B‘,
‘#FE8463‘,‘#9BCA63‘,‘#FAD860‘,‘#F3A43B‘,‘#60C0DD‘,
‘#D7504B‘,‘#C6E579‘,‘#F4E001‘,‘#F0805A‘,‘#26C0C0‘
];
//判断的代码
//根据条件返回相应颜⾊
return colorList[params.dataIndex]
}
9.使⽤formatter⽅法格式化⽂本(⽤于在label标签,tolltip等显⽰信息需要⾃定义时)
legend图例下的使⽤
使⽤字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
使⽤回调函数
formatter: function (name) {
return 'Legend ' + name;
};
label下的使⽤
主要是对params(⼀个对象包含data数据)参数的返回
formatter: function (params) {
;
};
在formatter⾥返回时拼接html元素;
formatter: function(params) {
if(params.data.value) {
if(params.data.value.length > 0) {
var str = '';
for(var i = 0; i < params.data.value.length; i++) {
if(str !== '') {
str += '</br>' + '<span ></span>';
}
str += params.data.value[i] + '⼈';
}
return params.name + '</br>' + '<span ></span>' + str; }
}
return params.data.name + ':' + (params.data.value ? params.data.value : '--');
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。