cpp/cpp-ui/src/views/largeScreen/echarts-data.js

import * as echarts from 'echarts'
import {fontSize} from "../../utils";

export const gaugeOption = {
  series: [
    {
      type: 'gauge',
      center: ['50%', '70%'],
      startAngle: 200,
      endAngle: -20,
      min: 0,
      max: 60,
      // splitNumber: 12,
      itemStyle: {
        color: '#FFAB91'
      },
      progress: {
        show: true,
        width: fontSize(0.2)
      },
      pointer: {
        show: false
      },
      axisLine: {
        lineStyle: {
          width: fontSize(0.2)
        }
      },
      axisTick: {
        distance: -fontSize(.45),
        splitNumber: 5,
        lineStyle: {
          // width: 1,
          color: '#999'
        }
      },
      splitLine: {
        distance: -fontSize(.5),
        length: fontSize(.14),
        lineStyle: {
          // width: 3,
          color: '#999'
        }
      },
      axisLabel: {
        distance: -fontSize(.2),
        color: '#999',
        fontSize: fontSize(0.16)
      },
      anchor: {
        show: false
      },
      title: {
        show: false
      },
      detail: {
        valueAnimation: true,
        width: '60%',
        lineHeight: 40,
        borderRadius: 8,
        offsetCenter: [0, '-15%'],
        fontSize: 20,
        fontWeight: 'bolder',
        formatter: '{value} 个',
        color: 'inherit'
      },
      data: [
        {
          value: 20
        }
      ]
    },
    {
      type: 'gauge',
      center: ['50%', '75%'],
      startAngle: 200,
      endAngle: -20,
      min: 0,
      max: 60,
      itemStyle: {
        color: '#FD7347'
      },
      progress: {
        show: true,
        // width: 8
      },
      pointer: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      detail: {
        valueAnimation: true,
        width: '60%',
        lineHeight: 40,
        borderRadius: 8,
        offsetCenter: [0, '50%'],
        fontSize: fontSize(0.2),
        fontWeight: 'bolder',
        formatter: '限电场站数',
        color: 'inherit'
      },
      data: [
        {
          value: 20
        }
      ]
    }
  ]
}
/**
 * 功率曲线
 * */
export let lineOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      animation: false,
      label: {
        backgroundColor: '#505765'
      }
    }
  }, grid: {
    left: 55,
    right: 30,
    bottom: 30
  },
  legend: {
    data: ['实际功率', '可用功率', '理论功率', '短期', '超短期'],
    itemStyle: {
      opacity: 0
    },
    textStyle: {fontSize: fontSize(0.12),color: '#89BFE5'},
    top: '2%'
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLine: {
        onZero: false, lineStyle: {
          color: '#5fbbeb'
        }
      },
      axisLabel: {
        color: '#89BFE5',
        textStyle: {
          fontSize: fontSize(.12)
        }
      },
      axisTick: {
        show: false, // 隐藏X轴轴线
        alignWithLabel: true
      },
      data: ['00:00',
        '00:15', '00:30', '00:45', '01:00',
        '01:15', '01:30', '01:45', '02:00',
        '02:15', '02:30', '02:45', '03:00',
        '03:15', '03:30', '03:45', '04:00',
        '04:15', '04:30', '04:45', '05:00',
        '05:15', '05:30', '05:45', '06:00',
        '06:15', '06:30', '06:45', '07:00',
        '07:15', '07:30', '07:45', '08:00',
        '08:15', '08:30', '08:45', '09:00',
        '09:15', '09:30', '09:45', '10:00',
        '10:15', '10:30', '10:45', '11:00',
        '11:15', '11:30', '11:45', '12:00',
        '12:15', '12:30', '12:45', '13:00',
        '13:15', '13:30', '14:45', '14:00',
        '14:15', '14:30', '14:45', '15:00',
        '15:15', '15:30', '15:45', '16:00',
        '16:15', '16:30', '16:45', '17:00',
        '17:15', '17:30', '17:45', '18:00',
        '18:15', '18:30', '18:45', '19:00',
        '19:15', '19:30', '19:45', '20:00',
        '20:15', '20:30', '20:45', '21:00',
        '21:15', '21:30', '21:45', '22:00',
        '22:15', '22:30', '22:45', '23:00',
        '23:15', '23:30', '23:45'
      ]
    }
  ],
  yAxis: [
    {
      name: 'MW',
      type: 'value',
      nameTextStyle: {color: '#89BFE5',fontSize: fontSize(.14)},
      axisLabel: {
        textStyle: {
          fontSize: fontSize(.12), color: '#89BFE5'
        }
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#394458',
        },
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#394458',
        },
      },
    }
  ],
  series: [
    {
      name: '实际功率',
      type: 'line',
      itemStyle: {
        color: 'rgb(2,207,253)'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(2,205,251)'
          },
          {
            offset: 1,
            color: 'rgba(2,205,251,0)'
          }
        ])
      },
      lineStyle: {
        width: 1
      },
      emphasis: {
        focus: 'series'
      },
      // prettier-ignore
      data: []
    }, {
      name: '可用功率',
      type: 'line',
      itemStyle: {
        color: 'rgb(253,128,2)'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(253,128,2)'
          },
          {
            offset: 1,
            color: 'rgba(2,205,251,0)'
          }
        ])
      },
      lineStyle: {
        width: 1
      },
      emphasis: {
        focus: 'series'
      },
      // prettier-ignore
      data: []
    }, {
      name: '理论功率',
      type: 'line',
      itemStyle: {
        color: 'rgb(253,10,2)'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(253,10,2)'
          },
          {
            offset: 1,
            color: 'rgba(2,205,251,0)'
          }
        ])
      },
      lineStyle: {
        width: 1
      },
      emphasis: {
        focus: 'series'
      },
      // prettier-ignore
      data: []
    }, {
      name: '短期',
      type: 'line',
      itemStyle: {
        color: 'rgb(175,129,251)'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(174,128,249)'
          },
          {
            offset: 1,
            color: 'rgba(173,127,247,0)'
          }
        ])
      },
      lineStyle: {
        width: 1
      },
      emphasis: {
        focus: 'series'
      },
      // prettier-ignore
      data: []
    }, {
      name: '超短期',
      type: 'line',
      itemStyle: {
        color: 'rgb(135,247,207)'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(134,245,205)'
          },
          {
            offset: 1,
            color: 'rgba(134,245,205,0)'
          }
        ])
      },
      lineStyle: {
        width: 1
      },
      emphasis: {
        focus: 'series'
      },
      // prettier-ignore
      data: []
    },
  ]
}
/**
 * 气象预测曲线
 * */
export let weatherLineOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      animation: false,
      label: {
        backgroundColor: '#505765'
      }
    }
  }, grid: {
    left: 30,
    right: 30,
    bottom: 30
  },
  legend: {
    data: ['实际功率', '短期', '超短期','辐照度'],
    itemStyle: {
      opacity: 0
    },
    textStyle: {fontSize: fontSize(0.12),color: '#89BFE5'},
    top: '2%'
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLine: {
        onZero: false, lineStyle: {
          color: '#5fbbeb'
        }
      },
      axisLabel: {
        color: '#89BFE5',
        textStyle: {
          fontSize: fontSize(.12)
        }
      },
      axisTick: {
        show: false, // 隐藏X轴轴线
        alignWithLabel: true
      },
      data: ['00:00',
        '00:15', '00:30', '00:45', '01:00',
        '01:15', '01:30', '01:45', '02:00',
        '02:15', '02:30', '02:45', '03:00',
        '03:15', '03:30', '03:45', '04:00',
        '04:15', '04:30', '04:45', '05:00',
        '05:15', '05:30', '05:45', '06:00',
        '06:15', '06:30', '06:45', '07:00',
        '07:15', '07:30', '07:45', '08:00',
        '08:15', '08:30', '08:45', '09:00',
        '09:15', '09:30', '09:45', '10:00',
        '10:15', '10:30', '10:45', '11:00',
        '11:15', '11:30', '11:45', '12:00',
        '12:15', '12:30', '12:45', '13:00',
        '13:15', '13:30', '14:45', '14:00',
        '14:15', '14:30', '14:45', '15:00',
        '15:15', '15:30', '15:45', '16:00',
        '16:15', '16:30', '16:45', '17:00',
        '17:15', '17:30', '17:45', '18:00',
        '18:15', '18:30', '18:45', '19:00',
        '19:15', '19:30', '19:45', '20:00',
        '20:15', '20:30', '20:45', '21:00',
        '21:15', '21:30', '21:45', '22:00',
        '22:15', '22:30', '22:45', '23:00',
        '23:15', '23:30', '23:45'
      ]
    }
  ],
  yAxis: [
    {
      name: 'MW',
      type: 'value',
      nameTextStyle: {color: '#89BFE5',fontSize: fontSize(.14)},
      axisLabel: {
        textStyle: {
          fontSize: fontSize(.12), color: '#89BFE5'
        }
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#394458',
        },
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#394458',
        },
      },
    },{
      name: 'W/㎡',
      type: 'value',
      nameTextStyle: {color: '#89BFE5',fontSize: fontSize(.14)},
      axisLabel: {
        textStyle: {
          fontSize: fontSize(.12), color: '#89BFE5'
        }
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#394458',
        },
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#394458',
        },
      },
    }
  ],
  series: [
    {
      name: '实际功率',
      type: 'line',
      itemStyle: {
        color: 'rgb(2,207,253)'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(2,205,251)'
          },
          {
            offset: 1,
            color: 'rgba(2,205,251,0)'
          }
        ])
      },
      lineStyle: {
        width: 1
      },
      emphasis: {
        focus: 'series'
      },
      // prettier-ignore
      data: []
    },
    {
      name: '短期',
      type: 'line',
      itemStyle: {
        color: 'rgb(175,129,251)'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(174,128,249)'
          },
          {
            offset: 1,
            color: 'rgba(173,127,247,0)'
          }
        ])
      },
      lineStyle: {
        width: 1
      },
      emphasis: {
        focus: 'series'
      },
      // prettier-ignore
      data: []
    }, {
      name: '超短期',
      type: 'line',
      itemStyle: {
        color: 'rgb(135,247,207)'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(134,245,205)'
          },
          {
            offset: 1,
            color: 'rgba(134,245,205,0)'
          }
        ])
      },
      lineStyle: {
        width: 1
      },
      emphasis: {
        focus: 'series'
      },
      // prettier-ignore
      data: []
    },{
      name: '辐照度',
      yAxisIndex:1,
      type: 'line',
      itemStyle: {
        color: 'rgb(253,128,2)'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(253,128,2)'
          },
          {
            offset: 1,
            color: 'rgba(2,205,251,0)'
          }
        ])
      },
      lineStyle: {
        width: 1
      },
      emphasis: {
        focus: 'series'
      },
      // prettier-ignore
      data: []
    },
  ]
}

/**
 * 未来10天预测电量
 **/
export const forecast10LineOption = {
  animation: false,
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: 20,
    right: 30,
    bottom: 10,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLine: {
      lineStyle: {
        color: '#5fbbeb'
      }
    },
    axisTick: {
      show: false, // 隐藏X轴轴线
      alignWithLabel: true
    },
    axisLabel: {
      color: '#89BFE5'
    },
  },
  yAxis: {
    type: 'value',
    name: '万kWh',
    nameTextStyle: {
      color: '#89BFE5'
    },
    axisLabel: {
      padding: [3, 0, 0, 0],
      formatter: '{value}',
      textStyle: {
        fontSize: 14,
        color: '#89BFE5'
      },
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: '#394458',
      },
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#394458',
      },
    },
  },
  series: [
    {
      type: 'bar',
      barWidth: '60%',
      data: [],
      color: 'rgb(95,187,235)',
      itemStyle: {
        // 柱子的颜色
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgb(95,187,235)'
        }, {
          offset: 0.25,
          color: 'rgb(95,187,235,0.75)'
        }, {
          offset: 0.5,
          color: 'rgba(95,187,235,0.5)'
        }, {
          offset: 0.75,
          color: 'rgb(95,187,235,0.25)'
        }, {
          offset: 1,
          color: 'rgba(95,187,235,0.0)'
        }]),
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 1, color: 'rgb(95,187,235)'}
          ])
        }
      },
      // 鼠标放到柱子上显示数据
      tooltip: {
        valueFormatter: function (value) {
          return value + '万kWh';
        }
      },
    }
  ]
}

/**
 *  短期偏差统计
 */
export const dqTickOptions= {
  grid: {
    top:30,
    left: 40,
    right: 10,
    bottom: 30
  },
  animation: false,
  tooltip: {
    trigger: 'axis',
    formatter: function (params){
      let str = params[0].axisValue +'<br/>'
      for(let param of params){
        if(param.componentSubType === 'scatter'){
          str = str + '<div class="flex justify-between"><div>'+param.marker+param.seriesName+'</div><div>'+param.value[1]+'</div></div>'
        }
        if(param.componentSubType === 'boxplot'){
          str = str + '<div class="flex justify-between"><div>'+param.marker+'min</div><div>'+param.value[1]+'</div></div>'+
            '<div class="flex justify-between"><div>'+param.marker+'Q1</div><div>'+param.value[2]+'</div></div>'+
            '<div class="flex justify-between"><div>'+param.marker+'median</div><div>'+param.value[3]+'</div></div>'+
            '<div class="flex justify-between"><div>'+param.marker+'Q3</div><div>'+param.value[4]+'</div></div>'+
            '<div class="flex justify-between"><div>'+param.marker+'max</div><div>'+param.value[5]+'</div></div>'
        }
      }
      return str
    }
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      color: '#89BFE5'
    },
    axisTick: {show: true},
    axisLine: {
      onZero: false,
      lineStyle: {
        color: '#5fbbeb'
      }
    },
    data: []
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      padding: [3, 0, 0, 0],
      formatter: '{value}',
      textStyle: {
        fontSize: 14,
        color: '#89BFE5'
      },
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: '#394458',
      },
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#394458',
      },
    },
  },

  series: [
    {
      name: '',
      type: 'boxplot',
      itemStyle: {
        color:'rgba(126,199,250,0.86)',
        // 边线颜色
        borderColor: '#89BFE5',
        // 边线宽度
        borderWidth: 2
      },
      data: []
    },
    {
      type: 'scatter',
      itemStyle: {
        color:'orange',
      },
      data: []
    }
  ]
}