必看echarts 折线图 相关配置详细说明

128 阅读1分钟

在开发图表的过程中,如果对表图不怎么熟悉或者不了解图表里面的相关的配置字段的话,那做图表真的太痛苦的了,我把我做过图表的里面的详细的说明一下,希望对大家有所帮助,!!!

legend配置

如图效果如下:

image.png

1 如何显示这个legend

首先一下要有legend这个配置参数里面的data有数据,在一个就是data里面的值要跟series这个配置参数,数组对象里面的name对应,这样才能显示出来。

legend: {
    data: ['Email']
  },

series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    }
]

2 控制legend图标大小

itemWidth是设置宽度,itemHeight是设置高度

legend: {
    itemWidth:12,
    itemHeight:8,
    data: ['Email']
}

3 设置legend文字行高

legend: {
   textStyle:{
      lineHeight:20,
   }, 
}

4 设置legend显示位置

legend: {
    center: 0, // 居中 
    left: 0,  /// 左对齐
    right:0,  // 右对齐
    top: 30,  // 头部间距 
}

5 legend文字超出换行

下面的代码的意思, 文字超出7个就要换行了 ,如果你想改成其他数字就只要改9就可以了

formatter:function(params) {
            let tip1 = "";
            let tip = "";
            let le = params.length  
			if(le > 7){   
                let l = Math.ceil(le/7)  
                for(let i = 1;i <= l;i++){ 
                    if(i < l){ 
                        tip1 += params.slice(i*7-7,i*7)+'\n'; 
                    }else if(i === l){  
                        tip = tip1 + params.slice((l-1)*7,le)
                    }
                }
                return tip;
			}else{
                tip = params 
                return tip;
            }
},

总结

今天先写到legend配置,到了一个急活,所以等下次在接着写了,