ECharts官方并没有给出小程序的相关参考，但是有大神做出了ECharts-小程序版，可以直接引用。
效果图
引用步骤
1、下载文件
GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本
下载完成后，将 【ec-canvas】文件夹复制到自己小程序目录中，我这里复制到根目录做个示范。
2、配置page显示ECharts
以下代码直接复制粘贴即可使用，按需修改要变化的参数即可
pages/index/index.json
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
pages/index/index.wxml
pages/index/index.wxss
.container {
width: 100%;
}
.echarts {
width: 100%;
height: 500rpx;
}
.ec-canvas {
width: 100%;
height: 100%;
}
pages/index/index.js
// 1、引入脚本
import * as echarts from '../../ec-canvas/echarts';
Page({
data: {
ec: {
lazyLoad: true // 懒加载
}
},
//button绑定事件----动态修改表的内容,和初始化一样
change(){
let data = [2, 1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0];
this.initchart(data);
},
loadchart(data){
// 绑定组件（ec-canvas标签的id）
let ec_canvas = this.selectComponent('#myChart');
ec_canvas.init((canvas,width,height,dpr)=>{
const chart =echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 解决模糊显示的问题
})
// echart表格的内容配置
var myoption = {
title: {},
tooltip: {
trigger: 'axis'
},
legend: {},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} '
}
},
series: [
{
name: 'price',
type: 'line',
data: data, // 动态修改的数据
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
}
}
]
}
chart.setOption(myoption);
return chart;
})
},
initchart(data){
// 传递后台数据到图表中，进行懒加载图表
this.loadchart(data);
},
onLoad: function (options) {
//模拟后台数据初始化
let data = [1, 2, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0];
this.initchart(data);
},
})
精彩文章
发表评论