echarts性能优化

（1）使用Object.freeze()大幅提升性能

// ES5新增特性，冻结对象，阻止修改现有属性；
// 如果你有非常庞大的数组，确定不会修改他们，可以使用Object.freeze()大幅提升性能。
that.dataList = Object.freeze(data);

（2）large 和 largeThreshold

 charts.setOption({
  geo: [
    {
      map: "china-contour",
      zoom: 1.2, //当前视角的缩放比例
      zlevel: 0,
      center: [105, 36], // 调整地图位置
      label: {
        show: false,
      },
      silent: true,
      itemStyle: {
        areaColor: "rgba(0,0,0,0.45)",
        borderColor: "#2F5DBE", // 地图边框颜色
        borderWidth: 4,
        shadowColor: "rgba(46,255,243,0.6)",
        shadowBlur: 100,
      },
    },
    {
      map: "china",
      zoom: 1.2, //当前视角的缩放比例
      center: [105, 36], // 调整地图位置
      label: {
        show: true, // 省份名称展示
        textStyle: {
          color: "#AFB7C9", // 省份文字颜色
          fontSize: 10,
        },
      },
      // 高亮
      emphasis: {
        label: {
          show: true,
          textStyle: {
            color: "#AFB7C9", // 省份文字颜色
            fontSize: 10,
          },
        },
        itemStyle: {
          areaColor: "rgba(0,0,0,0.8)",
          borderColor: "#204CA3",
          borderWidth: 1,
          color: "rgba(0,0,0,0.5)",
        },
      },
      itemStyle: {
        areaColor: {},
        borderColor: "#204CA3", // 地图内边框颜色
        borderWidth: 1,
      },
    },
  ],
  series: [
    {
      type: "scatter",
      coordinateSystem: "geo",
      // 'lttb' 采用 Largest-Triangle-Three-Bucket 算法，可以最大程度保证采样后线条的趋势，形状和极值。
      // 'average' 取过滤点的平均值
      // 'max' 取过滤点的最大值
      // 'min' 取过滤点的最小值
      // 'sum' 取过滤点的和
      sampling: "lttb", // 数据量远大于像素点时候的降采样策略
      data: [],
      symbolSize: 1,
      large: true,
      // 大规模阀值，large为true且数据量>largeThreshold才启用大规模模式
      largeThreshold: 500,
    },
  ],
})

（3）appendData分片渲染，多次渲染不会覆盖之前的数据

charts.appendData({
  seriesIndex: 0,
  data: that.dataList,
});

（4）echarts实例的性能优化

• charts实例不要放在data里
• 切换页面销毁echarts实例

// 使用keepAlive
// 销毁时清除，释放内存
deactivated() {
  charts && charts.dispose();
}
​
// 未使用keepAlive
beforeDestroy() {
  charts && charts.dispose();
}

（5）使用visibilitychange来监听是否切换标签页进行清除和渲染的操作

如果浏览器打开了多个标签页，我们在切换其他标签页时候或者使浏览器缩在后台，长时间会使项目挂在后台会导致echarts内存不断增加，导致崩溃。

// 监听窗口变化
document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    // 隐藏
    // 清除示例
  } else {
    // 显示
    // 渲染
  }
});