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

Vue.js 专栏收录该内容
17 篇文章 0 订阅

一、问题说明

我是用的是官方示例中的这个饼状图。
在这里插入图片描述
结果在应用到项目中后发现利用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")
}
  • 0
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值