echars使用时，遇到的问题

目录

一、从后台获取数据后，出现echars图重复显示的问题

二、一个页面画多个echarts图形,resize失效

三、使用echars画多个图时出现因为echars缓存导致图像滞留问题

四、由于echars缓存导致，数据混乱的问题（echarts 数据重新加载,原数据依然存在图表上）

五、echarts 渲染出的图表和文字模糊问题

---

一、从后台获取数据后，出现echars图重复显示的问题

解决：

1）在请求的时候先把接收数据的变量清空

2）调用从自己封装的画图的方法时，最好采用传参的方式

3）Echarts标签过长省略-鼠标经过显示完整https://blog.csdn.net/csm17805987903/article/details/85111595

4）页面画多个echars图，接入后端数据，数据无法显示问题

解决：接入后端接口时，使用同步。否则会由于异步加载问题导致echars数据无法正常显示 

二、一个页面画多个echarts图形,resize失效

 

如上图所写会出现当一个页面有多个echars图时，resize方法失效，

解决方法：将上述代码改为

window.addEventListener("resize", function () {
     myChart.resize();
 });

三、使用echars画多个图时出现因为echars缓存导致图像滞留问题

问题描述：

1）要求：点击如图统计出现echars图表，点击报表出现表格。但是在我由统计切换到报表时出现如图现象

解决：和上边解决echars重复一样，在切换的时候将echars中的数据都清空

 watch: {
    isWho: {
      handler: function(newName, oldName) {
        this.value2 = ""
        this.timeState = "1"
        this.activeName = "first"
        if (newName) {
          const _this = this;
          // 不加定时器，那些元素没来的及渲染，画echars时会报错
          setTimeout(function() {
            _this.getConn(_this.timeState);
          }, 500);
        } else {
          this.value2 = ""
          this.timeState = "1"
          this.activeName = "first"
          this.newSecArray = [];
          this.securityTDataX = [];
          this.securityTDataY = [];
          this.qualityTDataX = [];
          this.qualityTDataY = [];
          this.typePieData = [];
          this.handelData = [];
          this.getTable(this.timeState, this.pageNum, this.pageSize);
        }
      }
      // immediate: true
    },
    timeState: {
      // immediate: true,
      handler: function(newVal) {
        const _this = this;
        _this.value2 = "";
        if (this.isWho) {
          _this.getConn(newVal);
        } else {
          _this.getTable(newVal, _this.pageNum, _this.pageSize);
        }
      }
    }
  },

四、由于echars缓存导致，数据混乱的问题（echarts 数据重新加载,原数据依然存在图表上）

问题描述：要求对后台给出的数据进行筛选，如果数量都为0怎展示暂无数据，如果有不为0的显示数据。这是如果不做处理，会导致在请求参数发生变化时由于echars缓存导致数据显示混乱

解决：使用echars的clear()方法，并且设置:myChart.setOption(option,true); // 加上true表示不合并配置

五、echarts 渲染出的图表和文字模糊问题

1、使用svg渲染，svg渲染出的图表的清晰度高于canvas

let myChart = echarts.init(document.getElementById('chart'), null, {renderer: 'svg'});

2、仍然使用canvas渲染，通过调整devicePixelRatio提升清晰度

let myChart = echarts.init(document.getElementById('chart'), null, {devicePixelRatio: 2.5});