ECharts 实现P-chart - 码农教程

@Echarts实现P-Chart

option = {
    title: {
        text: '一天用电量分布',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {}
        }
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30','24:00']
    },
    yAxis: {
        type: 'value',
        min : 200,
        max : 600,
        interval : 50,
        axisLabel: {
            formatter: '{value} W'
        },
        axisPointer: {
            snap: true
        }
    },
    visualMap: {
        show: false,
        dimension:0,
        pieces: [],  //pieces的值由动态数据决定
        outOfRange: {
            color: 'green',
            symbolSize: 7
        },
        inRange:{
            color: 'red',
            symbolSize:12
        }
    },
    series: [
        {
            name:'用电量',
            type:'line',
            smooth:false,
            data: data,
            lineStyle: {
                width: 3
            },
            itemStyle: {
                borderWidth:2
            }
            //symbolSize: 7
            /*
            markArea: {
                data: [ [{
                    name: '早高峰',
                    xAxis: '07:30'
                }, {
                    xAxis: '10:00'
                }], [{
                    name: '晚高峰',
                    xAxis: '17:30'
                }, {
                    xAxis: '19:30'
                }] ]
            }
            */
        },
        {
            name:'上限',
            type:'line',
            data:[500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500],
            lineStyle:{
              opacity : 0  
            },
            symbol : 'none',
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ],
                lineStyle:{
                    color:'red',
                    width:3,
                    type:'solid'
                }
            }
        },
        {
            name:'中心值',
            type:'line',
            data:[400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400,400],
            lineStyle:{
              opacity : 0  
            },
            symbol : 'none',
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ],
                lineStyle:{
                    color:'blue',
                    width:3,
                    type:'solid'
                }
            }
        },
        {
            name:'上一標準差',
            type:'line',
            data:[430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430,430],
            lineStyle:{
              opacity : 0  
            },
            symbol : 'none',
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ],
                lineStyle:{
                    color:'red'
                }
            }
        },
        {
            name:'上二標準差',
            type:'line',
            data:[470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470,470],
            lineStyle:{
              opacity : 0  
            },
            symbol : 'none',
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ],
                lineStyle:{
                    color:'red'
                }
            }
        },
        {
            name:'下限',
            type:'line',
            data:[300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300,300],
            lineStyle:{
              opacity : 0  
            },
            symbol : 'none',
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ],
                lineStyle:{
                    color:'red',
                    width:3,
                    type:'solid'
                }
            }
        },
        {
            name:'下二標準差',
            type:'line',
            data:[370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370,370],
            lineStyle:{
              opacity : 0  
            },
            symbol : 'none',
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ],
                lineStyle:{
                    color:'red'
                }
            }
        },
        {
            name:'下一標準差',
            type:'line',
            data:[330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330,330],
            lineStyle:{
              opacity : 0  
            },
            symbol : 'none',
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ],
                lineStyle:{
                    color:'red'
                }
            }
        }
    ]
};

var data = [510,370,375,380,385,405,410,410,450,380,390,400,410,410,418,430,410,420,450,410,420,400,370,430,410,420,410,430,410,450,360,430,350,400,360,400,410,390,480,490,450,440,430,390,440,390,350,410,400];
var j = 0;
option.series[0].data = data;
for(let i = 0; i < data.length; i++) {
    //超出最大值
    if(data[i]>=500){
        option.visualMap.pieces[j] =  {gte:i,lte:i}; 
        j++;
    }
    //低於最小值
    if(data[i]<=300){
        option.visualMap.pieces[j] =  {gte:i,lte:i}; 
        j++;
    }
    //連續6點呈上升趨勢
    if(data[i+1]>data[i] && data[i+2]>data[i+1] && data[i+3]>data[i+2] && data[i+4]>data[i+3] && data[i+5]>data[i+4]){
        option.visualMap.pieces[j] =  {gte:i,lte:i+5}; 
        j++;
    }
    //連續9點出現在中心線上方
    if(data[i]>400 && data[i+1]>400 && data[i+2