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

<template>
  <div class="wrap">
    <div class="chart-wrap">
      <v-chart autoresize :option="option"/>

    </div>
    <div class="tip">
      <img src="/static/images/syjhTIP.png">
    </div>
  </div>
</template>

<script>

import {chartDlydts, chartSyjhdxqk} from '@/api/dashboard-json'

export default {
  name: 'SyjhdxqkChart',
  data() {
    return {
      option: {},
      arrMap: {
        '开关分合计划': [],
        '单体计划': []
      }
    }
  },
  created() {
    this.getOption()
  },

  methods: {
    async getOption() {
      const res = await chartSyjhdxqk()
      if (res?.code === 200) {
        const arrMap = {
          '开关分合计划': [],
          '单体计划': []
        }
        // const max =
        res.info.xaxis.forEach((item, index) => {
          const valItem = {
            name: item,
            value: res.info.series[1].data[index],
            used: res.info.series[1].data[index],
            total: res.info.series[0].data[index],
            totalLabel: res.info.series[0].data[index]
          }
          arrMap['开关分合计划'].push(valItem)
          const valItem2 = {
            name: item,
            value: res.info.series[3].data[index],
            used: res.info.series[3].data[index],
            total: res.info.series[2].data[index],
            totalLabel: res.info.series[2].data[index]
          }
          arrMap['单体计划'].push(valItem2)
        })
        arrMap['开关分合计划'].forEach(item => {
          if (item.used > item.total) {
             item.total = item.used
          }
        })
        arrMap['单体计划'].forEach(item => {
          if (item.used > item.total) {
             item.total = item.used
          }
        })
        this.arrMap = arrMap
      }
      const baseWidth = this.EchartfontSize(14)
      const offsetWidth = this.EchartfontSize(14)
      const triangleHeight = 8
      this.option = {
        color: [],
        grid: {
          containLabel: true,
          left: 20,
          right: 20,
          bottom: 10,
          top: 70
        },
        xAxis: {

          data: ['第一季度', '第二季度', '第三季度', '第四季度'],
          type: 'category',
          axisLabel: {
            color: 'rgba(255,255,255,0.8)',
            fontSize: this.EchartfontSize(12),
            formatter: (name) => {
              return `\n` + name
            }
          },
          position: 'bottom',
          label: {}
          // offset: [0]

        },
        yAxis: {
          axisLabel: {
            color: '#ffffff',
            fontSize: this.EchartfontSize(14)
          },
          axisTick: {
            lineStyle: {
              color: '#384267',
              width: 0
            },
            show: true
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#384267',
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff',
              width: 0,
              type: 'dashed'
            },
            show: true
          },
          name: ''
        },
        series: [
          {
            // data: [200, 85, 112, 275],
            data: this.arrMap['开关分合计划'].map(item => item.used),

            type: 'pictorialBar',
            symbol: 'rect',

            symbolSize: ['100%', '100%'],
            symbolOffset: [-offsetWidth, 0],
            barMaxWidth: 'auto',
            barWidth: baseWidth,

            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgb(106, 169, 216)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(54, 125, 181)'
                  }
                ]
              }
            },

            zlevel: 1
          },
          {
            data: [1, 1, 1, 1],
            type: 'pictorialBar',
            symbol: 'triangle',
            symbolRotate: 180,
            symbolOffset: [-offsetWidth, '96%'],
            symbolSize: ['100%', triangleHeight],
            barMaxWidth: 'auto',
            barWidth: baseWidth,
            itemStyle: {
              color: 'rgb(54, 125, 181)'
            },
            zlevel: 1
          },
          {
            // data: [200, 85, 112, 275],
            data: this.arrMap['开关分合计划'].map(item => item.used),
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbol: 'triangle',
            symbolRotate: 180,
            symbolSize: [baseWidth, triangleHeight],
            symbolOffset: [-offsetWidth, '-0%'],
            barMaxWidth: 'auto',
            barWidth: baseWidth,
            itemStyle: {
              color: 'rgb(159, 214, 253)'
            },
            zlevel: 2
          },
          {
            // data: [600, 541, 741, 741],
            data: this.arrMap['开关分合计划'].map(item => item.total),
            type: 'pictorialBar',
            symbol: 'rect',

            symbolSize: [baseWidth, '100%'],
            symbolOffset: [-offsetWidth, 0],
            barMaxWidth: 'auto',
            barWidth: baseWidth,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgb(35, 55, 81)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(30, 52, 75)'
                  }
                ]
              }
            },
            label: {
              show: true,
              distance: 10,
              color: 'rgba(255,255,255,0.76)',
              fontSize: this.EchartfontSize(10),
              position: [-baseWidth - offsetWidth  / this.EchartfontSize(10), -this.EchartfontSize(30)],
              formatter: (evt) => {
                const item = this.arrMap['开关分合计划']?.[evt.dataIndex] || {}
                return `${item.value}\n /\n${item.totalLabel}`
              }
            },
            zlevel: -1

          },

          {
            // data: [600, 541, 741, 741],
            data: this.arrMap['开关分合计划'].map(item => item.total),
            type: 'pictorialBar',

            symbolPosition: 'end',
            symbol: 'triangle',
            symbolRotate: 180,

            symbolSize: [baseWidth, triangleHeight],
            symbolOffset: [-offsetWidth, '0%'],
            barMaxWidth: 'auto',
            barWidth: baseWidth,

            itemStyle: {
              color: 'rgb(49, 70, 97)'
            },

            zlevel: 1
          },

          // 2
          {
            // data: [160, 410, 112, 275],
            data: this.arrMap['单体计划'].map(item => item.used),
            type: 'pictorialBar',
            symbol: 'rect',

            symbolSize: [baseWidth, '100%'],
            symbolOffset: [offsetWidth, '0%'],
            barMaxWidth: 'auto',
            barWidth: baseWidth,

            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgb(107, 204, 220)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(57, 154, 178)'
                  }
                ]
              }
            },

            zlevel: 1
          },
          {
            data: [1, 1, 1, 1],
            type: 'pictorialBar',

            symbol: 'triangle',
            symbolRotate: 180,

            symbolSize: [baseWidth, triangleHeight],
            symbolOffset: [offsetWidth, '96%'],
            barMaxWidth: 'auto',
            barWidth: baseWidth,

            itemStyle: {
              color: 'rgb(57, 154, 178)'
            },
            zlevel: 1
          },
          {
            // data: [160, 410, 112, 275],
            data: this.arrMap['单体计划'].map(item => item.used),
            type: 'pictorialBar',

            symbolPosition: 'end',
            symbol: 'triangle',
            symbolRotate: 180,

            symbolSize: [baseWidth, triangleHeight],
            symbolOffset: [offsetWidth, '0%'],
            barMaxWidth: 'auto',
            barWidth: baseWidth,

            itemStyle: {
              color: 'rgb(159, 214, 253)'
            },
            zlevel: 2
          },
          {
            // data: [580, 541, 741, 420],
            data: this.arrMap['单体计划'].map(item => item.total),
            type: 'pictorialBar',
            symbol: 'rect',

            symbolSize: [baseWidth, '100%'],
            symbolOffset: [offsetWidth, '0%'],
            barMaxWidth: 'auto',
            barWidth: baseWidth,

            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgb(33, 59, 72)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(30, 64, 78)'
                  }
                ]
              }
            },
            label: {
              show: true,
              distance: 10,
              color: 'rgba(255,255,255,0.76)',
              fontSize: this.EchartfontSize(10),
              position: [baseWidth + 4 - offsetWidth / this.EchartfontSize(2), -this.EchartfontSize(30)],
              formatter: (evt) => {
                const item = this.arrMap['单体计划']?.[evt.dataIndex] || {}
                return `${item.value}\n /\n${item.totalLabel}`
              }
            },
            zlevel: -1

          },
          {
            // data: [580, 541, 741, 420],
            data: this.arrMap['单体计划'].map(item => item.total),
            type: 'pictorialBar',

            symbolPosition: 'end',
            symbol: 'triangle',
            symbolRotate: 180,

            symbolSize: [baseWidth, triangleHeight],
            symbolOffset: [offsetWidth, '0%'],
            barMaxWidth: 'auto',
            barWidth: baseWidth,

            itemStyle: {
              color: 'rgb(49, 70, 97)'

            },

            zlevel: 1
          }
        ],
        tooltip: {
          trigger: 'axis',
          show: false
        }
      }
    }
  }

}
</script>

<style scoped lang="scss">

$xHeight: 120px;
.wrap {
  width: 100%;
  height: 100%;
  position: relative;

  .tip {
    position: absolute;
    z-index: 1;
    right: 1.5vw;
    top: 0;

    img {
      height: 20px;
      width: auto;
      object-fit: cover;
      opacity: 0.7;
    }
  }
}

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

  .left-bar {
    width: 35px;
    display: inline-block;
  }

  .right-conent {
    width: calc(100% - 35px);
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto $xHeight;
  }

}
</style>