微信小程序使用ECharts图表
1,引入ECharts组件
GitHab网址:https://github.com/apache/incubator-echarts
1),引入项目
将这个文件夹添加到微信小程序项目里
2),配置需要引入的页面
“.json” 文件配置组件路径
"usingComponents": {
"ec-canvas": "../../../component/ec-canvas/ec-canvas"
},
"navigationBarTitleText": "人体成分检测"
“.wxml”页面配置
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" bindmyevent="switchover" data-index="{{item}}"></ec-canvas>
“.js” 脚本
const echarts = require('../../../component/ec-canvas/echarts.js');
const api = require('../../../config/api.js');
const app = getApp();
function initChart(canvas, width, height) {
//获取动态显示数据
let list = wx.getStorageSync('exdataList');
let exdataList = [];
let fatPercentageList = [];
let bIMList = [];
let numList = [];
let a = 0;
for (let i = 0; i < list.length; i++) {
if (list[i].type == 8) {
a++;
exdataList.push(list[i])
let fatPercentage = JSON.parse(list[i].content).adiposerate
let bIM = JSON.parse(list[i].content).bmi
fatPercentageList.push(fatPercentage)
bIMList.push(bIM)
numList.push(a)
}
}
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
title: {
text: '人体成分检测',
left: 'left'
},
color: ["#5AC8FA", "#FF9500"],
legend: {
data: ['脂肪率', 'BMI'],
left: 'right',
backgroundColor: '#FFFFFF',
z: 100
},
grid: {
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: numList,
},
yAxis: {
x: 'center',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
series: [
{
name: '脂肪率',
type: 'line',
smooth: true,
data: fatPercentageList
},
{
name: 'BMI',
type: 'line',
smooth: true,
data: bIMList
}
]
};
chart.setOption(option);
//添加点击事件
chart.getZr().on('click', (params) => {
let pointInPixel = [params.offsetX, params.offsetY]
let pointInGrid = chart.convertFromPixel('grid', pointInPixel)
let xIndex = pointInGrid[0]
//为点击区域的数据集合的索引 可以利用该索引,实现点击切换显示数据的效果
app.globalData.dataIndex = xIndex
})
return chart;
}
注意 在当前页面的data中添加“ec”变量