Vue+Echarts动态数据赋值

最近，在写公司大屏可视化项目，可视化与大屏 结合最好的就是echarts 了。

在Echarts的时候，数据不会始终是静态的，要结合实际项目出发，将动态数据 渲染到 图标上去。

在 使用 Vue + Echarts 动态赋值时，遇到点小坑，数据渲染不上去，找了半天找到一个解决办法。

如有更好的办法，可以下面留言或者发我邮箱 [e-mail]

解决思路

• 先绑定Echarts 视图id

• 然后进行 接口数据请求

• 将 Echarts 配置项 option放到接口请求成功里，然后就可以 动态赋值了

完整代码

// 1. 绑定视图id
let bing = this.$echarts.init(document.getElementById("bing"));


//2. 接口数据请求
      this.$api
        .getAllInfo({
         	params
        })
        .then(res => {
          if (res.status == 200) {
            this.interfaceInfo = res.data;
            console.log(this.interfaceInfo);

			// 将option 放置到请求中
            let option = {
              tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              series: [
                {
                  name: "访问来源",
                  type: "pie",
                  center: ["50%", "50%"],
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                    position: "center"
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: "30",
                      fontWeight: "bold"
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: [
                    {
                    // 动态绑定值
                      value: this.interfaceInfo.greenSiteNum,
                      name: "正常",
                      // 配置映射图显示颜色
                      itemStyle: {
                        // 设置扇形的颜色
                        color: "#006600",
                        shadowBlur: 200,
                        shadowColor: "rgba(0, 0, 0, 0.5)"
                      }
                    },
                    {
                      value: this.interfaceInfo.yellowSiteNum,
                      name: "黄色预警",
                      itemStyle: {
                        // 设置扇形的颜色
                        color: "#FFDC00",
                        shadowBlur: 200,
                        shadowColor: "rgba(0, 0, 0, 0.5)"
                      }
                    },
                    {
                      value: this.interfaceInfo.redSiteNum,
                      name: "红色预警",
                      itemStyle: {
                        // 设置扇形的颜色
                        color: "#CC3300",
                        shadowBlur: 200,
                        shadowColor: "rgba(0, 0, 0, 0.5)"
                      }
                    },
                    {
                      value: this.orangeWaring,
                      name: "橙色预警",
                      itemStyle: {
                        // 设置扇形的颜色
                        color: "orange",
                        shadowBlur: 200,
                        shadowColor: "rgba(0, 0, 0, 0.5)"
                      }
                    }
                  ]
                }
              ]
            };
			//将 option 绑定到 视图id 中
            bing.setOption(option);
          }
        });

效果图