web-prod2/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() {
      window['tis'] = this
      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 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 + 9, shape.y - 9]
          const c2 = [yAxisPoint[0] + 9, yAxisPoint[1] - 9]
          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] + 9, yAxisPoint[1] + 18]
          const c4 = [shape.x + 9, shape.y + 18]
          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 + 9, shape.y + 18]
          const c3 = [shape.x + 18, shape.y + 9]
          const c4 = [shape.x + 9, shape.y - 9]
          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%', '-100%'],
              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>