变更前.png

变更后.png

方法,使用ECharts自带API (resize)配合VUE自定义轮询命令
一、模板部分

<template>
  <div v-resize="resize">
    <!--创建一个echarts的容器-->
    <div ref="echartContainer" style="width:100%; height:300px"></div>
    <button @click="addValue()" style="margin-left:20px">点击增加综合室人数</button>
    <button @click="reduceValue()" style="margin-left:20px">点击减少综合室人数</button>
  </div>
</template>

二、JS部分

<script>
var echarts = require("echarts");
export default {
  data() {
    return {
      dataSoucre: {},
      departments: {},
      myChart: null,
      option: {
        backgroundColor: "#37404A",
        //提示框
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        //该项设置每区域饼图颜色
        color: [
          "#C1232B",
          "#B5C334",
          "#FCCE10",
          "#E87C25",
          "#27727B",
          "#FE8463",
          "#9BCA63",
          "#FAD860",
          "#F3A43B",
          "#60C0DD",
          "#D7504B",
          "#C6E579"
        ],

        //系列设置
        series: [
          {
            name: "user类别",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"], //默认全局居中
            data: [],
            roseType: "radius",

            label: {
              normal: {
                textStyle: {
                  color: "#AAB8C5"
                }
              }
            },
  
            labelLine: {
              normal: {
                lineStyle: {
                  color: "#AAB8C5"
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            },
       
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },

            animation: true,
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }
        ]
      }
    };
  },

//监听option,实现数据驱动图表
  watch: {
    option: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          this.option.series[0].animation = false;
          this.chartDraw();
        } else {
          this.myChart = echarts.init(this.$refs.echartContainer);
          this.chartDraw();
        }
      },
      deep: true
    }
  },

  methods: {
//初始化数据
    async loadData() {
      let self = this;
      this.$curl.get("/api/solidwaste/usermanager/getall").then(res => {
        let { users, departments } = res;
        self.dataSoucre = users;
        self.departments = departments;
        let list = [];
        self.departments.forEach(DPitem => {
          let count = 0;
          self.dataSoucre.forEach(DSitem => {
            if (DSitem.DPID == DPitem.DPID) {
              count++;
            }
          });
          let res = { value: count, name: DPitem.DPName };
          list.push(res);
        });
        self.option.series[0].data = list;
      });
    },
    addValue() {
      this.option.series[0].data[1].value += 1;
    },
    reduceValue() {
      this.option.series[0].data[1].value -= 1;
    },
//自适应封装
    resize() {
      const self = this;
      if (self.myChart) {
        let myChart = self.myChart;
        myChart.resize();
      }
    },

//根据窗口重绘图表
    chartDraw() {
      const self = this;
      let myChart = self.myChart;
      window.addEventListener("resize", function() {
        myChart.resize();
        console.log(self.container);
      });

      myChart.clear();
      myChart.setOption(self.option);
      myChart.setOption({
        series: [
          {
            animation: true
          }
        ]
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadData();
    });
  },
  destroyed() {
    window.removeEventListener("resize", function() {
      myChart.resize();
    });
  }
};
</script>

三、Vue自定义轮询命令v-resize

Vue.directive('resize', {
    bind(el, binding) {
        let width = '', height = '';
        function get() {
            const style = document.defaultView.getComputedStyle(el);
            if (width !== style.width || height !== style.height) {
                binding.value({ width, height });
            }
            width = style.width;
            height = style.height;
        }

        el.__vueReize__ = setInterval(get, 200);
    },
    unbind(el) {
        clearInterval(el.__vueReize__);
    },
});

希望对需要使用ECharts图表的同志有所帮助.
也希望各位大佬提出我的不足,感谢

转载请标明出处丿聆风丶