趋势图一根线既有实线又有虚线效果实现

 

 

option = {

    title: {

        text: '一天用电量分布',

        subtext: '纯属虚构'

    },

    tooltip: {

        trigger: 'axis',

        axisPointer: {

            type: 'cross'

        }

    },

    toolbox: {

        show: true,

        feature: {

            saveAsImage: {}

        }

    },

    xAxis:  {

        type: 'category',

        boundaryGap: false,

        data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']

    },

    yAxis: {

        type: 'value',

        axisLabel: {

            formatter: '{value} W'

        },

        axisPointer: {

            snap: true

        }

    },

    visualMap: [{

        show: false,

        seriesIndex:1,

        dimension: 0,

        pieces: [{

            lte: 6,

            color: 'red'

        }, {

            gt: 6,

            lte: 8,

            color: 'red'

        }, {

            gt: 8,

            color: 'transparent'

        }]

    },

    {

        show: false,

        seriesIndex:3,

        dimension: 0,

        pieces: [{

            lte: 6,

            color: 'blue'

        }, {

            gt: 6,

            lte: 8,

            color: 'blue'

        }, {

            gt: 8,

            color: 'transparent'

        }]

    }],

    series: [

        {

            name:'用电量',

            type:'line',

            smooth: true,

            lineStyle:{normal:{type:'dashed',color:"red"}},

            data: [300, 550, 500, 400, 390, 380, 390, 200, 500, 281, 750, 800, 700, 600, 400],

        },

        {

            name:'电量',

            type:'line',

            itemStyle:{normal:{color:"red"}},

            smooth: true,

            data: [300, 550, 500, 400, 390, 380, 390, 200, 500, 281, 750, 800, 700, 600, 400],

        },

        {

            name:'用量',

            type:'line',

            smooth: true,

            lineStyle:{normal:{type:'dashed',color:"blue"}},

            data: [300, 550, 100, 40, 390, 380, 290, 200, 500, 281, 750, 800, 300, 600, 400],

        },

        {

            name:'用',

            type:'line',

            smooth: true,

 

            data: [300, 550, 100, 40, 390, 380, 290, 200, 500, 281, 750, 800, 300, 600, 400],

        }

    ]

};