Echarts之筷子图-在图表中画自定义线

近日接到个没玩过的需求，需要在折线图中插入"一双筷子"（即自定义的两根折线），但是这根筷子不能有鼠标事件（即鼠标放上没有反应），更不能有图例，标注… 就是摆设的两根线，如下图：

没错就是那两根黄不拉几的线，称之为筷子图。

可以看到鼠标放上是没有任何效果的，像背景图一样呆在那里。

echarts还真提供了这个功能（强大！），废话不多说直接上代码。

var markLineOpt = {
    animation: false, // 不需要动画
    silent: true, // 不需要鼠标事件
    lineStyle: {
        normal: {
            type: 'solid',
            color: 'yellow'
        }
    },
    data: [[{
        coord: ['周二', 28],
        symbol: 'none'
    }, {
        coord: ['周五', 2],
        symbol: 'none'
    }],[
        {
        coord: ['周五', 2],
            symbol: 'none'
        }, {
            coord: ['周日', 1],
            symbol: 'none'
        }
    ],
    [{
        coord: ['周二', 23],
        symbol: 'none'
    }, {
        coord: ['周五', 0],
        symbol: 'none'
    }],[
        {
        coord: ['周五', 0],
            symbol: 'none'
        }, {
            coord: ['周日', 0],
            symbol: 'none'
        }
    ]]
};
option = {
    title: {
        text: '筷子图'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['pro1','pro2','pro3','pro4'],
        formatter: function (name) {
            if(name != 'k'){
                return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
            }
        },
        tooltip: {
            show: true
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value',
        boundaryGap: ['0', '10%']
    },
    series: [
        {
            name:'pro1',
            type:'line',
            data:[0, 2, 5, 10, 11, 4, 1]
        },
        {
            name:'pro2',
            type:'line',
            data:[0, 4, 8, 11, 15, 3, 0]
        },
        {
            name:'pro3',
            type:'line',
            data:[0, 5, 10, 5, 5, 3, 1]
        },
        {
            name:'pro4',
            type:'line',
            data:[6, 26, 20, 18, 13, 2, 0],
            markLine: markLineOpt
        }
    ]
};

重点就是series中markLine这个属性，可以给任意一组数据加标线

markArea还可以划区域呢，用法类似

感兴趣的小伙伴可以去看下文档 echarts

觉得有用的小伙伴右上角点个赞支持一下~

扫描上方二维码关注我的订阅号~