Echarts

echarts中文官网https://echarts.apache.org/zh/index.html

echarts的custom类型实现的甘特图

甘特图案例地址https://echarts.apache.org/examples/zh/editor.html?c=custom-profile

ToolTip触发时对图例进行排序操作

关键代码

tooltip.formatter 配置为回调函数，回调函数参数为包含所有series的数组

series数组中的每一个元素都有如下属性

seriesItem.seriesIndex series的绘制索引
seriesItem.seriesName series的名称
seriesItem.value series的值
seriesItem.marker echarts的原生图例前彩色原点html元素
seriesItem.axisValueLabel 触发tooltip的坐标轴值

"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的淡出样式进行控制，代码如下：

emphasis: { 
    focus:'series' 
},
blur: { },  // 规范淡出样式
    itemStyle: { opacity: 1, 
    lineStyle: { opacity: 1 }, 
    label: {opacity: 1 } 
}

虚线实线混合使用的折线图

问题描述

折线图展示各个月份某项数值的变化，但是有的月份没有数据，
客户希望没有数据的月份数据假定为上个月的数据，
上个月如果也没有数据再假设为上上个月的数据，以此类推，
假数据要用虚线标出，真数据用实线。

实现思路

这里当然就不指望ECharts原生的折线图能实现这个需求，
因此需要隐藏折线图的连线，可以把线宽设置为0，也可以把颜色配置为透明，
然后使用 markLine 依次连接前后两点，判断月份是否为空，

如果存在月份数据，使用实线连接，
如果缺失月份数据，使用虚线连接