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

import  * as echarts from 'echarts'
export const gaugeOption = {
  series: [
    {
      type: 'gauge',
      center: ['50%', '75%'],
      startAngle: 200,
      endAngle: -20,
      min: 0,
      max: 60,
      // splitNumber: 12,
      itemStyle: {
        color: '#FFAB91'
      },
      progress: {
        show: true,
        width: 20
      },
      pointer: {
        show: false
      },
      axisLine: {
        lineStyle: {
          width: 20
        }
      },
      axisTick: {
        distance: -45,
        // splitNumber: 5,
        lineStyle: {
          // width: 1,
          color: '#999'
        }
      },
      splitLine: {
        distance: -52,
        length: 14,
        lineStyle: {
          // width: 3,
          color: '#999'
        }
      },
      axisLabel: {
        distance: -20,
        color: '#999',
        fontSize: 14
      },
      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: 20,
        fontWeight: 'bolder',
        formatter: '限电场站数',
        color: 'inherit'
      },
      data: [
        {
          value: 20
        }
      ]
    }
  ]
}
export let lineOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      animation: false,
      label: {
        backgroundColor: '#505765'
      }
    }
  },grid: {
    bottom: 30
  },
  legend: {
    data: ['实际功率', '可用功率','理论功率','短期','超短期'],
    itemStyle:{
      opacity:0
    },
    top:'2%'
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLine: { onZero: false },
      // prettier-ignore
      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: '万KW',
      type: 'value'
    }
  ],
  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: []
    },
  ]
}