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

覺得有用的小夥伴右上角點個贊支援一下~

掃描上方二維碼關注我的訂閱号~