微信小程序遍历Echarts图表实现多个饼图


Posted in Javascript onApril 25, 2019

如何在微信小程序中使用Echarts可以看我的另一个教程:点击查看

首先看一个简单的例子

1.wxml文件

<view style='width:100%;height:200rpx'>
 <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

2.js文件

import * as echarts from '../../common/ec-canvas/echarts';
function initChart(canvas, width, height) {
 const chart = echarts.init(canvas, null, {
  width: width,
  height: height
 })
 canvas.setChart(chart);
 var option = {
  series: [
   {
    name: '访问来源',
    type: 'pie',
    radius: ['60%', '70%'],
    animationType: 'scale',
    silent: true,
    labelLine: {
     normal: {
      show: false
     }
    },
    data: [
     {value:10},
     {value:3}
    ],
    color: ["#666", "#179B16"]
   }
  ]
 }
 chart.setOption(option);
 return chart;
}
Page({

 /**
  * 页面的初始数据
  */
 data: {
  ec: {
   onInit: initChart
  }
 }
})

3.json文件 (ec-canvas组件需要到官网下载,然后放到一个文件夹里面,然后在json文件中引入)

{
 "usingComponents":{
  "ec-canvas": "../../common/ec-canvas/ec-canvas"
 }
}

4.效果图

微信小程序遍历Echarts图表实现多个饼图

需求:假如有一个列表,每一条数据表示一个班级,然后通过图表展示出:女生人数占全班人数的比率。(如:上面效果图中的灰色部分表示全班人数,绿色部分表示女生人数)。

假如你已经懂了Echarts的基本配置,不懂的可以先看看官方文档:Echarts配置文档

基于上面例子我们进行分析一下:

从wxml文件可以看出ec-canvas组件定义了两个属性canvas-id和ec ,这种自定义属性一般用来传参,也就是传一些参数给ec-canvas组件内部。canvas-id我们暂时先不管,看一下ec ,在js文件中data里面定义了ec ,

ec它是一个对象,并且有个属性onInit 它的值是initChart函数(不是执行之后的喔),通过ec属性将initChart函数传入了ec-canvas组件内部,这时我们可以知道,initChart函数是在ec-canvas组件里面执行的。

打开ec-canvas.js文件,简单的看一下源码:

微信小程序遍历Echarts图表实现多个饼图

上图的两个属性,是通过组件传参的方式传进来的:

<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>

因为initChart函数赋值给了ec对象的onInit属性,所以我们可以搜索一下onInit ,可以发现它在init函数里面,如图:

微信小程序遍历Echarts图表实现多个饼图

我们先捋一捋这个逻辑,首先在引入组件的时候,通过ec属性传了个对象到ec-canvas组件内部,而这个对象有个属性onInit 值为一个函数,然后进入ec-canvas.js文件,在ready钩子函数中,判断ec对象是否存在(也就是判断用户是否传了ec进来),

如果存在,执行init方法,在上图中可以发现,init方法内部会执行onInit方法(如果条件满足的话),然后将函数返回的chart实例赋值给this.chart。

实现代码如下:

假如我们有个ecTest Page页。

1.wxml代码

<view class='test' wx:for="{{itemList}}" wx:for-item="item">
 <view>{{item.name}}</view>
 <view style='width:100%;height:200rpx'>
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" tuData="{{item.data}}" ec="{{ ec }}"></ec-canvas>
 </view>
</view>

2.js代码

import * as echarts from '../../common/ec-canvas/echarts';
function initChart(canvas, width, height ,data) {//这里多加一个参数
 const chart = echarts.init(canvas, null, {
  width: width,
  height: height
 })
 canvas.setChart(chart);
 var option = {
  series: [
   {
    name: '访问来源',
    type: 'pie',
    radius: ['60%', '70%'],
    animationType: 'scale',
    silent: true,
    labelLine: {
     normal: {
      show: false
     }
    },
    data: data,
    color: ["#666", "#179B16"]
   }
  ]
 }
 chart.setOption(option);
 return chart;
}
Page({

 /**
  * 页面的初始数据
  */
 data: {
  ec: {
   onInit: initChart
  },
  itemList:[
   { name: '一年级', data: [{ value: 10 }, { value: 1 }] },
   { name: '二年级', data: [{ value: 10 }, { value: 4 }] },
   { name: '三年级', data: [{ value: 10 }, { value: 7 }] },
  ]
 }
})

3.修改ec-canvas.js文件(这个文件是从echarts官网下载的)

在wxml文件里,引用ec-canvas组件时,传了个tuData参数过去,所以我们需要在组件内部接收一下,在ec-canvas.js文件里面找到properties对象,

properties: {
  canvasId: {
   type: String,
   value: 'ec-canvas'
  },

  ec: {
   type: Object
  },
  tuData:{//这是新增的参数
   type: Object
  }
 }

4.找到init方法,将tuData传入onInit方法里面即可

微信小程序遍历Echarts图表实现多个饼图

5.效果图

微信小程序遍历Echarts图表实现多个饼图

总结:因为chart实例是在ec-canvas组件内部才创建的,其它页面使用ec-canvas组件时,通过传参的方式,将实例化chart的方法通过ec属性传入ec-canvas组件内部进行实例化,

所以我们可以借助这一点,把我们的数据也通过传参的方式传入ec-canvas内部即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 Javascript
在微信小程序中使用图表的方法示例
Apr 25 #Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 #Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 #Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 #Javascript
Angular封装搜索框组件操作示例
Apr 25 #Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 #Javascript
详解javascript中的Error对象
Apr 25 #Javascript
You might like
一个很不错的PHP翻页类
2009/06/01 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
使用Turtle画正螺旋线的方法
2017/09/22 Python
Python中函数参数调用方式分析
2018/08/09 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
用python读取xlsx文件
2020/12/17 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
护理专业毕业生推荐信
2013/10/31 职场文书
档案室主任岗位职责
2014/02/12 职场文书
yy婚礼主持词
2014/03/14 职场文书
环境建设实施方案
2014/03/14 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
2014年导购员工作总结
2014/11/18 职场文书
聘任证明怎么写
2015/03/02 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
MySQL注入基础练习
2021/05/30 MySQL
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技
Vue深入理解插槽slot的使用
2022/08/05 Vue.js