echarts中legend控制markLine的开关

全平台教程资源

场景描述:

当一组数据出现多条markLine的线段时,整体感观太乱,因为echarts没有提供专门的属性去调整,所以利用多组Data数据去模拟legned的开关效果.

示例代码

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    tooltip:{},
    legend:{
      data:["本月销量","季度销量","年度销量"]  
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {   
            name:'本月销量',
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
        },
        { //这两组数据用来模拟markLine线段开关,data可以为空
            name:'季度销量',
            type:'line',
            markLine:{
                data:[
                    {
                        name:'季度销量',
                        yAxis:"150"
                    }
                ]
            }
        },
        {
            name:'年度销量',
            type:'line',
            markLine:{
                data:[
                    {
                        name:'年度销量',
                        yAxis:"100"
                    }
                ]
            }
        }
        
    ]
};

示例效果