vue Echarts饼状图请求数据渲染模板

<echarts1 :list="list"></echarts1>
<template>
  <div class="echarts1" ref="echarts1">

  </div>
</template>

<script>

export default {
  name: 'echarts1',
  components: {},
  data() {
    return {}
  },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  computed: {
    echartsData: function () {
      var list = []
      this.list.forEach((type) => {
        list.push({
          value: type.typeSetCount,
          name: type.typeSetName
        })
      });
      return list
    },
    colorList: function () {
      var list = [{
        start: 'rgba(225, 183, 67, 1.00)',
        end: 'rgba(169, 157, 118, 1.00)'
      }, {
        start: 'rgba(55, 137, 238, 1.00)',
        end: 'rgba(114, 140, 173, 1.00)'
      }, {
        start: 'rgba(59, 233, 113, 1.00)',
        end: 'rgba(114, 170, 136, 1.00)'
      }, {
        start: 'rgba(57, 236, 233, 1.00)',
        end: 'rgba(117, 167, 168, 1.00)'
      }]
      var colorList = []
      list.forEach((type) => {
        var color = new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: type.start
        },
          {
            offset: 1,
            color: type.end
          }
        ])
        colorList.push(color)
      });
      return colorList
    }
  },
  mounted() {
    this.drawLine()
  },
  watch: {
    list() {
      this.drawLine()
    }
  },
  methods: {
    drawLine() {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts1)
      var option = {
        color: that.colorList,
        title: {
          text: '项目\n组成',
          top: 'middle',
          left: 'center',
          textStyle: {
            fontSize: 33,
            fontWeight: '700',
            color: '#ACC5CB',
            textAlign: 'center',
            fontFamily: 'ZhenyanGB',
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} {b} : {c} ({d}%)'
        },
        series: [
          {
            name: '项目类型分析',
            type: 'pie',
            radius: ['50%', '75%'],
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                borderColor: 'rgba(11, 32, 54, 1.00)',
                borderWidth: 3
              }
            },
            label: {
              show: false,
              normal: {
                show: false,
                position: 'outside',
                fontSize: 14,
                color: '#92B2D7',
                formatter: (params) => {
                  return params.name + ' : ' + params.value
                }
              }
            },
            labelLine: {
              length: 1,
              length2: 20
            },
            data: that.echartsData
          },
          {
            type: 'pie',
            name: '饼状背景',
            radius: ['0%', '100%'],
            center: ['50%', '50%'],
            startAngle: 110,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.RadialGradient(.5, .5, 0.5, [{
                  offset: 0,
                  color: 'rgba(255,255,255,0.1)'
                },
                  {
                    offset: 0.5,
                    color: 'rgba(255,255,255,0.1)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(255,255,255,0.1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,255,255,0.5)'
                  }
                ], false),
              }
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false
            },
            data: [50]
          },
          {
            type: 'pie',
            name: '饼状背景',
            radius: ['99%', '100%'],
            center: ['50%', '50%'],
            startAngle: 110,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: 'rgba(151, 159, 169, 1.00)'
              }
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false
            },
            data: [50]
          },
          {
            type: 'pie',
            name: '饼状背景',
            radius: ['0%', '50%'],
            center: ['50%', '50%'],
            startAngle: 110,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: 'rgba(0, 22, 45, 1.00)',
              }
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false
            },
            data: [50]
          },
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 287px;
  height: 287px;
}
</style>