vue中使用Echarts无法动态渲染

首先我们在main.js中引入了Echarts

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts;

initconechart () {
  this.conechart = this.$echarts.init(document.getElementById('conechart'));
  const option = {
    title: {
      text: '风险占比',
      // subtext: 'Fake Data',
      right: '20%',
      top: "20px",
      textStyle:{
        fontSize:30,
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        left:"30%",
        top:"20%",
        data: this.piedata,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  this.conechart.setOption(option)
  // this.conechart.clear()
  // this.conechart.setOption(option,true)
},

在页面上定义一个div同时选中，option中填写配置项，然后使用。 获取后台数据时，因为是异步调用，echarts同步优先渲染，所以导致echarts数据无法动态数据更新，只需要在异步获取数据时调用 initconechart 方法