本文介绍在微信小程序中使用ECharts插件实现左右双Y轴折线图的方法。通过引入ec-canvas组件，配置JSON、WXML及JS文件，并结合wx.request获取后端数据，完成图表初始化与动态渲染。
微信小程序集成ECharts实现双Y轴动态折线图
在微信小程序中集成ECharts库，旨在实现具备左右双Y轴功能的折线图，并支持从后端动态获取数据以生成图表展示。
此前尝试使用wxcharts库，但因其不支持左右双Y轴的显示效果，故决定改用ECharts插件来实现该需求。
完成此功能需遵循以下步骤：
首先，从GitHub下载ECharts微信小程序插件，并将其集成至项目中。
具体操作为将名为ec-canvas的文件夹复制并放置到项目目录中。
目录结构应包含该文件夹，具体布局参考下图所示。
其次，需编写小程序相关的四个核心文件以完成配置与逻辑开发。
第一步，配置JSON文件。
echart.json
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}第二步，编写WXML文件。
<!--echart.wxml-->
<view class="container">
<ec-canvas id="myechart" canvas-id="graph" ec="{{ ec }}"></ec-canvas>
</view>第三步，编写WXSS样式文件。
echart.wxss
.container{
margin: 0;
padding: 0
}第四步，编写JS逻辑文件，其中包含echart.js模块。
在echart.js中，需按顺序执行以下操作：
具体实施分为三个部分：
第一部分，导入echarts插件模块。
import * as echarts from '../../ec-canvas/echarts';第二部分，定义在Page外部调用的辅助方法。
function echart(chart, leftData, rightData) {//leftData是坐标系左边y轴，rightData是右边y轴
var option = {
//网格
grid: {
bottom: 80,
show: true,
// containLabel: true
},
//图例
legend: {
data: [{
name: 'leftData',
textStyle: { //设置颜色
color: '#6076FF',
fontSize: '14',
}
},
{
name: 'rightData',
textStyle: {
color: '#FFC560',
fontSize: '14',
}
}
],
x: 'left',
bottom: 15,
left: 30
},
//x轴
xAxis: {
type: 'category',
boundaryGap: false,
disableGrid: true, //绘制X网格
data: ['', '', '', '', '', '', '', '', ''],
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['#DDDDDD']
}
},
//去掉刻度
axisTick: {
show: false
},
//去掉x轴线
axisLine: {
show: false
},
},
//y轴
yAxis: [{
name: 'mph',
type: 'value',
min: 0,
// max: 40,
//y标轴名称的文字样式
nameTextStyle: {
color: '#FFC560'
},
//网格线
splitLine: {
show: true,
lineStyle: {
color: ['#DDDDDD']
}
},
//去掉刻度
axisTick: {
show: false
},
//去掉y轴线
axisLine: {
show: false
},
},
{
name: 'g',
type: 'value',
// max: 4,
min: 0,
nameTextStyle: {
color: '#6076FF'
},
//去掉刻度
axisTick: {
show: false
},
//去掉y轴线
axisLine: {
show: false
},
}
],
series: [{
name: 'leftData',
type: 'line',
animation: true, //动画效果
symbol: 'none',
//折线区域
areaStyle: {
//渐变颜色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#6076FF' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(96,118,255,0.1)' // 100% 处的颜色
}],
global: false, // 缺省为 false
},
},
//折线宽度
lineStyle: {
width: 2
},
color: '#6076FF',
data: leftData // 后台传过来的动态数据
//设置固定的数据
// data: [
// 23, 30, 20, 23, 30, 26, 20, 25, 25
// ]
},
{
name: 'rightData',
type: 'line',
yAxisIndex: 1,
animation: true,
symbol: 'none',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#FFC560' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(255, 197, 96,0.3)' // 100% 处的颜色
}],
global: false, // 缺省为 false
},
},
lineStyle: {
width: 2
},
color: '#FFC560',
data: rightData,//后台传过来的动态数据
//设置固定的数据
// data: [
// 2, 1, 0.5, 0.9, 2, 1.0, 0.6, 2, 0.5
// ]
}]
}
}第三部分，在Page内部定义方法，涵盖onLoad生命周期及初始化逻辑。
/**
* 页面的初始数据
*/
data: {
ec: {
lazyLoad: true //初始化加载
}
},
onLoad: function (options) {
let that = this;
this.oneComponent = this.selectComponent('#mychart');
let url = "xxxxx";
let params = {
"openId": options.id,
};
wx.request({
url: "xxxx",
method: 'POST'
data: params,
header: header,
success: (res) => {
that.setData({
leftData: xxx,//从后台获取的数据
rightData: xxxx //从后台获取的数据
});
},
//给图表加上数据
that.initGraph(that.data.leftData, that.data.rightData)
})
}执行图表初始化流程。
initGraph: function (leftData, rightData) {
this.oneComponent.init((canvas, width, height) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
initChart(chart, leftData, rightData);
this.chart = chart;
return chart;
});
}以上内容为本文核心要点，希望对读者学习有所帮助，欢迎持续关注本站获取更多技术分享。