ehcarts图表修改

ehcarts图表滑动条样式修改

 //echarts清空历史数据；
echart.setOption(option, true);   

// echarts图表自适应
  e_resize(echart){
    window.addEventListener("resize", function () {
      echart.resize();
    });

// 侧边栏收缩时echarts图表自适应
方法一：
html ==>  <div ref="echartLine" class="echart-line" v-resize="resize" />
export default {
directives: {
    // 使用局部注册指令的方式
    resize: {
      // 指令的名称
      bind(el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        let { width,height } = "";
        function isReize() {
          const style = document.defaultView.getComputedStyle(el);
          if (width !== style.width || height !== style.height) {
            binding.value(); // 关键
          }
          width = style.width;
          height = style.height;
        }
        el.__vueSetInterval__ = setInterval(isReize, 300);
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__);
      },
    },
  },
}
方法二：通过vuex给侧边栏添加状态监控变量，对其进行监听，发生改变时触发resize方法；
import { mapGetters } from "vuex";
computed: {
    ...mapGetters(["sidebar"]),
  },
watch:{
   sidebar: {
      handler() {
        setTimeout(() => {
          this.myChart.resize();
        }, 200);
      },
      deep: true,
    },