vue echarts环形图

数据格式

[
    {"count": 96349,"name": "正面",
    },
    {"count": 142636,"name": "中性",
    },
    {"count": 40375,"name": "负面",
    }
]

 

<template>
  <div class="cloudOuter" v-loading="loading">
    <!--    <p v-if="!showEchart" class="no-data" style="text-align: center;position: absolute">暂无数据</p>-->
    <el-empty style="position: absolute;padding: 0px 0!important;width: 100%;" v-if="!showEchart" description="暂无数据"></el-empty>
    <div v-if="showEchart"  class="cloud e_charts" ref="cloud" @click="eConsole"></div>
  </div>
</template>

<script>
  import {debounce} from "@/utils/utils";

  export default {
    name: "annular",
    props:{
      dataList:Array,
      type:Number
    },
    data() {
      return {
        loading:false,
        data:[],
        showEchart:false,
        num:1,
        timers:[]
      }
    }, //图表实例
    watch:{
      async showEchart(newValue){
        this.showEchart = newValue
        if(newValue == true){
          await this.echartsInit()
        }
      },
      async dataList(newValue,oldValue){
        this.loading = true
        if(newValue.length != 0){
          this.data = []
          await this.echartsInit()
        }else{
          this.loading = false
        }
      }
    },
    destroyed(){
      // 这一步的目的是移除监听
      window.removeEventListener("resize",this.listener)
    },
    async mounted() {
      window.addEventListener('resize', this.listener)
      console.log('this.dataList49',this.dataList)
      if(this.dataList.length > 0){
        this.showEchart = true
      }
      try {
        // 在通过mounted调用即可
        await this.echartsInit()
      }catch (e) {
        console.log(e)
      }
    },
    methods: {
      // 防抖
      listener() {
        //逻辑代码
        if (this.$refs.cloud) {
          let chart = this.$echarts.init(this.$refs.cloud)
          chart.resize()
        }
      },
      echartsInit() {
        this.flag = true
        var timer = setInterval(() => {
          if(!this.flag){
            clearInterval(timer)
          }
          if(this.$refs.cloud && this.flag){
            this.flag = false
            clearInterval(timer)
            var data = [];
            let _this = this
            var color = ["#ffa47c", "#6da6f7", "#3ecb2b"];
            if(this.type === 2){
              color = ["#FF8529", "#017E03", "#D3333F"]
            }
            var legendData = [];
            console.log(this.dataList)
            this.dataList.map((m,i) => {
              legendData.push({
                name:m.name,
                value:m.count,
                itemStyle: {
                  color: color[i]
                }
              })
            })

            this.$echarts.init(this.$refs.cloud).setOption({
              roseType: "radius",
              tooltip: {
                trigger: "item",
                formatter: '{a} <br/>{b} : {c}' + "篇" + '({d}%)'
              },
              legend: {
                orient: "vertical",
                top: 0,
                left: 20,
                data: legendData,
              },
              series: [
                {
                  name: "情感属性",
                  type: "pie",
                  radius: ["40%", "55%"],
                  center: ["50%", "60%"],
                  data: legendData,
                  label: {
                    formatter: '{b}: {d}%'
                  },
                  roseType: false,
                }
              ]
            })
            this.loading = false
          }
        },50)

      },
      eConsole(e){
        console.log(e)
      }
    }
  }
</script>

<style scoped lang="scss">
  .cloudOuter{
    position: relative;
    height: 220px;
    width: 100%;
    .cloud{
      height: 220px;
    }
  }
</style>