echarts图表自适应和其他问题

1.使用 eCharts 提供的 resize()方法，监听图表容器的大小并改变图表大小

javascript 复制代码

// 监听 resize 事件
window.addEventListener("resize", function () {
  this.chart.resize();
});

报错如下：
Uncaught TypeError: Cannot read properties of undefined (reading 'resize')

解决：

主要是 this 指向的问题，换成箭头函数即可解决：

javascript 复制代码

window.addEventListener("resize", () => {
  this.chart.resize();
});

报错二：
TypeError: Cannot read properties of undefined (reading 'getAttribute')

解决： 1.主要原因是离开当前页面没有清除自适应事件：

javascript 复制代码

destroyed () {
    window.removeEventListener('resize', this.chart)
},

2.如果清除自适应事件还是报错，原因就是 dom 元素没有准备完毕，echarts 渲染数据与 dom 元素异步问题

2.echarts 图表无数据时展示"暂无数据"

javascript 复制代码

<div id="test_chart" style="width: 600px;height:400px;"></div>;

let chartData = [5, 20, 36, 10, 10, 20];
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("test_chart"));
var option;
// 指定图表的配置项和数据
if (chartData.length == 0) {
  //暂无数据
  option = {
    title: {
      text: "暂无数据",
      x: "center",
      y: "center",
      textStyle: {
        fontSize: 14,
        fontWeight: "normal",
      },
    },
  };
} else {
  option = {
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    legend: {
      data: ["销量"],
    },
    xAxis: {
      data: ["衬衫", "羊毛衫"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: chartData, //动态数据
      },
    ],
  };
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

3.vue 使用 element-resize-detector 监听元素宽度变化来实现 echarts 的自适应

原文：vue使用element-resize-detector监听元素宽度变化来实现echarts的自适应_vue 项目echart 监听元素宽度变化自适应-CSDN博客

当我们切换左侧菜单展示效果的时候，右侧内容会对应变宽，但此时的 echarts 并不能执行自适应效果，这是因为切换菜单展示效果并没有触发 window.onresize，所以为解决类似此问题，我们可使用 element-resize-detector。

javascript 复制代码

npm install element-resize-detector --save

创建文件 chartResize.js

javascript 复制代码

import echarts from "echarts";
import Vue from "vue";
import elementResizeDetectorMaker from "element-resize-detector";

export var version = "0.0.1";
var compatible = /^2\./.test(Vue.version);
if (!compatible) {
  Vue.util.warn(
    "vue echarts resize directive " +
      version +
      " only supports Vue 2.x, and does not support Vue " +
      Vue.version
  );
}
let HANDLER = "_vue_echarts_resize_handler";

function bind(el) {
  unbind(el);
  el[HANDLER] = function () {
    let chart = echarts.getInstanceByDom(el);
    if (!chart) {
      return;
    }
    chart.resize();
  };
  //监听window窗体变化，更新echarts大小
  //window.addEventListener("resize", el[HANDLER])
  //监听绑定的div大小变化，更新echarts大小
  elementResizeDetectorMaker().listenTo(el, el[HANDLER]);
}
function unbind(el) {
  //window.removeEventListener("resize", el[HANDLER]);
  elementResizeDetectorMaker().removeListener(el, el[HANDLER]);
  delete el[HANDLER];
}
var directive = {
  bind: bind,
  unbind: unbind,
};
Vue.directive("on-echart-resize", directive);

在页面中使用

javascript 复制代码

<template>
  <div>
    <div id="contentShow" ref="lineChart" v-on-echart-resize></div>
  </div>
</template>
<script>
import "../../../utils/chartResize";
export default {
  data() {
    return {};
  },
  mounted() {
    const elementResizeDetectorMaker = require("element-resize-detector");
    let erd = elementResizeDetectorMaker();
    erd.listenTo(this.$refs.lineChart, () => {
      this.$nextTick(function () {
        const lineChart = this.$echarts.init(this.$refs.lineChart);
        //使echarts尺寸重置
        lineChart.resize();
      });
    });
  },
  methods: {},
};
</script>
<style scoped></style>

4.[ECharts] There is a chart instance already initialized on the dom.

原因：在同一个页面使用一个 echarts，重复创建

javascript 复制代码

let myChart: any;
// 获取dom
let main: any = document.getElementById("myChart");
// 获取 dom 容器上的实例。
let existInstance = echarts.getInstanceByDom(main);
// 判断是否有实例
if (existInstance) {
  if (true) {
    // 销毁
    echarts.dispose(existInstance);
  }
}
// 重新创建
myChart = echarts.init(main);