微信小程序中--使用ECharts实现多个图表展示
2021-08-10 本文已影响0人
zZ_d205
原文地址：https://blog.csdn.net/weixin_44531304/article/details/89024265
在一个页面显示多个图表
–wxml–
<view class='table_container'>
<view class="container1">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec1 }}"></ec-canvas>
</view>
<view class="container1">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec2 }}"></ec-canvas>
</view>
<view class="container1">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec3 }}"></ec-canvas>
</view>
<view class="container1">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec4 }}"></ec-canvas>
</view>
<view class="container1">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec5 }}"></ec-canvas>
</view>
<view class="container1">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec6 }}"></ec-canvas>
</view>
<view class="container1">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec7 }}"></ec-canvas>
</view>
<view class="container1">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec8 }}"></ec-canvas>
</view>
<view class="container1">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec9 }}"></ec-canvas>
</view>
</view>
–js–
const App = getApp();
import * as echarts from '../../ec-canvas/echarts'; //引入echarts.js
var barec1 = null
var barec2 = null
var barec3 = null
var barec4 = null
var barec5 = null
var barec6 = null
var barec7 = null
var barec8 = null
var barec9 = null
Page({
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦！',
path: '/pages/index/index',
success: function () { },
fail: function () { }
}
},
data: {
ec1: {
onInit: function (canvas, width, height) {
barec1 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec1);
return barec1;
}
},
ec2: {
onInit: function (canvas, width, height) {
barec2 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec2);
return barec2;
}
},
ec3: {
onInit: function (canvas, width, height) {
barec3 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec3);
return barec3;
}
},
ec4: {
onInit: function (canvas, width, height) {
barec4 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec4);
return barec4;
}
},
ec5: {
onInit: function (canvas, width, height) {
barec5 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec5);
return barec5;
}
},
ec6: {
onInit: function (canvas, width, height) {
barec6 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec6);
return barec6;
}
},
ec7: {
onInit: function (canvas, width, height) {
barec7 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec7);
return barec7;
}
},
ec8: {
onInit: function (canvas, width, height) {
barec8 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec8);
return barec8;
}
},
ec9: {
onInit: function (canvas, width, height) {
barec9 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec9);
return barec9;
}
},
},
onReady() {
},
onShareAppMessage: function () {
},
bindViewTab: function () {
wx.navigateBack({ //返回上一页面或多级页面
delta: 1
})
},
onLoad: function (options) {
this.setData({
navH: App.globalData.navHeight
})
},
onReady() {
setTimeout(this.getData, 500);
},
//getData方法里发送ajax
getData() {
wx.showLoading({
title: '加载中...',
})
wx.request({
url: 'http://health.ia.ac.cn:5007/checklistBicycleData/getChecklistBicycleDataByListId?listId=13985',
header: {
"content-type": "json"
},
success: function (res) {
console.log(res);
barec1.setOption({
color: [
'blue', 'red'
],
legend: {
y: 'top',
data: ['VCO2,L/min', 'VO2,L/min'],
textStyle: {
color: 'black',
fontSize: 16
}
},
xAxis: [
{
type: 'value',
scale: true,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
scale: true,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
series: [
{
name: 'VCO2,L/min',
symbolSize: 25,
color: 'blue',
data: res.data.data.item1[0],
type: 'scatter',
},
{
name: 'VO2,L/min',
symbolSize: 25,
color: 'red',
data: res.data.data.item1[1],
type: 'scatter',
}
],
})
barec2.setOption({
color: [
'#901818', '#F018FF', '#8A2BE2', '#181818'
],
legend: {
y: 'top',
data: ['HR,bpm', 'SAP,mmHg', 'DAP,mmHg', 'RPP,1/1000'],
textStyle: {
color: 'black',
fontSize: 16
}
},
xAxis: [
{
type: 'value',
scale: true,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
scale: true,
min: 0,
max: 150,
interval: 30,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
},
{
type: 'value',
scale: true,
min: 0,
max: 18,
interval: 3,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
series: [
{
name: 'HR,bpm',
symbolSize: 25,
color: '#901818',
data: res.data.data.item2[0],
type: 'scatter',
},
{
name: 'SAP,mmHg',
symbolSize: 25,
color: '#F018FF',
data: res.data.data.item2[1],
type: 'scatter',
},
{
name: 'DAP,mmHg',
symbolSize: 25,
color: '#8A2BE2',
data: res.data.data.item2[2],
type: 'scatter',
},
{
name: 'RPP,1/1000',
symbolSize: 25,
color: '#181818',
yAxisIndex: 1,
data: res.data.data.item2[3],
type: 'scatter',
}
],
})
barec3.setOption({
color: [
'#00FF00', '#181890',
],
legend: {
y: 'top',
data: ['VE,L/min', 'RER'],
textStyle: {
color: 'black',
fontSize: 16
}
},
xAxis: [
{
type: 'value',
scale: true,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
scale: true,
min: 0,
max: 50,
interval: 10,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
},
{
type: 'value',
scale: true,
min: 0,
max: 1.4,
interval: 0.2,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
series: [
{
name: 'VE,L/min',
symbolSize: 25,
color: '#00FF00',
data: res.data.data.item3[0],
type: 'scatter',
},
{
name: 'RER',
symbolSize: 25,
color: '#181890',
yAxisIndex: 1,
data: res.data.data.item3[1],
type: 'scatter',
},
],
})
barec4.setOption({
color: [
'blue', 'red',
],
legend: {
y: 'top',
data: ['VE/VCO2', 'VO2/VE(OUE,ml/L)'],
textStyle: {
color: 'black',
fontSize: 16
}
},
xAxis: [
{
type: 'value',
scale: true,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
scale: true,
min: 0,
max: 50,
interval: 10,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
},
{
type: 'value',
scale: true,
min: 21,
max: 36,
interval: 3,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
series: [
{
name: 'VE/VCO2',
symbolSize: 25,
color: 'blue',
data: res.data.data.item4[0],
type: 'scatter',
},
{
name: 'VO2/VE(OUE,ml/L)',
symbolSize: 25,
color: 'red',
yAxisIndex: 1,
data: res.data.data.item4[1],
type: 'scatter',
},
],
})
barec5.setOption({
color: [
'#00FF00', '#181818', 'red'
],
legend: {
y: 'top',
data: ['ST-S(V5),mm/s', 'ST-L(V5),mm', 'VO2/HR,ml.beat-1'],
textStyle: {
color: 'black',
fontSize: 16
}
},
xAxis: [
{
type: 'value',
scale: true,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
scale: true,
min: 0,
max: 8,
interval: 1,
nameTextStyle: {
// color: '#fff',
fontSize: 14
},
splitLine: {
show: false
}
},
{
type: 'value',
scale: true,
min: -3,
max: 1,
interval: 0.5,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
series: [
{
name: 'ST-S(V5),mm/s',
symbolSize: 25,
color: '#00FF00',
yAxisIndex: 1,
data: res.data.data.item5[0],
type: 'scatter',
},
{
name: 'ST-L(V5),mm',
symbolSize: 25,
color: '#181818',
yAxisIndex: 1,
data: res.data.data.item5[1],
type: 'scatter',
},
{
name: 'VO2/HR,ml.beat-1',
symbolSize: 25,
color: 'red',
data: res.data.data.item5[2],
type: 'scatter',
},
],
})
barec6.setOption({
color: [
'#30FFFF', '#FFFF18',
],
legend: {
y: 'top',
data: ['VT,L', 'f,bpm'],
textStyle: {
color: 'black',
fontSize: 16
}
},
xAxis: [
{
type: 'value',
scale: true,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
scale: true,
min: 0,
max: 1.5,
interval: 0.3,
nameTextStyle: {
// color: '#fff',
fontSize: 14
},
splitLine: {
show: false
}
},
{
type: 'value',
scale: true,
min: 0,
max: 30,
interval: 5,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
series: [
{
name: 'VT,L',
symbolSize: 25,
color: '#30FFFF',
// yAxisIndex: 1,
data: res.data.data.item6[0],
type: 'scatter',
},
{
name: 'f,bpm',
symbolSize: 25,
color: '#FFFF18',
yAxisIndex: 1,
data: res.data.data.item6[1],
type: 'scatter',
},
],
})
barec7.setOption({
color: [
'red', '#901818', 'blue'
],
legend: {
y: 'top',
data: ['PETO2', 'SpO2', 'PETCO2'],
textStyle: {
color: 'black',
fontSize: 16
}
},
xAxis: [
{
type: 'value',
scale: true,
nameTextStyle: {
// color: '#fff',
fontSize: 14
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
scale: true,
min: 0,
max: 150,
interval: 30,
nameTextStyle: {
// color: '#fff',
fontSize: 14
},
splitLine: {
show: false
}
},
],
series: [
{
name: 'PETO2',
symbolSize: 25,
color: 'red',
// yAxisIndex: 1,
data: res.data.data.item7[0],
type: 'scatter',
},
{
name: 'SpO2',
symbolSize: 25,
color: '#901818',
// yAxisIndex: 1,
data: res.data.data.item7[1],
type: 'scatter',
},
{
name: 'PETCO2',
symbolSize: 25,
color: 'blue',
data: res.data.data.item7[2],
type: 'scatter',
},
],
})
barec8.setOption({
color: [
'#901818', '#FFFF18', 'red', 'blue'
],
legend: {
y: 'top',
data: ['HR,bpm', 'VCO2,L/min', 'HR-rec.', 'VCO2-rec.'],
textStyle: {
color: 'black',
fontSize: 16
}
},
xAxis: [
{
type: 'value',
scale: true,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
scale: true,
min: 0,
max: 150,
interval: 30,
nameTextStyle: {
// color: '#fff',
fontSize: 14
},
splitLine: {
show: false
}
},
{
type: 'value',
scale: true,
min: 0,
max: 1.2,
interval: 0.2,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
series: [
{
name: 'HR,bpm',
symbolSize: 25,
color: '#901818',
// yAxisIndex: 1,
data: res.data.data.item8[0],
type: 'scatter',
},
{
name: 'VCO2,L/min',
symbolSize: 25,
color: '#FFFF18',
yAxisIndex: 1,
data: res.data.data.item8[1],
type: 'scatter',
},
{
name: 'HR-rec.',
symbolSize: 25,
color: 'red',
data: res.data.data.item8[2],
type: 'scatter',
},
{
name: 'VCO2-rec.',
symbolSize: 25,
color: 'blue',
yAxisIndex: 1,
data: res.data.data.item8[3],
type: 'scatter',
}
],
})
barec9.setOption({
color: [
'#189018', 'red',
],
legend: {
y: 'top',
data: ['VT,L-1', 'VT,L-2'],
textStyle: {
color: 'black',
fontSize: 16
}
},
xAxis: [
{
type: 'value',
scale: true,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
scale: true,
min: 0,
max: 1.5,
interval: 0.3,
nameTextStyle: {
fontSize: 14
},
splitLine: {
show: false
}
},
],
series: [
{
name: 'VT,L-1',
symbolSize: 25,
color: '#189018',
// yAxisIndex: 1,
data: res.data.data.item9[0],
type: 'scatter',
},
{
name: 'VT,L-2',
symbolSize: 25,
color: 'red',
// yAxisIndex: 1,
data: res.data.data.item9[1],
type: 'scatter',
},
],
})
wx.hideLoading();
},
fail: function (res) { },
complete: function (res) { },
})
}
});
