Echarts饼图

实现效果：

代码：

<template>
    <div class="test-echart">
        <div id="pieChart" ref="pieChart" :style="pieStyle"></div>
    </div>
</template>
<script>
// import * as echarts from 'echarts' // 方法2 局部引用
export default {
 data () {
    return {
      pieStyle: { height: '460px', with: '100%' }, // echarts的样式
      // colors: ['#5793f3', '#d14a61', '#675bba'],
      pieOption: {
        backgroundColor: '#fff',
        title: {
          text: '注册资金',
          subtext: '2024年',
          x: 'center',
          y: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{b}: {c}家 ({d}%)'
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          orient: 'horizontal',
          bottom: '0%',
          data: ['<10w', '10w-50w', '50w-100w', '100w-500w', '>500w']
        },
        series: [
          // 内环
          {
            type: 'pie',
            selectedMode: 'single',
            radius: ['28%', '54%'],
            color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'],
            label: {
              normal: {
                show: false
                // position: 'inner',
                // // formatter: '{b}',

                // textStyle: {
                //   color: '#fff',
                //   fontWeight: 'bold',
                //   fontSize: 14
                // }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          },
          // 外环
          {
            type: 'pie',
            // radius: ['40%', '80%'],
            radius: ['60%', '80%'],
            // label: {
            //   normal: {
            //     position: 'inner',
            //     // formatter: '{b}',
            //     textStyle: {
            //       color: '#777777',
            //       fontWeight: 'bold',
            //       fontSize: 14
            //     }
            //   }
            // },

            labelLine: {
              normal: {
                show: true,
                length: 20,
                length2: 30,
                lineStyle: {
                  color: '#CCCCCC',
                  width: 1
                }
              }
            },
            label: {
              normal: {
                formatter: '{b|{b}}\n{hr|}\n{c|{c}家} {d|{d}%}',
                // formatter: '{b|{b}}\n{hr|}\n{c|{c}家}',
                rich: {
                  b: {
                    fontSize: 16,
                    color: '#acf',
                    align: 'left',
                    padding: 4
                  },
                  hr: {
                    borderColor: '#fbc',
                    // borderColor: '#CCCCCC',
                    width: '100%',
                    borderWidth: 2,
                    height: 0
                  },
                  c: {
                    fontSize: 16,
                    align: 'center',
                    padding: 4,
                    color: '#00EDED'
                  },
                  d: {
                    fontSize: 16,
                    align: 'center',
                    padding: 2,
                    color: '#aad313'
                  }
                }
              }
            },
            data: []
          },
          // 边框的设置
          {
            //  radius: ['74%', '80%'],
            radius: ['48%', '54%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            itemStyle: {
              normal: {
                color: 'rgba(250,250,250,0.5)'
              }
            },
            data: [{
              value: 1
            }]
          }]
      },

   }
 },
 mounted () {
   this.$nextTick(() => {
     this.getEcharts()
   })
 },
 methods: {
    // 获取趋势折线图
    getEcharts () {
      // 此处本来是直接调用接口的，这里就写点假数据
 
      if (this.$refs.pieChart) {

        this.pieOption.series[0].data = this.pieData
        this.pieOption.series[1].data = this.pieData

        // 遇到数据更新，视图未更新两种解决方法 --解决echarts数据更新，页面不刷新问题
        // 1.添加 piecharts.clear()
        // // const piecharts = echarts.init(this.$refs.pieChart)
        // const piecharts = this.$echarts.init(this.$refs.pieChart)
        // piecharts.clear()
        // // 对实例对象进行配置
        // piecharts.setOption(this.pieOption)
        // ------
        // 2. setOption有3个属性，setOption(option,notMerge,lazyUpdate);第二个notMerge默认为false,即默认合并数据，设置成true之后就不合并数据，从而实现刷新页面的效果。
        // const piecharts = echarts.init(this.$refs.pieChart)
        const piecharts = this.$echarts.init(this.$refs.pieChart)
        piecharts.setOption(this.pieOption, true)
      }
   }
 }
}
</script>
<style lang="scss" scoped>
.test-echart {
  width: 100%;
  height: 500px;
}
</style>

 data数据形式：

      pieData: [{
        value: 3661,
        name: '<10w'
      }, {
        value: 5713,
        name: '10w-50w'
      }, {
        value: 9938,
        name: '50w-100w'
      }, {
        value: 17623,
        name: '100w-500w'
      }, {
        value: 3299,
        name: '>500w'
      }]