【小程序】---- 封装Echarts公共组件,遍历图表实现多个饼图
一、问题描述:
在小程序的项目中,封装公共的饼图组件,并在需要的页面引入使用。要求一个页面中有多个饼图,动态渲染不同的数据。
二、效果实现:
1. 查看——小程序使用Echarts的方式
2. 封装饼图公共组件
// pie.wxml <view class="containers">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" tuData="{{ pieData }}"></ec-canvas> // tuData是自定义的
</view>
// pie.json {
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas" // 下载的微信版Echarts
},
"component": true
}
// pie.js import * as echarts from '../../ec-canvas/echarts'; function initChart(canvas, width, height, dpr, pieData) { // 这里多加了pieData参数
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 像素
});
canvas.setChart(chart);
// console.log('数据:',pieData)
// pieData为页面传过来的数组数据:[[分类],[分类颜色],[标签字大小,标签字颜色],分类一数据,分类二数据]
let option = {
title: {},
tooltip: {
trigger: 'item',
formatter: '{b} : {c}'
},
legend: {
left: 'center',
bottom: 20,
textStyle: {
fontSize: pieData[2][0],
color: pieData[2][1]
},
data: pieData[0]
},
color: pieData[1],
// color: ['#FD7031','#00d6a5'],
series: [{
name: '客户',
type: 'pie',
radius: '60%',
center: ["45%", "38%"],
label: {
position: 'inner',
show: true,
formatter: '{c}'
},
data: [{
value: pieData[3] ? pieData[3] : 0,
name: pieData[0][0],
// name: '已联系客户',
formatter: '{c}',
tooltip: {
trigger: 'item',
formatter: '{b} : {c}'
}
},
{
// name: '未联系客户',
value: pieData[4] ? pieData[4] : 0,
name: pieData[0][1],
formatter: '{c}',
tooltip: {
trigger: 'item',
formatter: '{b} : {c}'
}
}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
}]
};
chart.setOption(option);
return chart;
} Component({
// 接收页面传递过来的 pieData 饼图数据
properties: {
pieData: {
type: Array
}
},
data: {
ec: {
onInit: initChart
}
}
})
3. Page页面遍历 pie 饼图组件,并传过去需要的数据
(1) 通过 showPie 控制是否使用 pie 组件,当饼图有数据时使用,当切换页面时销毁。这是为了解决展示的饼图无法更新数据的问题。
(2) 成功从接口获取到饼图数据后,为页面每个饼图需要用到的要传递的 pieData 数据赋值。
4. 修改ec-canvas.js文件 (这个文件是从echarts官网下载的)
(1) 在wxml文件里,引用ec-canvas组件时,传了个tuData参数过去,所以我们需要在组件内部接收一下,在ec-canvas.js文件里面找到properties对象。
(2) 找到init方法,将tuData传入onInit方法里。
【小程序】---- 封装Echarts公共组件,遍历图表实现多个饼图的更多相关文章
- 微信小程序封装年月日时分组件
第一步,在page下新建component文件,放你封装的小组件,和vue里的component差不多 第二步,在需要使用的组件的.json文件中添加usingComponents 第三步,在页面中引 ...
- 微信小程序引入ECharts组件
首先打开ECharts网页 https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8 ...
- 微信小程序使用 ECharts 实现数据可视化
微信小程序使用 ECharts 显示图表 首先创建微信小程序 这里就不再赘述 下载 GitHub 上的 ecomfe/echarts-for-weixin 下载后解压,打开文件夹,里面的 ec-can ...
- 微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减少文件大小占比,也可以下载以前旧版本文件比较小的应付使用 下载 ...
- 微信小程序开发—快速掌握组件及API的方法
微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
- 微信小程序开发—快速掌握组件及API的方法---转载
微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
- [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext
引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...
- 小程序 模态对话框自定义组件(modal)
1. 概述 1.1 说明 小程序中使用wx.showModal(Object object)打开一个模态对话框,但是目前小程序所提供的modal中的内容显示比较死板,不能够完全满足工作中所遇到的功能信 ...
- 微信小程序封装storage(含错误处理)
这次给你们安利的是微信小程序封装storage,先说下微信官方的 wx.getStorage({ key:"", success: function (res) { }, fail ...
随机推荐
- Flutter 容器(7) - DecoratedBox
DecoratedBox: 装饰容器,在其子widget绘制前(或后)绘制一个装饰Decoration(如背景.边框.渐变等) import 'package:flutter/material.dar ...
- 防御sqlmap攻击之动态代码防御机制
本文首发于“合天智汇”公众号 作者:SRainbow 关于动态代码防御机制,是自己瞎取的名字,目前我还没有看到过类似的文章.如果有前辈已经发表过,纯属巧合!!!我仅是突发奇想的一个想法,说不上高大上. ...
- CPU:别再拿我当搬砖工了!
数据搬运工 Hi,我是CPU一号车间的阿Q,有段日子没见面了. 还记得上回说到咱们厂里用上了DMA技术(太慢不能忍!CPU又拿硬盘和网卡开刀了!)之后,我们总算解放了,再也不用奔波于网卡.硬盘与内存之 ...
- MyBatis使用LocalDateTime遇到的一系列问题
问题 在Mybaits中传入参数为LocalDateTime,查询发现结果集为空,插入时发现时间相差13小时 测试 新建工程,新建测试库(主要此处新工程使用的JDBC为mysql-connector- ...
- CPF 入门教程(一)
CPF netcore跨平台UI框架 开发之前,你需要先安装VS2019.为什么要vs2019?因为VS2019才能支持netcore3.0以上,netcore3.0之后才能发布独立的程序,之前的都只 ...
- # 火题小战 A.玩个球
火题小战 A.玩个球 题目描述 给你 \(n\) 种颜色的球,每个球有 \(k\) 个,把这 \(n\times k\) 个球排成一排,把每一种颜色的最左边出现的球涂成白色(初始球不包含白色),求有多 ...
- NRF52840 添加 led service
记录NRF52840 添加LED service的流程,以及遇到的问题. 由于SDK中已经有了led service的.c和.h文件,因此只需要添加文件,并且调用相关函数即可. 注:编译调试环境为ke ...
- SparkStreaming概述
Spark Streaming 是Spark核心API的一个扩展,可以实现高吞吐量的.具备容错机制的实时流数据的处理. ◆ 支持从多种数据源获取数据,包括Kafka.Flume.Twitter.Zer ...
- node.js03 第一个node.js程序和读取文件
Hello World 1.创建运行 创建txt文件起名为hellonode,在记事本中编写JavaScript脚本文件 例如: var bbl = 'hellonode' console.log(b ...
- Inherent Adversarial Robustness of Deep Spiking Neural Networks: Effects of Discrete Input Encoding and Non-Linear Activations
郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! arXiv:2003.10399v2 [cs.CV] 23 Jul 2020 ECCV 2020 1 https://github.com ...