美文网首页
微信小程序中--使用ECharts实现多个图表展示

微信小程序中--使用ECharts实现多个图表展示

作者: zZ_d205 | 来源:发表于2021-08-10 14:38 被阅读0次

    原文地址：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) { },
    })
  }
});

    相关文章

      网友评论

          本文标题：微信小程序中--使用ECharts实现多个图表展示

          本文链接：https://www.haomeiwen.com/subject/qsujmltx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|微信小程序中--使用ECharts实现多个图表展示|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！