使用vue-echarts异步数据加载，不能重新渲染页面问题。

一、问题说明

我是用的是官方示例中的这个饼状图。

结果在应用到项目中后发现利用axios请求到的数据无法渲染到页面中去。
并且其中value值已经改变。

二、解决办法

用$set改变value的值，并且重新绘制一遍表格。
$set是全局 Vue.set 的别名。

$set用法：

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)

注意：对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

解决后代码：

<template>
  <div style="width:100%" >
    <div style="width: 100%;height: 500px;background:#fff;" id="echartss"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import { getUserDistribution } from "@/api/axios";
export default {
  //先要导入依赖的实例

  //挂载前初始化echarts实例
  mounted: function() {
  
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById("echartss"));
    // 绘制图表，this.echarts1_option是数据
    this.myChart.setOption(this.echarts1_option);
  },
  async created() {
    var a = await getUserDistribution();
    //改变value的值
    this.$set(this.echarts1_option.series[0].data[0],"value",a.user_city.beijing)
    this.$set(this.echarts1_option.series[0].data[1],"value",a.user_city.shanghai)
    this.$set(this.echarts1_option.series[0].data[2],"value",a.user_city.shenzhen)
    this.$set(this.echarts1_option.series[0].data[3],"value",a.user_city.hangzhou)
    this.$set(this.echarts1_option.series[0].data[4],"value",a.user_city.qita)
   //重新绘制图表
    this.myChart.setOption(this.echarts1_option);
  },
  

  data() {
   
    return {
      myChart: null,
      echarts1_option: {
        title: {
          text: "用户分布",
          //   subtext: "纯属虚构",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["北京", "上海", "深圳", "杭州", "其他"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "45%"],
            data: [
              { value: 730, name: "北京" },
              { value: 296, name: "上海" },
              { value: 324, name: "深圳" },
              { value: 175, name: "杭州" },
              { value: 2126, name: "其他" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };
  }
};
</script>

axios.js

import axios from "axios";

axios.defaults.baseURL = "https://elm.cangdu.org/";

axios.interceptors.response.use(function (response) {
  return response.data;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export function getUserDistribution() {
  return axios.get("v1/user/city/count")
}