微信小程序使用echarts，實現(xiàn)左右雙Y軸祠挫，動態(tài)獲取數(shù)據(jù)那槽，生成折線圖
本來使用的是wxcharts，但發(fā)現(xiàn)實現(xiàn)不了左右雙y軸的效果等舔，就換成echarts
效果圖展示
要實現(xiàn)這樣的效果骚灸，需要以下幾步：
（1）去github下載插件，放進自己的項目里
吶慌植，鏈接 ===>點擊這里
只需要將名稱是ec-canvas的文件夾放進自己項目里甚牲。
像這樣：
圖片發(fā)自簡書App
（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 = {
//網(wǎng)格
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網(wǎng)格
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'
},
//網(wǎng)格線
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',
//折線區(qū)域
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 // 后臺傳過來的動態(tài)數(shù)據(jù)
//設置固定的數(shù)據(jù)
// 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,//后臺傳過來的動態(tài)數(shù)據(jù)
//設置固定的數(shù)據(jù)
// data: [
// 2, 1, 0.5, 0.9, 2, 1.0, 0.6, 2, 0.5
// ]
}]
}
}
第三步：寫在Page里的方法，（包括onLoad(),初始化）
/**
* 頁面的初始數(shù)據(jù)
*/
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,//從后臺獲取的數(shù)據(jù)
rightData: xxxx //從后臺獲取的數(shù)據(jù)
});
},
//給圖表加上數(shù)據(jù)
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;
});
}
到這就搞定啦
