小程序循环多个图表

最新推荐文章于 2024-05-10 00:43:12 发布
最新推荐文章于 2024-05-10 00:43:12 发布
阅读量217 收藏
点赞数
文章标签： 小程序 echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45799001/article/details/122298526
版权

.xml

<view >
  <van-row style="margin:15px">
    <van-col span="24">
      <van-field  readonly value="{{ name }}"  border="{{ false }}" disabled is-link bindtap="showPopup"   label="传感器类别："/>
      <van-popup show="{{show}}" position="top">
    <van-picker columns="{{categoryArr}}" show-toolbar bind:cancel="categoryOnClose" bind:confirm="onConfirm"
      value-key="name" />
  </van-popup>
    </van-col>
    <!-- <van-col span="4">
      <van-button type="primary" size="small" style="  line-height: 90rpx;" bindtap="getCategoryArr">查询</van-button>
    </van-col>  -->
  </van-row> 
  <van-row> 
  <van-col span="9"> <pickerYMDHM class="fl" placeholder="{{placeholder}}" date="{{date}}" disabled="{{disabled}}"
    bind:onPickerChange="onPickerChange" startDate="{{startDate}}" endDate="{{endDate}}">
  </pickerYMDHM> </van-col>
  <van-col span="9"><pickerYMDHM   class="fl" placeholder="{{placeholder1}}" date="{{date1}}" disabled="{{disabled}}"
    bind:onPickerChange="onPickerChange1" startDate="{{startDate1}}" endDate="{{endDate1}}">
  </pickerYMDHM></van-col>
  <van-col span="6"><van-button type="primary" size="small" style="line-height: 40px;margin-left:20px" bindtap="getCategoryArrqqqqq">查询</van-button></van-col>
</van-row> 

  <!-- 循环多个图表 -->
  <view class="boxxx" wx:for="{{ecLine}}" wx:key="index">
    <ec-canvas wx:if="{{!show}}" id="{{'myecharts' + index}}" canvas-id="{{'myecharts' + index}}" ec="{{ ecLine[index] }}"></ec-canvas>
  </view>
  
</view>

.js

const api = require('../../utils/api.js') // 引入api接口管理文件
import * as echarts from '../../ec-canvas/echarts';
var lessonChart = null;
function getOption(xAxis, yAxis1, yAxis2, yAxis3,nameN) {
  var option = {
      title: {
        text: nameN,
        left: 'center',
        textStyle: {
            fontSize: 14,
            color: '#696969'
        }, 
    }, 
    legend: {
      data: ['最大值', '最小值', '典型值'],
      top: 25,
      left: 'center',
      z: 0
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxis,
      axisLabel: {
        interval: 2, //x轴间隔多少显示刻度
        fontSize: 8,
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '最大值',
      type: 'line',
      smooth: true,
      data: yAxis1,
    }, {
      name: '最小值',
      type: 'line',
      smooth: true,
      data: yAxis2,
    }, {
      name: '典型值',
      type: 'line',
      smooth: true,
      data: yAxis3,
    }]
  };
  return option;
}
Page({
  data: {  
    categoryArr: [],
    ecLine: [], 
    // //弹出层控制
    show: false,
    id: '',
    name: '', 
    date: '2021-11-20 9:00',
    disabled: false, //设置是否能点击 false可以 true不能点击
    startDate: '2021-11-20 9:00',
    endDate: '2028-03-12 12:38',
    placeholder: '查询开始时间',
    date1: '2021-11-20 9:00',
    startDate1:'2021-11-20 9:00',
    endDate1: '2028-03-12 12:38', 
    placeholder1: '查询结束时间',
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (option) {
    this.getinfo() ;
  },
  onPickerChange: function (e) { 
    this.setData({
      date: e.detail.dateString, 
    }) 
  }, 
   onPickerChange1: function (e) {
    console.log(e.detail);
    this.setData({
      date1: e.detail.dateString
    }) 
  },
  //按时间查询 这个先不用管
  getCategoryArrqqqqq(){
    var _this = this;
    // 模拟请求后台接口之后返回的数据
    if(this.data.id ==""){
      wx.showToast({
        title: '请选择传感器类别！',
        icon: 'none',
        duration: 2000
      })
      return false
    } 
    api._get('/oil/tranInfoMax/'+this.data.id, {
      starTime:this.data.date,
      endTime:this.data.date1
    }).then(res => { 
      let ecLineArr = []; 
      // 先清掉旧的canvas的缓存
      _this.setData({
        ecLine: ecLineArr
      }) 
      let dataArr = res.paramList; 
      let nameList = res.nameList; 
      var arr = []; //定义数组
      //字符串转数组
      for (var i in dataArr) {
        arr.push(dataArr[i]);
      } 
      for (let i = 0; i < arr.length; i++) {
        let objAttr = {}; 
        for (let j = 0; j < arr[i].length; j++) {
          //给对象赋属性名，属性值
          if (0 == j) {
            var key = "yAxis1";
            var value = arr[i][j]
            objAttr[key] = value; 
          }
          if (1 == j) {
            var key = "yAxis2";
            var value = arr[i][j]
            objAttr[key] = value; 
          }
          if (2 == j) {
            var key = "yAxis3";
            var value = arr[i][j]
            objAttr[key] = value;
          }
          if (3 == j) {
            var key = "xAxis";
            var value = arr[i][j]; 
            var arryTime=[];
            value.forEach(element => {
              var element= element.substring(5,10);
              arryTime.push(element)
            });
            objAttr[key] = arryTime;
          } 
        } 
        let obj = { 
          onInit: function (canvas, width, height) { 
            //初始化echarts元素 
            lessonChart = echarts.init(canvas, null, {
              width: width,
              height: height
            });      
            canvas.setChart(lessonChart); 
         
            var option = getOption(objAttr.xAxis, objAttr.yAxis1, objAttr.yAxis2, objAttr.yAxis3,nameList[i].title); 
            console.log(objAttr.yAxis3, )
            lessonChart.clear();  
            lessonChart.setOption(option,true);  
            return lessonChart;  
          }
           
        }
        ecLineArr.push(obj);
      }
      _this.setData({
        ecLine: ecLineArr
      })
    }).catch(e => {
      console.log(e)
    })
  },
  getDetail: function () {
    var _this = this;
    // 模拟请求后台接口之后返回的数据
    let dataArrone = [
      //   {
      //     xAxis: ['02-11', '02-13', '02-15', '02-17', '02-23', '02-25', '02-28'],
      //     yAxis1: [1.4, 1.3, 1.6, 1.9, 1.8, 1.6, 2.0],
      //     yAxis2: [1.8, 1.6, 1.7, 1.8, 1.0, 1.6, 3.0],
      //     yAxis3: [2.4, 2.3, 2.6, 1.9, 1.8, 2.6, 2.0],
      //   },
      //   {
      //     xAxis: ['03-11', '03-13', '03-15', '03-17', '03-23', '03-25', '03-28'],
      //     yAxis1: [2.4, 2.3, 2.6, 1.9, 1.8, 2.6, 2.0],
      //     yAxis2: [1.8, 1.6, 1.7, 1.8, 1.0, 1.6, 3.0],
      //     yAxis3: [1.4, 1.3, 1.6, 1.9, 1.8, 1.6, 2.0],
      //   }
    ]
//类别查询
    api._get('/oil/tranInfoMax/'+this.data.id, ).then(res => {

      let ecLineArr = [];
      // 先清掉旧的canvas的缓存
      _this.setData({
        ecLine: ecLineArr
      })
      let dataArr = res.paramList; 
      let nameList = res.nameList; 
      var arr = []; //定义数组
      //字符串转数组
      for (var i in dataArr) {
        arr.push(dataArr[i]);
      }
      console.log(2)
      for (let i = 0; i < arr.length; i++) {
        let objAttr = {}; 
        for (let j = 0; j < arr[i].length; j++) {
          //给对象赋属性名，属性值
          if (0 == j) {
            var key = "yAxis1";
            var value = arr[i][j]
            objAttr[key] = value; 
          }
          if (1 == j) {
            var key = "yAxis2";
            var value = arr[i][j]
            objAttr[key] = value; 
          }
          if (2 == j) {
            var key = "yAxis3";
            var value = arr[i][j]
            objAttr[key] = value;
          }
          if (3 == j) {
            var key = "xAxis";
            var value = arr[i][j]; 
            var arryTime=[];
            value.forEach(element => {
              var element= element.substring(5,10);
              arryTime.push(element)
            });
            objAttr[key] = arryTime;
          }
        } 
        let obj = {
          onInit: function (canvas, width, height) {
            //初始化echarts元素 
            console.log(lessonChart)
            lessonChart = echarts.init(canvas, null, {
              width: width,
              height: height
            });      
            canvas.setChart(lessonChart); 
            // debugger //这里只执行了一次
            console.log(3)
            var option = getOption(objAttr.xAxis, objAttr.yAxis1, objAttr.yAxis2, objAttr.yAxis3,nameList[i].title);
            lessonChart.setOption(option,true); 
            console.log(4)
            return lessonChart;
          }
        } 
        ecLineArr.push(obj);
        console.log("ecLineArr",ecLineArr)
      }
      _this.setData({
        ecLine: ecLineArr
      })  
    }).catch(e => {
      console.log(e)
    })
  },
  // 获取 下拉框信息 
  getinfo() {
    api._get('/oil/queryTranList/' + wx.getStorageSync('userId'), {}).then(res => {
      this.setData({ 
        categoryArr: Object.assign([], res.tranList),
      })
    }).catch(e => {
      console.log(e)
    })
  },

  // 查询获取
  getCategoryArr() {
    if(this.data.id ==""){
      wx.showToast({
        title: '请选择传感器类别！',
        icon: 'none',
        duration: 2000
      })
      return false
    }
    api._get('/oil/tranInfo/' + this.data.id, ).then(res => {
      let arr = []
      res.bodyList.forEach((item, index) => {
        for (const key in item) {
          item[key] = item[key] ? item[key] : '-'
        }
        arr.push(item)
      })
      this.setData({
        headerList: Object.assign([], res.headerList),
        bodyList: Object.assign([], res.bodyList),
      })
      var _this = this;
      console.log(1)
      _this.getDetail();
    }).catch(e => {
      console.log(e)
    })
  },
  //选择器 点击完成按钮时触发
  onConfirm(event) {
    this.setData({
      'id': event.detail.value.id,
      'name': event.detail.value.name,
      show: false,
    });
    this.getCategoryArr();
  },
  //选择器 点击取消按钮时触发
  categoryOnClose() {
    this.setData({
      show: false
    });
  },
  //点击触发弹出框
  showPopup() {
    this.setData({
      show: true
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载 
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
})
晓柯爱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSDN最全面的微信小程序源码和模板
03-08
从事微信小程序开发也有差不多半年的时间了，本人深知对于从来都没有接触过微信小程序开发的人刚开始是多么的迷茫，无助。其实我刚开始也是这样，然而进过一段时间的开发，学习，我知道了其实网上有很多人进行分享过，可以参照他们的进行开发学习，这样不仅仅可以达到事倍功半的效果。这是我自己在网上收集，和一些自己做的一些小程序，想分享出来帮助大家更好的学习开发，其中包括了一些比较完善的小程序开源框架，还有几套比较完善的微信小程序商城模板，和源码只需自己把接口替换成自己的即可，希望能够帮到大家。
微信小程序遍历Echarts图表实现多个饼图
10-17
主要介绍了微信小程序遍历Echarts图表实现多个饼图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决小程序wx.openLocation位置偏移的问题
Debug的博客
07-03 1197
【代码】解决小程序wx.openLocation位置偏移的问题。
第六篇【传奇开心果系列】Vant of Vue 开发移动应用示例：深度解析响应式布局支持_van-row van-col 如何设置列宽比例(2)
最新发布
2301_82243603的博客
05-10 583
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。sm: 576, // 中等屏幕设备（平板电脑）上的断点。xs: 320, // 小屏幕设备（手机）上的断点。lg: 992, // 大屏幕设备（电脑）上的断点。md: 768, // 中大屏幕设备上的断点。xl: 1200 // 超大屏幕设备上的断点。// 在项目中的需要的地方引入自定义的断点配置文件。在小屏幕设备上设置元素居中对齐。
微信小程序图表插件 echarts-for-weixin
有勇气的牛排博客
07-28 2159
有勇气的牛排 官网 https://lgch.xyz/ http://920z.net/ 微信小程序总结大全 下载地址 https://github.com/ecomfe/echarts-for-weixin/tree/master/pages 使用 index.wxml <view class="container"> <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-c
微信小程序实现音乐播放器（2）
richest_qi的博客
07-21 1万+
是全局唯一的背景音频管理器。小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。从微信客户端6.7.2版本开始，如果需要小程序切后台后继续播放音频，需要在全局配置文件app.json。属性，如"requiredBackgroundModes"["audio"]实例，可以通过wx.getBackgroundAudioManager()中配置requiredBackgroundModes。............
小程序源码 音乐播放器videoplayer.rar
03-20
免责声明：资料部分来源于合法的互联网渠道收集和整理，部分自己学习积累成果，供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方，资料版权归原作者或出版方所有，本人不对所涉及的版权问题或内容负法律责任。如有侵权，请举报或通知本人删除。
【微信小程序】使用echarts实现一个界面动态刷新多个柱状图
01-08
最近在写微信小程序遇到了图表相关的问题，项目要求是要用柱状图，同时由于数据较多，需要将一组数据用多个图表表示，而且还要实现动态刷新数据。 关于echarts的下载和引入不多加介绍。 效果图 这里只取一部分数据做...
《C程序设计作业》PPT课件.ppt
11-16
函数调用可以将一个复杂的程序分解成多个小的函数，每个函数都有其特定的任务。在本PPT课件中，我们可以看到函数调用的一些实例，例如调用子程序来实现延时程序。 4. 数组和指针： 数组和指针是C程序设计中两种...
易语言程序免安装版下载
04-07
“库文件名”以.lib或.obj为后缀的将被视为静态库，可使用绝对路径或相对路径（相对当前源代码所在目录），如依赖多个静态库请分别列出并以逗号分隔；“在库中的对应命令名”请务必准确填写静态库中公开导出的符号...
微信小程序开发———音乐播放器
qq_50582468的博客
10-27 3万+
目录 一 小程序主体功能介绍 二 常用组件和API介绍 音频API 常用组件 三 整体布局 数据定义 主体页面 运行效果 四 播放器页面 布局部分 样式部分 运行效果 五 播放列表页面 布局部分 样式部分 运行效果 全部功能实现代码index.js 一 小程序主体功能介绍 本小程序主要实现，音乐的播放、暂停，下一曲的切换，以及播放列表和当前播放歌曲的详细信息查看等。 二 常用组件和API介绍 音频API 介绍 创建音频时需要先创建一个对象实例，从而引用该
echarts-for-weixin.rar
06-20
提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求
we-cropper 一款灵活小巧的canvas图片裁剪器
06-11
Usage 克隆至本地处理 git clone https://github.com/we-plugin/we-cropper.git npm方式引入 npm install we-cropper --save
ec-canvas.zip
02-24
微信小程序echarts
小程序页面动态配置实现方法
11-30
小程序可以根据管理后台配置动态更新展示内容，如实现下面新鲜事栏目图片的来源的可配置，点击跳转url的可配置。 实现方案 1后端创建一个map结构的数据表，表结构如下： 2 管理后台根据不同业务设定不同的key和value，更新数据库 如key：ad1url value：a.png 如果需要更新页面图片，只需更新ad1url对应的value 3 小程序根据对应业务key获取对应的配置项，更新页面显示 技术栈 后端接口服务：SpringBoot Mybatis MySql 管理后台：vue 前端：小程序 代码实现 后端接口 为了保证key的唯一性，key在数据库设置为unique属性，新增和更
echarts-for-weixin组件学习使用与踩坑记录
xzsfg6825的博客
05-22 461
1、echarts-for-weixin组件 遇到的坑：直接粘贴使用官方的代码教程，无法实现一次性渲染出图表，需要第二次进入才能渲染出图 错误代码： var id = []; var name = []; test: function () { var that = this; wx.request({ url: 'https://www.xxx.com/xxx/xxx', data: {}, header: { 'content-type
[微信小程序]搜索功能实现,搜索框样式
热门推荐
a_靖的博客
11-28 13万+
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 <view class='page_row' bindtap="suo"> <view class="search"> <view cla...
php脚本连接mysql，微信小程序连接数据库。
qq_47799731的博客
04-29 1067
最近我在做一个微信小程序，其中有一个页面，页面里面需要连接我的后台数据库，把用户数据传递到我的MySQL数据库中。最初，我在网上找了很多东西，发现并没有一个特别详细明确的教程，其中大多数都只是把他的代码给出来。该函数需要使用一个微信小程序的一个api接口：wx.request。这里我使用的是宝塔面板帮助我搭建的网站。其中的data是用来传递参数的，后台的PHP脚本会有$_GET变量来获取传递的参数。下面是这个界面的实现的代码senddata.ts。后台脚本写好之后便可以实现和后台数据库的连接。
小程序悬浮按钮movable-area实现及解决按钮图层遮罩问题
destinyego的专栏
07-01 1790
先上效果图 实现方案 1）通过使用movable-area、movable-view实现滑动 2）限制按钮在屏幕可用范围内 3）解决按钮图层遮罩问题 作为多个页面公用按钮，新建组件components更合适，先上代码。 wxml代码 <movable-area class= "movableAreaTask" style="height:{{screenHeight-50}}px;width:{{screenWidth}}px;top:50px"> <movab..
labview测电压小程序
07-03
下面是一个使用LabVIEW编写的测电压小程序的说明： 1. 首先，打开LabVIEW软件并创建一个新的VI（Virtual Instrument）。 2. 在VI的前面板上，添加一个数字输入控件，用于设置电压量程。用户可以通过这个控件输入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值