在开发图表的过程中,如果对表图不怎么熟悉或者不了解图表里面的相关的配置字段的话,那做图表真的太痛苦的了,我把我做过图表的里面的详细的说明一下,希望对大家有所帮助,!!!
legend配置
如图效果如下:
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配置,到了一个急活,所以等下次在接着写了,