vue用echarts写环形统计

1.代码

<template>
  <div>
    <el-card class="Ratio-card" shadow="hover">
       
      <div id="myChart" :style="{width: '100%', height: '400px'}"></div>
      <div class="total">总计：{{total}}</div>

    </el-card>
  </div>
</template>
<script>
   
  import * as echarts from 'echarts'
  export default {
    name: 'EconomicRatio',
    components: {

    },
    data() {
      return {
        msg: '开销占比',
        dataList: [{
            value: 1548,
            name: '应交人民币'
          },
          {
            value: 310,
            name: '应交支付宝'
          },
          {
            value: 234,
            name: '应交微信'
          },
          {
            value: 135,
            name: '应交信用卡'
          },
          {
            value: 335,
            name: '应交交通卡'
          },
          {
            value: 800,
            name: '应交其他'
          }
        ],
        total: 0,
        datetime: '2021-06',
        // dataList: []
      }
    },
    created() {
      // this.getChartData();
    },
    mounted() {
      this.drawLine();
    },
    methods: {

      getChartData() {//接口获取数据
        getList().then(res => {
          console.log(res)
          let data = res.data
          console.log('data', data)

          this.dataList = data.list
          console.log(' this.dataList ', this.dataList)
          this.total = data.total
          this.datetime = data.datetime
        })
      },
      drawLine() {
        this.$nextTick(() => {
          // this.getChartData();
          setTimeout(() => {
            console.log(' 挂载时调用数据', this.dataList)
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('myChart'))
            const option = {
              title: {
                text: this.msg,
                subtext: this.datetime,
                left: 'center'
              },
              tooltip: {
                trigger: 'item',
                // formatter: "{a} <br/>{b}: {c} ({d}%)",
                formatter: "{b} <br/> {c} ({d}%)",
              },
              // color: ['#409EFF', '#67C23A', '#E6A23C', '#f50', '#2db7f5', '#87d068'],
              legend: {
                bottom: 0,
                left: 'center',
                aling: 'auto',
                data: this.dataList.name,
                itemWidth: 15,
                itemHeight: 15,
              },

              series: [{
                name: '访问来源',
                type: 'pie',
                center: [150, 180],
                radius: ['40%', '70%'],
                tooltip: {
                  show: true
                },
                label: {
                  show: false,
                  position: 'center',
                  bottom: 0,
                  // 环形中间显示数值
                  // normal: {
                  //   position: 'center',
                  //   formatter: '{per|{c}}{b|个}\n{a|{b}}\n{hr|}',
                  //   rich: {
                  //     per: {
                  //       color: '#0abffd',
                  //       fontSize: 28,
                  //       lineHeight: 28,
                  //       align: 'center'
                  //     },
                  //     a: {
                  //       color: '#999999',
                  //       align: 'center',
                  //       fontSize: 12
                  //     },
                  //     b: {
                  //       color: '#0abffd',
                  //       fontSize: 12,
                  //       lineHeight: 40,
                  //       align: 'center'
                  //     },
                  //     hr: {
                  //       width: '100%',
                  //       height: 0,
                  //       alien: 'center'
                  //     }
                  //   }
                  // },

                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '16',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: function (params) {

                    var colorList = ['#2c3f58', '#4ed139', '#289cf4', '#fdca57', '#ff9e48', '#87d068']
                    return colorList[params.dataIndex];
                  }
                },
                data: this.dataList
              }]
            }
            // 绘制图表
            myChart.setOption(option);
          }, 200)
        })

      }
    }
  }

</script>

<style lang='scss' scoped>
  .Ratio-card {
    height: auto;

    .total {
      width: 100%;
      padding: 20px;
    }
  }

</style>

2.效果