您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > 小程序

微信小程序实现echarts并兼容IOS

时间:2022-06-22 10:08:09  来源:  作者:东少笔记

示例简介

本文介绍使用ec-canvas实现小程序图表功能,支持切换更新数据并在IOS顺畅使用。

Tips:本文只介绍柱形图,其它图形类似,具体可查看GitHub上的ecomfe/echarts-for-weixin项目。

 

实现过程

1、文件index.wxml和index.wxss代码如下,这一块比较简单,可自行查看,不做过多分析;

<view class="container">
  <view class="item-head">
    <view class="tit">月份统计</view>
    <picker mode="selector" bindchange="chooseChange" value="{{chooseIndex}}" range="{{choossArr}}" range-key="value" name="chooseType" class="picker-box">
      <view class="picker">
        {{choossArr[chooseIndex].value}}
      </view>
      <image src="../../images/arrow.png"></image>
    </picker>
  </view>
  <view class="echart-heig">
    <image src="{{echartImgSrc}}" class="echart-img" wx:if="{{echartImgSrc1 != ''}}"></image>
    <ec-canvas id="mychart" canvas-id="mychart-bar" ec="{{ ec }}" class="{{echartImgSrc != '' ? 'hide' : ''}}"></ec-canvas>
  </view>
</view>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}


.item-head {
  display: flex;
  padding: 40rpx 30rpx 20rpx;
}


.item-head .tit {
  font-size: 30rpx;
  margin: 6rpx 14rpx 0 0;
}


.item-head .picker-box {
  display: flex;
  width: 196rpx;
  height: 50rpx;
  font-size: 26rpx;
  line-height: 50rpx;
  border-radius: 6rpx;
  border: 2rpx solid #e6e6e6;
}


.item-head .picker-box .picker {
  display: inline-block;
  flex: 0.7;
  width: 140rpx;
  text-align: left;
  margin-left: 20rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.item-head .picker-box image {
  flex: 0.3;
  width: 12rpx;
  height: 8rpx;
  margin-top: -34rpx;
  vertical-align: middle;
}


.item-head .picker-box.ios image {
  margin-top: -10rpx;
}


.hide {
  display: none !important;
}


.echart-img {
  width: 100%;
  height: 100%;
}


.echart-heig {
  width: 100%;
  height: 1020rpx;
}

2、文件index.js存放所有功能的逻辑代码,代码实现如下:

1)函数chooseChange用于获取切换数据后的月份;

2)函数getFinishCount用来根据月份判断使用的数据;为了方便使用简单的数据切换,项目情况下,一般都是调用接口获取数据;有个特别要注意的,就是把echartImgSrc的值清空,不然没办法更新数据;

3)函数initEcharts是示例的核心,数据结构可自行查看官网,更新数据使用了chart.setOption(option);但这里有个比较特别的代码,就是先使用canvasToTempFilePath把指定区域生成图片,然后赋值echartImgSrc来重新渲染页面,因为直接用ec-canvas渲染,在IOS滑动会很卡。

import * as echarts from '../../ec-canvas/echarts';
const App = getApp();


Page({
  data: {
    villageArr: [],
    villageArr1: [{
        value1: 90,
        value2: 78,
        name: 'aaa'
      },
      {
        value1: 145,
        value2: 120,
        name: 'bbb'
      },
      {
        value1: 98,
        value2: 87,
        name: 'ccc'
      },
      {
        value1: 126,
        value2: 102,
        name: 'ddd'
      },
      {
        value1: 90,
        value2: 90,
        name: 'eee'
      },
      {
        value1: 108,
        value2: 100,
        name: 'fff'
      },
      {
        value1: 134,
        value2: 120,
        name: 'ggg'
      }
    ],
    villageArr2: [{
        value1: 50,
        value2: 45,
        name: 'aaa'
      },
      {
        value1: 40,
        value2: 36,
        name: 'bbb'
      },
      {
        value1: 70,
        value2: 67,
        name: 'ccc'
      },
      {
        value1: 80,
        value2: 54,
        name: 'ddd'
      },
      {
        value1: 77,
        value2: 55,
        name: 'eee'
      },
      {
        value1: 66,
        value2: 57,
        name: 'fff'
      },
      {
        value1: 80,
        value2: 50,
        name: 'ggg'
      }
    ],
    ec: {},
    echartImgSrc: '', // canvas在ios下滑动问题,目前只能将echarts图表渲染完成后再生成为图片展示。
    chooseIndex: 0, // 选中的下标
    choossArr: [{
        value: '1月',
        id: 1
      },
      {
        value: '2月',
        id: 2
      }
    ]
  },
  // 切换不同数据
  getFinishCount: function (month) {
    let self = this;
    if (month === 1) {
      this.setData({
        villageArr: this.data.villageArr1,
        echartImgSrc: ''
      });
    } else {
      this.setData({
        villageArr: this.data.villageArr2,
        echartImgSrc: ''
      });
    }    
    self.initEcharts();
  },
  // 数据渲染
  initEcharts: function (canvas, width, height) {
    let that = this;
    this.selectComponent('#mychart').init((canvas, width, height) => {
      // 初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      let villageArr = that.data.villageArr;
      let villageArrName = [];
      let villageArrValue1 = [];
      let villageArrValue2 = [];


      villageArr.map(function (item, index) {
        villageArrName.push({
          value: item.name,
          id: index
        });
        villageArrValue1.push({
          value: item.value1
        });
        villageArrValue2.push({
          value: item.value2
        });
      })
      this.setData({
        villageArr: villageArr
      })


      let option = {
        color: ["#58a7f8", "#63e669"],
        legend: {
          data: ['上报量', '完成量'],
          top: 0,
          left: 10,
          icon: 'roundRect',
          itemWidth: 13,
          itemHeight: 13,
          itemGap: 20,
        },
        grid: {
          left: 15,
          right: 25,
          bottom: 0,
          top: 35,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: '#e6e6e6'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#6a737d'
            }
          }
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#6a737d',
              fontSize: 11,
              align: 'right',
            },
            formatter: function (value, index) {
              if (value.length > 6) return value.slice(0, 6) + '...';
              else return value;
            }
          },
          data: villageArrName
        },
        series: [{
            name: '上报量',
            type: 'bar',
            barWidth: 12,
            barGap: '-100%',
            data: villageArrValue1
          },
          {
            name: '完成量',
            type: 'bar',
            barWidth: 12,
            data: villageArrValue2
          }
        ]
      };


      chart.on('finished', () => {
        that.selectComponent('#mychart').canvasToTempFilePath({
          success: res => {
            that.setData({
              echartImgSrc: res.tempFilePath
            })
            wx.hideLoading();
          },
          fail: res => console.log('转换图片失败', res)
        });
      })


      chart.setOption(option);
      return chart;
    });
  },
  // 选项改变触发
  chooseChange: function (e) {
    wx.showLoading({
      title: '加载中',
      mask: true
    });
    this.setData({
      chooseIndex: e.detail.value
    })
    let month = this.data.choossArr[e.detail.value].id;
    this.getFinishCount(month);
  },
  // 加载页面
  onLoad: function () {
    wx.showLoading({
      title: '加载中',
      mask: true
    });
    // 默认第一月数据
    this.getFinishCount(1);
  }
});


Tags:echarts   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
示例简介本文介绍使用ec-canvas实现小程序图表功能,支持切换更新数据并在IOS顺畅使用。Tips:本文只介绍柱形图,其它图形类似,具体可查看GitHub上的ecomfe/echarts-for-weixin项...【详细内容】
2022-06-22  Tags: echarts  点击:(59)  评论:(0)  加入收藏
一、前言我们都知道python上的一款可视化工具matplotlib,当然百度开源的一个可视化JS工具-Echarts也非常好用,可视化类型非常多,但是得通过导入js库在Java Web项目上运行,平时用...【详细内容】
2022-04-22  Tags: echarts  点击:(127)  评论:(0)  加入收藏
# pip install pyechartsfrom pyecharts import options as optsfrom pyecharts.charts import Map# 实例化地图对象china_map = Map()# 各省份的数据data = [ [&#39;广...【详细内容】
2022-02-24  Tags: echarts  点击:(123)  评论:(0)  加入收藏
前言Echarts 是百度开源的一款数据可视化 JS 工具,数据可视化类型十分丰富,但是得通过导入 js 库在 Java Web 项目上运行。作为工作中常用 Python 的选手,不能不知道这款数据可...【详细内容】
2022-02-21  Tags: echarts  点击:(160)  评论:(0)  加入收藏
利用Python实现中国地铁数据可视化。废话不多说。让我们愉快地开始吧~开发工具Python版本:3.6.4相关模块:requests模块;wordcloud模块;pandas模块;numpy模块;jieba模块;pyecharts模...【详细内容】
2021-12-08  Tags: echarts  点击:(239)  评论:(0)  加入收藏
今天给大家分享一款超不错的Vue可视化图表数据大屏Dashboard。 基于Vue+Echarts+ElementUI构建的数据图表可视化大屏,star高达1.5K+。包含柱状图、折线图、热力图、预览面板...【详细内容】
2020-10-19  Tags: echarts  点击:(2379)  评论:(0)  加入收藏
今天教大家用pyecharts制作北京市公交线路动态图,这应该是全网唯一一篇能正常运行的教程 一、获取百度秘钥首先,本项目需要引用百度地图api,所以需要先注册获取百度开放平台秘...【详细内容】
2020-09-09  Tags: echarts  点击:(80)  评论:(0)  加入收藏
引言对于Python下桌面软件的开发已经有了很多数据可视化的库,如Matplotlib、Seaborn、Pyqtgraph、Plotly等等,但这些库更适合于后端程序员的软件开发。实际上在前端网页开发方...【详细内容】
2020-05-06  Tags: echarts  点击:(966)  评论:(0)  加入收藏
原文:https://www.xncoding.com/2016/06/22/web/echarts.htmlECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动, 可交互,可个性化定制的数...【详细内容】
2019-07-26  Tags: echarts  点击:(409)  评论:(0)  加入收藏
▌简易百科推荐
随着微信小程序的运营场景不断丰富,不少openinstall客户希望通过小程序拓展App落地页下载场景。但由于微信小程序本身的限制,企业主体的小程序必须配置业务域名,才能在web-view...【详细内容】
2022-07-01  openinstall    Tags:微信小程序   点击:(77)  评论:(0)  加入收藏
示例简介本文介绍使用ec-canvas实现小程序图表功能,支持切换更新数据并在IOS顺畅使用。Tips:本文只介绍柱形图,其它图形类似,具体可查看GitHub上的ecomfe/echarts-for-weixin项...【详细内容】
2022-06-22  东少笔记    Tags:echarts   点击:(59)  评论:(0)  加入收藏
搭建知识付费型小程序,商家设置资源自动交付,资源是商品,购买成功之后系统自动发货,顾客查询订单详情就能获取资源。 动图演示的是用轻栈「链接」制作的知识付费商城使用效果,它...【详细内容】
2022-06-09  轻栈    Tags:小程序   点击:(36)  评论:(0)  加入收藏
最近有人私信我小程序怎么做,报价是多少之类的话题。首先明确一点,我肯定是不会接普通的私活,帮老板做经营性质的小程序,我想要做的是合作共赢的方式,具体细节有时间可以重开一篇...【详细内容】
2022-05-23  泽哥爱晓钊    Tags:小程序   点击:(97)  评论:(0)  加入收藏
1. 前言微信小程序开发平台,提供一类 API,可以让开发者获取到微信登录用户的个人数据。这类 API 统称为开放接口。Tip:微信小程序开发平台,会把微信登录用户的个人信息分为明文...【详细内容】
2022-05-17  那只斑马还没有睡    Tags:微信小程序   点击:(70)  评论:(0)  加入收藏
可以这样说,现在使用微信的人,大部分都使用过微信小程序,如今很多行业都开发了自己的微信小程序,微信小程序开发的费用相信大家都听到过不同,有几百也有几千甚至有上万的,价格差距...【详细内容】
2022-04-28  北京合合app开发-姜    Tags:小程序开发   点击:(62)  评论:(0)  加入收藏
移动端:APP+小程序+公众号后端:JAVA数据库:MySQL源码类型:WinForm 就不多做多余的介绍了,当前可以实现外卖点餐,在店扫码点餐。餐桌管理可按照桌位号点餐,财务管理和账单管理,有一台...【详细内容】
2022-04-01  百纳软件源码bn    Tags:小程序源码   点击:(111)  评论:(0)  加入收藏
我在云开发基础课程里给大家讲过小程序消息推送功能的实现,等下会给大家回顾下。但是有时候我们如果想实现定时推送的功能该怎么做呢一,普通订阅消息的发送我们先来看下订阅消...【详细内容】
2022-03-01  编程小石头    Tags:小程序   点击:(1184)  评论:(0)  加入收藏
1. 开发小程序时,每个页面一定要在app.json文件中注册,页面文件夹和其包含的四个文件的名字要保持一致。2. 小程序发起的都是HTTPS网络请求,在开发调试的过程中可以不校验协议...【详细内容】
2022-02-24  IT程序分享    Tags:小程序   点击:(93)  评论:(0)  加入收藏
微信小程序面试题1. 小程序有几个文件?WXML:微信自己定义的一套组件WXSS : 用于描述 WXML 的组件样式js : 逻辑处理json : 小程序页面配置2.小程序怎么跟随事件传值在 页面标...【详细内容】
2022-01-27  码农不加班    Tags:微信小程序   点击:(1876)  评论:(0)  加入收藏
站内最新
站内热门
站内头条