一、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小程序渲染數據的
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/230212.html
微信掃一掃 
支付寶掃一掃 