一、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/n/230212.html
微信扫一扫 
支付宝扫一扫 