Q1：数据更新时，整个图标都重新加载了，而没有动态过渡

echarts本身就有动态过渡的效果，如果数据改变了，只需要在setOption中从新配置变化的数据即可；

如果出现的是重新展示的效果，注意查看一下是否是哪里把图表卸载了，或者使用了重新加载的api，例如init；

Q2：图表位置无法紧贴画布边缘

echarts中可以通过grid设置图表具体画布的边距，注意是否设置时，没有将containLabel【grid 区域是否包含坐标轴的刻度标签】设置为true；

Q3：ECharts 绘图后没有图像

ECharts 绘图后没有任何报错，但是没有图像。先检查一下是否设置了容器的高宽， ECharts 是不会设置默认宽高的；
也可能在数据请求之前，就完成了初始化，所以图表其实是没有数据的；那么如果使用的是vue，可以利用watch

watch: {
      //观察option的变化
      option: {
        handler(newVal, oldVal) {
          if (this.myChart) {
            if (newVal) {
              this.myChart.setOption(newVal);
            } else {
              this.myChart.setOption(oldVal);
            }
          } else {
            this.getEchartData();
          }
        },
        deep: true //对象内部属性的监听，关键。
      }
    }

Q4：在低分辨率的电脑上使用时，出现文字和图表模糊的情况

可能的原因：canvas 在使用的时候给的 width 和 height 与实际展示出来的宽高比例不为 1:1，造成像素值的偏离

解决：在init图表的时候，增加null, {devicePixelRatio: 2}，即echarts.init(container, null, (devicePixelRatio: 2));

Q5：legend设置了data，但是没有展示

legend中标识名称要和 series 中 name 的值保持一致；

Q6：如果想要legend显示与series中显示不同，怎么实现

首先我们在legend.data中声明我们想要的图例名

legend:{
'data':[{name:'图例名1'},{name:'图例名2'},{name:'图例名3'}]
}

如果series中有我们声明的name，那么series中对应的数据就不用处理，但是如果没有声明的，需要在series中声明，但是不需要声明data属性

Q7：vue3中，页面使用keepalive进行了页面缓存，页面中使用echarts，并且设置了tooltip的confine为true,但是界面切出去再切换回来的时候，一开始tooltip还是超出了图表区域

原因分析：

在Vue 3中使用keep-alive进行页面缓存时，组件在切出去再切换回来时，会保持之前的状态。如果在之前的状态下tooltip超出了图表区域，可能是由于切换回来后，图表元素的尺寸信息还未更新，导致tooltip位置计算错误。

问题解决：

预期切换回页面时能够保持图表的数据和状态，而不是重新请求并渲染数据，可以尝试使用Vue的activated钩子函数来刷新echarts图表。

具体操作步骤如下：

在组件中引入echarts：

import * as echarts from 'echarts';

在组件中定义一个echarts实例的变量，用来保存图表实例：

data() {
  return {
    myChart: null
  };
},

在mounted钩子函数中初始化echarts实例，并保存到myChart变量中：

mounted() {
  const chartDom = document.getElementById('chart'); // 假设你的图表容器id为'chart'
  this.myChart = echarts.init(chartDom);
  this.initEcharts();
},

在activated钩子函数中，刷新echarts图表：

activated() {
  if (this.myChart) {
    // 刷新图表
    this.myChart.resize();
  }
},

通过调用echarts实例的resize方法，可以重新绘制图表，保持之前的数据和状态，并且适应新的尺寸。在activated钩子函数中调用resize方法，可以确保在切换回页面时图表能够正确地显示，并且不需要重新请求和渲染数据。
请确保图表容器id与代码中的一致，并且如果需要初始化echarts配置项，也可以在initEcharts方法中进行设置。

echarts遇到的问题总结~持续更新