web-prod2/src/views/dashboard-screen/jryl/index.vue

<template>
  <div class="chart-wrap">
    <div class="wrap-fix">
      <div class="col-1 col">
        <v-chart autoresize :option="option1"/>
      </div>
      <div class="col-2 col">
        <v-chart autoresize :option="option2"/>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'Jryl',
  data() {
    return {
      option1: {},
      option2: {}
    }
  },
  created() {
    this.getOption()
  },

  methods: {
    async getOption() {
      let arrMap = []
      const res = await chartMapTable()
      if (res.code === 200) {
        arrMap = [
          [res.info.series[0].data[0], res.info.series[1].data[0]],
          [res.info.series[0].data[1], res.info.series[1].data[1]],
          [res.info.series[0].data[2], res.info.series[1].data[2]]
        ]
      }
      var xData2 = ['变电']
      var data = arrMap || [
        [50, 10],
        [100, 10],
        [80, 10]
      ]
      const data1 = [
        [data[0][0]],
        [data[1][0]],
        [data[2][0]]
      ]
      const data2 = [
        [data[0][1]],
        [data[1][1]],
        [data[2][1]]
      ]
      const xDataSum = [arrMap[0][0] + arrMap[1][0] + arrMap[2][0], arrMap[0][1] + arrMap[1][1] + arrMap[2][1]]

      window['xDataSum'] = xDataSum

      const gapWidth = this.EchartfontSize(125)
      const barWidth = this.EchartfontSize(10)
      const symbolOffsetWidth = this.EchartfontSize(1)
      const symbolSizeWidth = this.EchartfontSize(4)
      const barGap = 10
      const params = {
        xData2: xData2,
        data: data2,
        gapWidth,
        barWidth,
        symbolOffsetWidth,
        symbolSizeWidth,
        barGap,
        xDataSum
      }
      this.renderOption('option1', params)
      const params2 = {
        xData2: ['电力'],
        data: data1,
        gapWidth,
        barWidth,
        symbolOffsetWidth,
        symbolSizeWidth,
        barGap,
        xDataSum
      }
      this.renderOption('option2', params2)
    },
    renderOption(optionName, params) {
      const {
        xData2,
        data,
        gapWidth,
        barWidth,
        symbolOffsetWidth,
        symbolSizeWidth,
        barGap,
        xDataSum
      } = params
      window['params'] = params
      window['tis'] = this

      let sealingData = []
      const gapPerSize = 3
      const gapData = data.map((item) => {
        if (item[0] === 0) {
          return [0, 0, 0]
        } else {
          return [gapPerSize, gapPerSize, gapPerSize]
        }
      })

      data.forEach((item, index) => {
        let sealingBeforeItem = item
        let sealingStart = [0, 0, 0]
        let sealingEnd = sealingBeforeItem
        if (index > 0) {
          sealingBeforeItem = sealingData[index - 1][1]
          sealingStart = sealingBeforeItem.map((d) => {
            return d + gapPerSize
          })
          sealingEnd = sealingBeforeItem.map((d, dIndex) => {
            return d + gapPerSize + item[dIndex]
          })
        }
        sealingData[index] = [sealingStart, sealingEnd]
      })

      console.log('sealingData1', sealingData)
      // 三条数据变两条
      sealingData = JSON.parse(JSON.stringify(sealingData))
      sealingData.forEach((item, index) => {
        const start = item[0].splice(0, 2)
        const end = item[1].splice(0, 2)
        sealingData[index] = [start, end]
      })
      console.log('sealingData2', sealingData)

      this[optionName] = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          selectedMode: false,
          show: optionName !== 'option2',
          top: '5%',
          right: '30%',
          width: '100%',
          height: '0%',
          // orient: 'vertical',
          textStyle: {
            color: '#ffffff',
            fontSize: this.EchartfontSize(12)
          },
          data: [
            {
              name: '一级',
              // 强制设置图形为圆。
              icon: `image://${window.location.origin}/static/images/icon_red@2x.png`,
              // 设置文本为红色
              textStyle: {
                color: '#ffffff'
              }
            },
            {
              name: '二级',
              // 强制设置图形为圆。
              icon: `image://${window.location.origin}/static/images/icon_yellow@2x.png`,
              // 设置文本为红色
              textStyle: {
                color: '#ffffff'
              }
            },
            {
              name: '三级',
              // 强制设置图形为圆。
              icon: `image://${window.location.origin}/static/images/icon_blue@2x.png`,
              // 设置文本为红色
              textStyle: {
                color: '#ffffff'
              }
            }

          ]

        },
        grid: {
          right: '10%',
          left: '5%',
          height: '80%',
          top: optionName === 'option2' ? 0 : '50%',
          bottom: optionName === 'option2' ? '30%' : 0,
          containLabel: true

        },
        xAxis: {
          show: false,
          type: 'value',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            fontSize: this.EchartfontSize(16),
            color: '#ffffff',
            formatter: (name) => {
              return name + '    '
            }
          }
        },
        yAxis: {
          data: xData2,
          type: 'category',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            fontSize: this.EchartfontSize(16),
            color: '#ffffff',
            formatter: (name) => {
              return name + '    '
            }
          }

        },
        series: [
          { // 一级
            name: '一级',
            type: 'bar',
            stack: 'total',
            barGap: barGap, /* 多个并排柱子设置柱子之间的间距*/
            barCategoryGap: 10, /* 多个并排柱子设置柱子之间的间距*/
            barWidth: barWidth,
            itemStyle: { // lenged文本
              opacity: 1,
              color: () => {
                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'rgba(231, 73, 2, 0.30)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(231, 73, 2, 0.60)' // 100% 处的颜色
                }], false)
              }
            },
            label: {
              show: true,
              position: ['50%', -barWidth - 10],
              fontSize: this.EchartfontSize(16),
              color: '#ffffff'
            },
            data: data[0],
            show: false
          },
          { // gap
            name: '',
            type: 'bar',
            barWidth: gapWidth,
            stack: 'total',
            z: 0,
            itemStyle: {
              color: 'rgba(255,0,0,1)',
              opacity: 0
            },
            data: data[0][0] === 0 ? [0] : gapData[0]
          },
          { // 二级
            name: '二级',
            type: 'bar',
            stack: 'total',
            barWidth: barWidth,
            itemStyle: { // lenged文本
              opacity: 1,
              color: (params) => {
                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'rgba(231, 203, 2, 0.30)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgb(72, 72, 36)' // 100% 处的颜色
                }], false)
              }
            },
            label: {
              show: true,
              position: ['50%', -barWidth - 10],
              fontSize: this.EchartfontSize(16),
              color: '#fffff'
            },
            data: data[1]
          },
          { // gap
            name: '',
            type: 'bar',
            barWidth: gapWidth,
            stack: 'total',
            z: 0,
            itemStyle: {
              color: 'rgba(255,0,0,1)',
              opacity: 0
            },
            data: data[1][0] === 0 ? [0] : gapData[1]
          },
          { // 三级
            name: '三级',
            type: 'bar',
            stack: 'total',
            barWidth: barWidth,
            itemStyle: { // lenged文本
              opacity: 1,
              color: (params) => {
                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'rgba(78, 231, 255, 0.30)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(78, 231, 255, 0.60)' // 100% 处的颜色
                }], false)
              }
            },
            label: {
              show: true,
              position: ['50%', -barWidth - 10],
              fontSize: this.EchartfontSize(16),
              color: '#fffff'
            },
            data: data[2]
          },
          // { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
          //   type: 'bar',
          //   barWidth: barWidth,
          //   barGap: '-100%',
          //   stack: '广告',
          //   itemStyle: {
          //     color: 'transparent'
          //   },
          //   data: data1
          // },

          { // 封口1
            'name': '',
            'type': 'pictorialBar',
            'symbol': 'circle',
            'symbolRotate': 180,
            'symbolSize': [symbolSizeWidth, barWidth],
            'symbolOffset': [symbolOffsetWidth, 0],
            itemStyle: {
              opacity: data[0][0] === 0 ? 0 : 1,
              color: (params) => {
                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'rgba(237, 118, 101,.4)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(237, 118, 101, .8)' // 100% 处的颜色
                }], false)
              }
            },
            label: {},
            'symbolPosition': 'start',
            'data': [sealingData[0][0][0], sealingData[0][0][0]]
          },

          { // 封口2
            'name': '',
            'type': 'pictorialBar',
            'symbolSize': [symbolSizeWidth, barWidth],
            'symbolRotate': 180,
            'symbolOffset': [symbolOffsetWidth, 0],
            'symbolPosition': 'end',
            'z': 12,
            itemStyle: {
              opacity: data[0][0] === 0 ? 0 : 1,
              color: (params) => {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(237, 118, 101,1)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(237, 118, 101, 1)' // 100% 处的颜色
                }], false)
              }
            },
            'data': sealingData[0][1]
          },
          { // 封口3
            'name': '',
            'type': 'pictorialBar',
            'symbol': 'circle',
            'symbolRotate': 180,
            'symbolSize': [symbolSizeWidth, barWidth],
            'symbolOffset': [symbolOffsetWidth, 0],
            'z': 12,
            itemStyle: {
              opacity: data[1][0] === 0 ? 0 : 1,
              color: (params) => {
                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'rgba(255, 238, 91,.1)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255, 238, 91, .6)' // 100% 处的颜色
                }], false)
              }
            },
            label: {
              // show: true,
              // position: 'top',
              // fontSize: 16,
              // color: '#fff'
              // formatter:(item)=>{
              //     console.log(item)
              //     return 'ssss'
              // }
            },
            'symbolPosition': 'start',
            'data': sealingData[1][0]
          },
          { // 封口4
            'name': '',
            'type': 'pictorialBar',
            'symbolSize': [symbolSizeWidth, barWidth],
            'symbolRotate': 180,
            'symbolOffset': [symbolOffsetWidth, 0],
            'symbolPosition': 'end',
            'z': 12,
            itemStyle: {
              opacity: data[1][0] === 0 ? 0 : 1,
              color: (params) => {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 1,
                  color: 'rgba(255, 238, 91, 1)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255, 238, 91, 1)' // 100% 处的颜色
                }], false)
              }
            },
            'data': sealingData[1][1]
          },

          { // 封口5
            'name': '',
            'type': 'pictorialBar',
            'symbol': 'circle',
            'symbolRotate': 180,
            'symbolSize': [symbolSizeWidth, barWidth],
            'symbolOffset': [symbolOffsetWidth, 0],
            'z': 12,
            itemStyle: {
              opacity: data[2][0] === 0 ? 0 : 1,
              color: (params) => {
                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: data[2][0] === 0 ? 0 : 1,
                  color: 'rgba(162, 237, 255,.1)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(162, 237, 255,.6)' // 100% 处的颜色
                }], false)
              }
            },
            label: {
              // show: true,
              // position: 'top',
              // fontSize: 16,
              // color: '#fff'
              // formatter:(item)=>{
              //     console.log(item)
              //     return 'ssss'
              // }
            },
            'symbolPosition': 'end',
            'data': sealingData[2][0]
          },
          { // 封口6
            'name': '',
            'type': 'pictorialBar',
            'symbolSize': [symbolSizeWidth, barWidth],
            'symbolRotate': 180,
            'symbolOffset': [symbolOffsetWidth, 0],
            'symbolPosition': 'end',
            'z': 12,
            show: false,
            itemStyle: {
              opacity: data[2][0] === 0 ? 0 : 1,
              color: (params) => {
                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'rgba(162, 237, 255,1)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(162, 237, 255,1)' // 100% 处的颜色
                }], false)
              }
            },
            'data': sealingData[2][1]
          },

          { // right-value
            'name': '',
            'type': 'pictorialBar',
            'symbolSize': [symbolSizeWidth, barWidth],
            'symbolRotate': 180,
            'symbolOffset': [symbolOffsetWidth, 0],
            'symbolPosition': 'end',
            'z': 12,
            itemStyle: {
              opacity: 1,
              color: (params) => {
                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'rgba(162, 237, 255,0)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(162, 237, 255,0)' // 100% 处的颜色
                }], false)
              }
            },
            'data': sealingData[2][1].map(value => value + 10),
            label: {
              show: true,

              distance: 10,
              color: '#fff',
              fontSize: this.EchartfontSize(14),
              // position: [-baseWidth - offsetWidth / this.EchartfontSize(10), -this.EchartfontSize(20)]
              position: 'right',
              formatter: (item) => {
                console.log('item', item)
                if (optionName === 'option1') {
                  return xDataSum[1]
                } else {
                  return xDataSum[0]
                }
              }
            }
          }

        ]
      }
    }
  }

}
</script>

<style scoped lang="scss">

.chart-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgb(40, 42, 54, 0);

  .wrap-fix {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .col {
      flex: 1;
      flex-shrink: 0;
    }
  }

}
</style>