![]()
echarts的custom类型实现的甘特图
- tooltip.formatter 配置为回调函数，回调函数参数为包含所有series的数组
series数组中的每一个元素都有如下属性
- seriesItem.seriesIndex series的绘制索引
- seriesItem.seriesName series的名称
- seriesItem.value series的值
- seriesItem.marker echarts的原生图例前彩色原点html元素
- seriesItem.axisValueLabel 触发tooltip的坐标轴值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| "tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
},
"formatter": function (params) {
if(!Array.isArray(params)) return
params = params.sort((a, b) => (b.value - a.value)).map((i,index) => {
i.seriesIndex = index
return i
})
let axis = params[0].axisValueLabel
let head = `<div style="margin-bottom:10px;font-size:14px;color:#666;font-weight:400;line-height:1;">${axis}</div>`
return head+ params.map(i => {
let name = `<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">${i.seriesName}</span>`
let value = `<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">${i.value}</span>`
return i.marker+ name +value
}).join('<br/>');
} ,
"axisPointer": {
"type": "shadow"
}
}
|
多折线图相互堆叠的emphasis样式问题
多折线图堆叠本来能够让被触发series以外的其他series淡出，如下配置：
1
2
3
| emphasis:{
focus:'series'
}
|
但是客户不想要淡出的效果，非得不淡出改变series的层级，
那怕不是要动态改变series的zLevel，可太麻烦了。
这里的思路是利用eCharts原生的高亮事件，
但是对series的淡出样式进行控制，代码如下：
1
2
3
4
5
6
7
8
9
| emphasis: {
focus:'series'
},
blur: { },
itemStyle: { opacity: 1,
lineStyle: { opacity: 1 },
label: {opacity: 1 }
}
|
虚线实线混合使用的折线图
折线图展示各个月份某项数值的变化，但是有的月份没有数据，
客户希望没有数据的月份数据假定为上个月的数据 ，
上个月如果也没有数据再假设为上上个月的数据，以此类推，
假数据要用虚线标出，真数据用实线。
这里当然就不指望ECharts原生的折线图能实现这个需求，
因此需要隐藏折线图的连线，可以把线宽设置为0，也可以把颜色配置为透明，
然后使用 markLine 依次连接前后两点，判断月份是否为空，
- 如果存在月份数据，使用实线连接，
- 如果缺失月份数据，使用虚线连接
