Echarts分段不同样式图形显示

效果：

 

代码：

option = {
    animationDuration: 3000,
    tooltip: {
        trigger: 'axis',
        formatter: function(params) {
            var str = params[0].axisValue + "<br />";
            var n = []; //一个新的临时数组
            var m = [];
            console.log(params)
            for (var i = 0; i < params.length; i++) {
                if (params[i].data) {
                    n.push(params[i].marker + params[i].seriesName + ":" + params[i].data + "<br/>");
                }
            }
            for (var j = 0; j < n.length; j++) //遍历当前数组
            {
                //如果当前数组的第i已经保存进了临时数组，那么跳过，
                //否则把当前项push到临时数组里面
                if (m.indexOf(n[j]) == -1) m.push(n[j]);
            }
            for (var k = 0; k < m.length; k++) {
                str += m[k];
            }
            return str;
        }
    },
    xAxis: {
        type: "category",
        data: ['2022-03-18 07:00', '2022-03-18 08:00', '2022-03-18 09:00', '2022-03-18 10:00', '2022-03-18 11:00', '2022-03-18 12:00', '2022-03-18 13:00', '2022-03-18 14:00', '2022-03-18 15:00', '2022-03-18 16:00', '2022-03-18 17:00', '2022-03-18 18:00', '2022-03-18 19:00', '2022-03-18 20:00', '2022-03-18 21:00', '2022-03-18 22:00'],
        boundaryGap: false,
        axisLabel: {
            interval: 0,
            rotate: 0,
            formatter: function(value, index) {
                var date = new Date(value);
                return date.getHours() + "点";
            },
        },
        axisLine: {
            lineStyle: {
                type: "solid",
                color: "#00b0d5",
                width: "1",
            },
        },
    },
    yAxis: {
        name: "PM10",
        scale: true,
        splitNumber: 2,
        axisLine: {
            show: true,
            lineStyle: {
                type: "solid",
                color: "#00b0d5",
                width: "1",
            },
        },
        splitLine: {
            show: false,
        },
    },
    grid: {
        left: "1%",
        top: "20%",
        right: "5%",
        bottom: "10%",
        containLabel: true,
    },
    series: [{
            type: "line",
            name: "华阳",
            smooth: true,
            data: [19, 21, 18, 15, 17, 16, 19, 21, 20, 22, 23, 26, 25, null, ],
        },
        {
            type: "line",
            name: "华阳",
            smooth: true,
            itemStyle: {
                normal: {
                    lineStyle: {
                        width: 2,
                        type: 'dotted' //'dotted'虚线 'solid'实线
                    }
                }
            },
            data: [null, null, null, null, null, null, null, null, null, null, null, null, 25, 21, 28, 33],
        },
        {
            type: "line",
            name: "仙霞",
            smooth: true,
            data: [18, 22, 17, 14, 16, 17, 22, 23, 23, 25, 24, 29, 35, null, ],
        },
        {
            type: "line",
            name: "仙霞",
            smooth: true,
            itemStyle: {
                normal: {
                    lineStyle: {
                        width: 2,
                        type: 'dotted', //'dotted'虚线 'solid'实线
                    }
                }
            },
            data: [null, null, null, null, null, null, null, null, null, null, null, null, 35, 31, 18, 23],
        },

    ],
};