您的位置：首页 > 移动开发 > 微信开发

微信小程序使用echarts获取数据并生成折线图

2019-10-16 18:07 2576 查看

微信小程序使用echarts，实现左右双Y轴，动态获取数据，生成折线图

本来使用的是wxcharts，但发现实现不了左右双y轴的效果，就换成echarts

要实现这样的效果，需要以下几步：

（1）去github下载插件，放进自己的项目里

只需要将名称是ec-canvas的文件夹放进自己项目里。

像这样：

（2）分别写小程序的四个文件

①

echart.json
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}

②

<!--echart.wxml-->
<view class="container">
<ec-canvas id="myechart" canvas-id="graph" ec="{{ ec }}"></ec-canvas>
</view>

③

echart.wxss
.container{
margin: 0;
padding: 0
}

④

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;
});
}

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 微信小程序 echarts 获取数据折线图

相关文章推荐

新的分享

章节导航