echart实现分段函数

使用echart实现实际与预测的可视化图。
喜欢记得点个关注哦。

一、实现代码

option = {
   
    tooltip: {
        trigger: 'none',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data:['实际','预测']
    },
    grid: {
        top: 70,
        bottom: 50
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#5793f3'
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '销量:  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
        },
        
        
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    
    
    series: [
        
        {
            name: '实际',
            type: 'line',
            smooth: true,
            markArea: {
                    silent: true,
                    label:{
                        position:[10, 10],
                        color:'#53A58A',
                        fontSize:14,
                        fontWeight:'bold'
                    },
                    itemStyle:{
                      color: 'rgba(83,165,138,.1)',
                    },
                    data: [
                        [{
                            xAxis: '2016-8',
                            name:'销量预测',
                            
                        }, {
                            xAxis: '2016-12'
                        }]
                    ]
                },
            markLine: {
                    symbol: 'none',
                    label: {show: false},
                    lineStyle:{
                        type:'solid',
                        color: '#53A58A',
                        width: 1.5
                    },
                    data: [
                        {xAxis: '2016-8'},
                    ]
            },
            
            
            itemStyle: {
                color: '#5793f3',
             },


            data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 68.6, 46.6]
        },
         {
            name: '预测',
            type: 'line',
            smooth: true,

            itemStyle: {
                color: 'red',
             },


            data: [,,,,,,, 46.6,46.6,50,10,20]
        },
        
        
        
    ]
};

二、可视化图

可视化图

三、参考文献

[解决Echarts根据x轴值分段展示...的过程]