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

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

<script>

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

  methods: {
    getOption() {

      const data = [{
        name: '第一季度',
        value: 40
      }, {
        name: '第二季度',
        value: 30
      }, {
        name: '第三季度',
        value: 20
      }, {
        name: '第四季度',
        value: 10
      }]
      const name = data.map((item) => item.name)
      const value = data.map((item) => item.value)
      const sum = value.reduce((a, b) => {
        return a + b
      })
      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 = 0; i < data.length; i++) {
        series.push({
          name: '',
          type: 'pie',
          clockWise: false, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [90 - i * 10 + '%', 86 - i * 10 + '%'],
          center: ['50%', '50%'],
          label: {
            show: false
          },
          itemStyle: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            borderRadius: 60 // 设置每一段子项目的圆角

          },
          data: [{
            value: data[i].value,
            name: data[i].name
          },
            {
              value: sum - data[i].value,
              name: '',
              itemStyle: {
                color: 'transparent',
                borderRadius: 60 // 设置每一段子项目的圆角

              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }
          ]
        })
        series.push({
          name: '',
          type: 'pie',
          silent: true,
          z: 1,
          clockWise: false, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [90 - i * 10 + '%', 86 - i * 10 + '%'],
          center: ['50%', '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].value / sum) * 100).toFixed(2) + '%')
      }
      this.option = {
        backgroundColor: '#012248',
        color: colors[0],
        legend: {
          show: true,
          icon: 'circle',
          top: '15%',
          left: '60%',
          width: '40%',
          height: '60%',
          data: name,
          orient: 'vertical',
          formatter: (name) => {
            return (
              '{title|' + name + '}   {value|' + data.find((item) => {
                return item.name === name
              }).value + '}'
            )
          },
          textStyle: {
            rich: {
              title: {
                fontSize: 14,
                lineHeight: 30,
                color: 'rgb(0, 178, 246)'
              },
              value: {
                fontSize: 14,
                lineHeight: 30,
                color: '#fff'
              }
            }
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{a}<br>{b}:{c}({d}%)'
        },
        grid: {
          top: '3%',
          left: '50%',
          width: '40%',
          height: '21%',
          containLabel: false
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            inside: true,
            textStyle: {
              color: '#fff',
              fontSize: 14
            },
            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>