web/src/views/dashboard-screen/qb-dlsbxjdx/index.vue

<template>
  <div class="chart-wrap">
    <div class="l-coner">
      <v-chart autoresize :option="option"/>
    </div>
    <div class="r-coner">
      <div class="c-item">{{ arrMap['单元'].per }}%</div>
      <div class="c-item">{{ arrMap['变电所'].per }}%</div>
      <div class="c-item">{{ arrMap['配电所'].per }}%</div>
      <div class="c-item">{{ arrMap['电源线'].per }}%</div>
      <div class="c-item">{{ arrMap['箱变'].per }}%</div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {chartQbdlsbxjdx} from '@/api/dashboard-json'

export default {
  name: 'QbDlsbxjdx',
  data() {
    return {
      option: {},
      arrMap: {}
    }
  },
  created() {
    this.getOption()
  },

  methods: {
    async getOption() {

      let keys = []
      const maxs = []
      const values = []
      const res = await chartQbdlsbxjdx()
      if (res?.code === 200) {
        keys = res?.info.xaxis
        res?.info.xaxis.forEach((key, index) => {
          maxs.push(res.info.series[0].data[index])
          values.push(res.info.series[1].data[index])
          const keyMap = {
            [res?.info.series[0].name]: res.info.series[0].data[index],
            [res?.info.series[1].name]: res.info.series[1].data[index],
            per: (res.info.series[1].data[index] * 100 / res.info.series[0].data[index]).toFixed(0)
          }

          this.arrMap[key] = keyMap
        })
      }
      window['max'] = maxs.reverse()
      window['values'] = values.reverse()

      const cubeW = 6;
      const cubeH = 12;
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: (ctx, shape) => {
          const yAxisPoint = shape.yAxisPoint
          const c0 = [shape.x, shape.y]
          const c1 = [shape.x + cubeW, shape.y - cubeW]
          const c2 = [yAxisPoint[0] + cubeW, yAxisPoint[1] - cubeW]
          const c3 = [yAxisPoint[0], yAxisPoint[1]]
          ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
        }
      })
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function(ctx, shape) {
          const yAxisPoint = shape.yAxisPoint
          const c1 = [shape.x, shape.y]
          const c2 = [yAxisPoint[0], yAxisPoint[1]]
          const c3 = [yAxisPoint[0] + cubeW, yAxisPoint[1] + cubeH]
          const c4 = [shape.x + cubeW, shape.y + cubeH]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        buildPath: function(ctx, shape) {
          const c1 = [shape.x, shape.y]
          const c2 = [shape.x + cubeW, shape.y + cubeH]
          const c3 = [shape.x + cubeH, shape.y + cubeW]
          const c4 = [shape.x + cubeW, shape.y - cubeW]
          ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
      })
      echarts.graphic.registerShape('CubeLeft', CubeLeft)
      echarts.graphic.registerShape('CubeRight', CubeRight)
      echarts.graphic.registerShape('CubeTop', CubeTop)
      // const MAX = [100, 220, 200, 150, 200]
      const MAX = maxs
      // const VALUE = [20, 10, 30, 50, 150]
      const VALUE = values
      const NAMES = ['箱变', '电源线', '配电所', '变电所', '单元']
      this.option = {
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          width: '100%',
          height: '100%',
          containLabel: true
        },
        yAxis: {
          type: 'category',
          data: NAMES,
          show: false,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          offset: 0,
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: false,
            lineStyle: {
              color: '#7DFFFD'
            }
          },
          axisLabel: {
            fontSize: `this.EchartfontSize(10)`
          }

        },
        xAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            fontSize: this.EchartfontSize(10)
          }
        },
        series: [
          {
            type: 'custom',
            renderItem: function (params, api) {
              const location = api.coord([api.value(0), api.value(1)])

              return {
                type: 'group',
                children: [{
                  type: 'CubeLeft',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    yAxisPoint: api.coord([0, api.value(1)])
                  },
                  style: {
                    fill: 'rgb(19, 39, 46) '
                  }
                }, {
                  type: 'CubeRight',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    yAxisPoint: api.coord([0, api.value(1)])
                  },
                  style: {
                    fill: 'rgb(19, 39, 46) '
                  }
                }, {
                  type: 'CubeTop',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    yAxisPoint: api.coord([0, api.value(1)])
                  },
                  style: {
                    fill: 'rgb(19, 39, 46)'
                  }
                }]
              }
            },
            data: MAX
          },
          {
            type: 'custom',
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)])
              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      yAxisPoint: api.coord([0, api.value(1)])
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        offset: 0,
                        color: '#50B9E0'
                      },
                        {
                          offset: 1,
                          color: '#88DDF2'
                        }
                      ])
                    }
                  },
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      yAxisPoint: api.coord([0, api.value(1)])
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        offset: 0,
                        color: '#399AB2'
                      },
                        {
                          offset: 1,
                          color: '#6BCAD9'
                        }
                      ])
                    }
                  }, {
                    type: 'CubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      yAxisPoint: api.coord([0, api.value(1)])
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        offset: 0,
                        color: 'rgba(127,217,254,0.78)'
                      },
                        {
                          offset: 1,
                          color: '#7FD9FE'
                        }
                      ])
                    }
                  }]
              }
            },
            data: VALUE
          },
          {
            type: 'bar',
            label: {

              normal: {
                show: true,
                position: [0, '-10%'],
                formatter: (e) => {
                  return e.name
                },
                fontSize: this.EchartfontSize(14),
                color: '#fff'
              }
            },
            itemStyle: {
              color: 'transparent'
            },
            data: VALUE
          },
          {
            type: 'bar',
            label: {

              normal: {
                show: true,
                position: ['80%', '-125%'],
                formatter: (e) => {
                  const ret = `${values[e.dataIndex]}/${maxs[e.dataIndex]}`
                  return ret
                },
                fontSize: this.EchartfontSize(14),
                color: '#fff'
              }
            },
            itemStyle: {
              color: 'transparent'
            },
            data: MAX,
            zlevel: 2
          }
        ]
      }
    }
  }

}
</script>

<style scoped lang="scss">

.chart-wrap {
  width: 100%;
  height: 100%;
  display: flex;

  .l-coner {
    flex-grow: 1;
    width: 100%;
    height: 100%;
  }

  .r-coner {
    width: 4vw;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font: normal 0.6vw hxb;
    .c-item {
      color: #91FFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      flex-shrink: 0;
      width: 100%;
      height: 100%;
      background-image: url("/static/images/qianbian_circular@2x.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }
}
</style>