微信小程序使用echarts图表,与延迟加载图表,解决echarts文件过大
引入echarts组件
-
前往echarts微信版的github地址: https://github.com/ecomfe/echarts-for-weixin
-
拷贝 ec-canvas 目录到你的微信小程序中
-
在页面中使用
//json页面
{
"usingComponents": {
"ec-canvas": "../../components/ec-canvas/ec-canvas"
}
}
// js页面
import * as echarts from '../../ec-canvas/echarts';
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 像素
});
canvas.setChart(chart);
var option = {
...
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
}
}
});
这里注意要给ec-canvas设置一定的高度和宽度
// wxml页面
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
展示echarts图表数据
1.最基本的使用
前往echarts文档的地址: https://echarts.apache.org/examples/zh/index.html
找到你心仪的图表样式
然后复制option 的内容到自己项目代码的option中即可展示最基本的图表
延迟加载图表
无用代码删除后的精简版
import * as echarts from "../../components/ec-canvas/echarts";
function line_set(chart, data) {
//xdata, ydata分别表示x轴数据和y轴数据
var option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: data,
type: "line",
},
],
};
chart.setOption(option);
}
Page({
data: {
ec: {
lazyLoad: true, //延迟加载
},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.oneComponent = this.selectComponent("#mychart-dom-bar");
this.getOption();
// this.connectStart()
},
onReady: function () {},
init_chart: function (data) {
//初始化图表
this.oneComponent.init((canvas, width, height, dpr) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr, // new
});
line_set(chart, data);
// this.chart = chart;
// return chart;
});
},
//请求数据
getOption: function () {
// 获取数据填充进data中,具体依据实际填充
const data = [
[1, 2],
[2, 3],
[3, 4],
[4, 0.4],
];
this.init_chart(data);
},
});
如何解决echarts文件过大
1.引入echarts以后,单echarts代码包已经973KB,怎么样能缩小其体积呢?
2.使用自定义图表的方法 压缩文件大小。
(因为实际项目中可能用到的图表可能就一两个,不需要全部引进,所以可以根据实际项目情况选择用到的图表即可 )
echarts图表在线定制如下图所示: https://echarts.apache.org/zh/builder.html
3.将下载的echarts.min.js重命名为echarts.js替换项目ec-canvas目录下的echarts.js,将原本大小将近1000KB的echarts压缩了一半。