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

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

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

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

  methods: {
    async getOption() {
      const res = await chartDlydts()
      window['tis'] = this;
      if (res?.code === 200) {
        const arrMap = []
        // const max =
        res.info.xaxis.forEach((item, index) => {
          const valItem = {
            name: item,
            used: res.info.series[0].data[index],
            value: res.info.series[0].data[index],
            total: res.info.series[1].data[index]
          }

          arrMap.push(valItem)
        })
        arrMap.forEach(item => {
          if (item.used > item.total) {
            item.used = item.total * 1.08
          }
        })
        this.arrMap = arrMap
      }
      let data = [{
        name: '第一季度',
        used: 100,
        total: 100
      }, {
        name: '第二季度',
        used: 10,
        total: 100
      }, {
        name: '第三季度',
        used: 10,
        total: 100
      }, {
        name: '第四季度',
        used: 10,
        total: 100
      }]
      data = this.arrMap.reverse()
      window['t_data'] = data
      const colors = [
        [
          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: 'rgb(82, 113, 195)'}, {
            offset: 1,
            color: 'rgb(120, 142, 237)'
          }], false),
          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: 'rgb(81, 129, 192)'}, {
            offset: 1,
            color: 'rgb(123, 148, 234)'
          }], false),
          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: 'rgb(89, 137, 188)'}, {
            offset: 1,
            color: 'rgb(113, 173, 229)'
          }], false),
          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: 'rgb(88, 166, 191)'}, {
            offset: 1,
            color: 'rgb(128, 230, 226)'
          }], false)

        ],
        ['rgb(41, 73, 110)',
          'rgb(41, 73, 110)',
          'rgb(41, 73, 110)',
          'rgb(41, 73, 110)'
        ]
      ]
      const series = []
      const yAxis = []
      for (let i = data.length - 1; i >= 0 ; i--) {
        series.push({
          name: '',
          type: 'pie',
          clockWise: false, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [90 - i * 15 + '%', 84 - i * 15 + '%'],
          center: ['45%', '50%'],
          label: {
            show: false
          },
          itemStyle: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            borderRadius: 60 // 设置每一段子项目的圆角

          },
          data: [
            {
              value: data[i].used * (3 / 4),
              name: data[i].name
            },
            {
              value: (data[i].total - data[i].used) + data[i].used * (1 / 4),
              name: data[i].name,
              itemStyle: {
                color: 'transparent',
                borderRadius: 60 // 设置每一段子项目的圆角

              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }
          ]
        })
        series.push({
          name: null,
          type: 'pie',
          silent: true,
          z: 1,
          clockWise: false, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [90 - i * 15 + '%', 84 - i * 15 + '%'],
          center: ['45%', '50%'],
          label: {
            show: false
          },
          itemStyle: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            borderRadius: 60 // 设置每一段子项目的圆角

          },
          data: [
            {
              value: 7.5,
              itemStyle: {
                color: colors[1][i]
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            },
            {
              value: 2.5,
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
                borderRadius: 60 // 设置每一段子项目的圆角
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }
          ]
        })
        yAxis.push(((data[i].used / data[i].total) * 100).toFixed(0) + '%')
      }
      this.option = {
        color: colors[0],
        legend: {
          show: true,
          icon: 'reac',
          top: '0%',
          left: '65%',
          width: 10,
          height: 10000,
          orient: 'horizontal',
          data: name,
          selectedMode: false,
          // orient: 'vertical',
          formatter: (name) => {
            const findItem = data.find(item => item.name === name)
            if (findItem) {
              if (findItem.total <= 0) {
                return name + ' ' + findItem.total + '%'
              } else {
                const per = ((findItem.value / findItem.total) * 100).toFixed(0)
                return `${name} ${per}%`
              }

            } else {
              return name
            }

          },
          textStyle: {
            fontSize: this.EchartfontSize(10),
            color: 'rgba(255,255,255,0.8)',
          }
        },
        tooltip: {
          show: false,
          trigger: 'item',
          formatter: '{a}<br>{b}:{c}({d}%)'
        },
        grid: {
          top: '3%',
          left: '45%',
          width: '40%',
          height: '30%',
          containLabel: true
        },
        yAxis: [{
          type: 'category',
          inverse: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: (name, index) => {
              return `${this.arrMap[index].value}/${this.arrMap[index].total}`
            },
            interval: 0,
            inside: true,

            textStyle: {
              color: 'rgba(255,255,255,0.8)',
              fontSize: this.EchartfontSize(12)
            },
            show: true
          },
          data: yAxis
        }],
        xAxis: [{
          show: false
        }],
        series: series
      }
    }
  }

}
</script>

<style scoped lang="scss">

$xHeight: 120px;
.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>