echarts性能优化

echarts数据量多的时候优化方案：
渲染的数据太多时，渲染的速度会变慢。

let data = [];

for (let i = 0; i < 100000; i++) {
  let style = {};
  if (i % 2 == 0) {
    style.color = "red";
  }
  data.push({
    value: i,
    itemStyle: style,
  });
}
myEcharts = init(canvas, null, {
    width: 500,
    height: 500,
    devicePixelRatio: window.devicePixelRatio,
    locale: "ZH",
  });
  options = {
    tooltip: {},

    xAxis: {
      type: "category",
      data: data.map((item) => item.data),
    },
    yAxis: {},

    series: [
      {
        type: "scatter",
        name: "line",
        data: data,
      },
    ],
  };

使用 large 优化

使用 large 优化后不能自定义设置单个数据项的样式。
largeThreshold 开启绘制优化的阈值

 series: [
      {
        large: true,
        largeThreshold: 2000, //在2000时开启优化
        type: "scatter",
        name: "line",
        data: data,
      },
    ],

使用渐进渲染 progressive

本身就开启着的，需要调节数值。
progressive ：每一帧绘制图形数量

 series: [
      {
        progressive: 5000,
        type: "scatter",
        name: "line",
        data: data,
      },
    ],

progressiveThreshold ：启用渐进式渲染的图形数量阈值
progressiveChunkMode： 分片的方式，渲染的模式。
1. ‘sequential’：按照数据的顺序分片。缺点是渲染过程不自然。
2. mod 取模分片，即每个片段中的点会遍布于整个数据，从而能够视觉上均匀得渲染

   
 series: [
   {
     progressive: 5000,
     progressiveChunkMode: "mod",
     type: "scatter",
     name: "line",
     data: data,
   },
 ],

使用 appendData

appendData() 添加完数据后，不会重新渲染，要想重新渲染可以调用.resize(),而setOption要整个重新渲染，resize不会整个重新渲染。

let data = [];
let data1 = [];
let now = 0;
let current = 0;
for (let i = 0; i < 100000; i++) {
  if (now < 5000) {
    data1.push({
      value: i,
    });
    now++;
  } else {
    data.push(data1);
    data1 = [];
    now = 0;
  }
}
 series: [
      {
        progressive: 5000,
        progressiveChunkMode: "mod",
        type: "scatter",
        name: "line",
        data: data[0],
      },
    ],
 myEcharts.on("finished", () => {
    current++;
    if (current < data.length) {
      myEcharts.appendData({
        seriesIndex: 0,
        data: data[current],
      });
      myEcharts.resize();
    }
  });