Vue + Echarts 图表展示 及 动态渲染

准备工作

安装echarts依赖

npm install echarts --save-dev

引入

(main.js)
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

开始撸代码

<template>
  <div class="peopleWrap">
    <h3>
      <i class="el-icon-position"></i>
      出入人员总数{{peopleSumTotal}}
    </h3>
    <div id="peopleSum" style="width: 180px;height: 270px"></div>
  </div>
</template>
<script>
export default {
// 接受父组件传来的参数【父传子props】
  props: ["peopleSumTotal"],  
  data() {
    return {
      peopleSumTotalArr: []
    };
  },
  watch: {
  // 监听参数变化
    peopleSumTotal: {
      handler(newVal, oldVal) {
        if (newVal != 0) {
          console.log(newVal);
          this.peopleSum(newVal);
        }
      }
    }
  },
  methods: {
    peopleSum(newVal) {
    // 引入 echarts
      var echarts = require("echarts");
      let peopleSum = echarts.init(document.getElementById("peopleSum"));
      //echsrts点击事件
      peopleSum.on("click", function(param) {
        console.log(param);
        console.log(param.data.name);
        console.log(param.data.value);
        console.log(param.data.userDefined);
        //$emit的第一个为传的参的名字，第二个为传的值 【子传父 this.$emit】
        _this.$emit("peopleSumtoparent", param.data);   
      });

//接受动态数据时需要在 this.$nextTick(()=>{})展示
      this.$nextTick(() => {
        let obj = {};
        obj.value = newVal;
        obj.name = newVal;
        this.peopleSumTotalArr.push(obj);

        let option = {
          legend: {
            orient: "vertical",
            left: 10,
            data: [""]
          },
          series: [
            {
              type: "pie",
              radius: ["50%", "70%"],
              avoidLabelOverlap: false,
              itemStyle: {
                // 普通样式。
                normal: {
                  // 点的颜色。
                  color: "#6998f7"
                },
                // 高亮样式。
                emphasis: {
                  // 高亮时点的颜色。
                  color: "#6998f7"
                }
              },
              label: {
                normal: {
                  show: true,
                  position: "center",
                  textStyle: {
                    fontSize: "20"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: this.peopleSumTotalArr  //动态图表展示
            }
          ]
        };
        console.log("option", option);
        peopleSum.setOption(option);
      });
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
</style>