echarts小程序指南

一、echarts小程序卡

當數據量非常大的時候，echarts小程序體驗可能會變得卡頓，這可能是因為高頻次的渲染導致的。可以通過以下方式優化：

1、開啟防抖。設置一個時間間隔，在此時間內不論有多少次渲染操作，都只會渲染一次。

2、分批渲染。將所有數據平均分配給若干個小區間，每個區間內的數據合法性均落在一定範圍內。通過分批渲染，能夠減小單個渲染操作的數據量，從而達到優化渲染卡頓問題的效果。

3、只渲染視口內數據。可以通過確定當前顯示區域，僅顯示視口內的數據，對非視口內的數據進行緩存。當滾動視口時，只渲染可視的緩存即可。

// 開啟防抖
chart.on('finished', () => {
  clearTimeout(timer);
  timer = null;
});

timer = setTimeout(() => {
  chart.render();
}, 300);

// 分批渲染
const stepSize = 5000;
const dataSize = data.length;

for (let i = 0; i  {
  chart.getDom().querySelector('.chart-content-wrap').addEventListener('scroll', () => {
    // 計算當前可視區域數據範圍
    const startIndex = Math.floor(chart.getCurrentVisibleRange().start / 2);
    const endIndex = Math.ceil(chart.getCurrentVisibleRange().end / 2);

    // 渲染當前可視區域數據
    chart.setOption({
      xAxis: {
        data: arr.slice(startIndex, endIndex)
      },
      series: [{
        data: data.slice(startIndex, endIndex)
      }]
    });
  });
});

二、echarts排序

我們可能需要讓echarts自動按照某個字段對數據進行排序。echarts封裝了一些排序方法，可以輕易地進行排序。

1、升序排序。通過使用echarts.util.ascSort方法，可以很方便地進行升序排序。例如，對於一個存有多個數據對象的數組arr，若我們需要按照數值屬性n進行升序排序，則可以這樣做：

const arr = [{name: 'A', n: 10}, {name: 'B', n: 5}, {name: 'C', n: 15}];

chart.setOption({
  series: [{
    data: arr.sort(echarts.util.ascSort('n'))
  }]
});

2、降序排序。與升序排序類似，通過使用echarts.util.descSort方法，可以很方便地進行降序排序。例如，對於一個存有多個數據對象的數組arr，若我們需要按照數值屬性n進行降序排序，則可以這樣做：

const arr = [{name: 'A', n: 10}, {name: 'B', n: 5}, {name: 'C', n: 15}];

chart.setOption({
  series: [{
    data: arr.sort(echarts.util.descSort('n'))
  }]
});

三、echarts小程序包太大

在一些小程序中，我們可能遇到echarts小程序包太大的問題。這個問題可以通過以下兩種方式解決：

1、只引入需要用到的echarts模塊。通過使用component/index.json文件，我們可以只引入我們需要用到的echarts模塊，從而減小小程序包的大小。

2、使用懶加載。通過使用懶加載，可以將echarts的引入放到需要用到echarts的頁面中去。這能夠加快小程序啟動速度，並減小小程序包的大小。

// 只引入需要用到的echarts模塊
{
  "component": true,
  "usingComponents": {
    "ec-canvas": "/components/ec-canvas/ec-canvas"
  },
  "usingPlugins": {
    "echarts": {
      "version": "5.1.1",
      "provider": "wx://form-field"
    }
  }
}

// 使用懶加載
import { createScopedThreejs } from 'threejs-miniprogram';

createScopedThreejs('my-canvas', 'sphere', {
  data: {},
  onLoad() {
    this.initCanvas();
  },
  initCanvas() {
    // echarts初始化代碼
  }
});

四、echarts小程序支持放大縮小

在echarts小程序中，我們可以使用縮放效果將圖表內容放大或縮小。

1、添加縮放功能。可以通過將toolbox.feature.zoom設置為true，來開啟縮放功能。

2、禁用縮放功能。通過將toolbox.feature.zoom設置為false，來禁用縮放功能。

// 添加縮放功能
option = {
  toolbox: {
    feature: {
      zoom: true
    }
  },
  xAxis: {},
  yAxis: {},
  series: [{
    type: 'line',
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
  }]
};

// 禁用縮放功能
option = {
  toolbox: {
    feature: {
      zoom: false
    }
  },
  xAxis: {},
  yAxis: {},
  series: [{
    type: 'line',
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
  }]
};

五、echarts小程序亂碼

在處理帶中文的echarts圖表時，可能出現亂碼的情況。這個問題可以通過以下方式解決：

1、使用Unicode編碼代替中文。將中文轉換為Unicode編碼，避免中文字符被亂碼。例如，”\u6211\u7231\u4e2d\u56fd” 表示 “我愛中國”。

2、在小程序組件中指定字體。通過在小程序組件中使用font-family，來指定字體。例如，以下代碼指定了‘Microsoft YaHei’字體：

.chart1 {
  width: 100%;
  height: 300px;
  font-family: 'Microsoft YaHei';
}

option = {
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {},
  series: [{
    name: '銷量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20, 5]
  }]
};

六、echarts餅圖

echarts小程序支持餅圖形式的數據展示，可以使用以下代碼編寫餅圖：

option = {
  series: [{
    name: '餅圖數據',
    type: 'pie',
    data: [
      {value: 1000, name: 'A'},
      {value: 2000, name: 'B'},
      {value: 3000, name: 'C'},
      {value: 4000, name: 'D'},
    ],
  }]
};

七、echarts小程序版

echarts小程序版是一款適用於小程序的輕量級echarts版本，在保持echarts功能的同時，更加輕量化、快速響應。

1、安裝echarts小程序版。可以通過npm安裝echarts小程序版，具體安裝方式如下:

npm install echarts --save
或者
npm install echarts-for-weixin --save

2、在小程序頁面中使用echarts小程序版。可以通過在小程序頁面中引入echarts-for-weixin.min.js，來在小程序中使用echarts小程序版。例如，以下代碼使用了echarts-for-weixin.min.js：

import * as echarts from '../ec-canvas/echarts-for-weixin.min.js';

Page({
  data: {
    echartsData: {}
  },

  onLoad: function () {
    this.ecComponent = this.selectComponent('#mychart');
    this.initEcharts();
  },

  initEcharts: function () {
    this.ecComponent.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      
      chart.setOption(options);
      return chart;
    });
  }
});

八、小程序echarts 事件

echarts小程序支持綁定事件，方便開發者對用戶的操作進行響應。以下是一些常見的事件。

1、點擊事件。可以通過在series中添加點擊事件方法，來響應鼠標單擊的事件。例如，點擊事件代碼如下：

option = {
  series: [{
    data: data,
    type: 'bar',
    label: {
      show: true,
      position: 'top'
    },
    itemStyle: {
      color: '#FFAF4B'
    },
    emphasis: {
      itemStyle: {
        color: '#FFD42B'
      }
    },
    onClick: function (params) {
      console.log(params.data);
    }
  }]
};

2、鼠標移入移出事件。可以通過在series中添加鼠標移入/移出事件方法，來響應鼠標移入/移出的事件。例如，鼠標移入/移出事件代碼如下：

option = {
  series: [{
    data: data,
    type: 'line',
    label: {
      show: true,
      position: 'top'
    },
    lineStyle: {
      color: '#FFAF4B',
      width: 3
    },
    itemStyle: {
      color: '#FFAF4B',
      borderWidth: 2
    },
    emphasis: {
      itemStyle: {
        color: '#FFD42B'
      }
    },
    onmouseover: function (params) {
      console.log('mouseover: ', params.data);
    },
    onmouseout: function (params) {
      console.log('mouseout: ', params.data);
    }
  }]
};

九、小程序echarts權重過高

如果echarts小程序在小程序開發中的權重過高，可以使用以下方式解決：

1、分離組件。可以將繪圖組件與頁面分離，以降低echarts對小程序的佔用。例如，以下代碼通過分離組件來使用echarts：

// 第一步：封裝組件，提供setData和initData兩個方法
Component({
  properties: {
    options: {
      type: Object,
      value: {},
      observer: function (newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          this.setData({
            ec: {
              onInit: this.initData.bind(this, newVal),
              lazyLoad: false
            }
          });
        }
      }
    }
  },

  data: {
    ec: {}
  },

  methods: {
    initData: function (options, canvas, width, height) {
      const ctx = wx.createCanvasContext(canvas);
      echarts.setCanvasCreator(() => {
        return ctx;
      });
      
      const chart = echarts.init(canvas, null, { width, height });
      chart.setOption(options);
      return chart;
    }
  }
});

// 第二步：使用封裝好的組件

2、減少樣式文件的權重。減小樣式文件對小程序的佔用也能有效減小echarts對小程序的佔用。例如，可以移除無用樣式，壓縮css代碼等方式進行優化。

3、限制數據量。減少echarts小程序渲染數據的