【小程序】---- 封装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 ...
随机推荐
- C#设计模式之0-简单工厂模式
简单工厂模式(Simple Factory Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/387 访问 ...
- jquary常见问题总结
如何调用本地json 1. 调用 <script src="solution.json?cb=readData"></script> 2. json 修改 ...
- 性能测试必备知识(11)- 怎么理解内存中的Buffer和Cache?
做性能测试的必备知识系列,可以看下面链接的文章哦 https://www.cnblogs.com/poloyy/category/1806772.html 缓存 从 free 命令可以看到,缓存其实就 ...
- go语言gRPC系列(三) - 使用grpc-gateway同时提供HTTP和gRPC服务
1. gRPC提供HTTP服务 1.1 存在的意义 1.2 代码示例 1.3 使用postman尝试调用 1.4 gRPC客户端代码调用 2. 使用grpc-gateway同时提供HTTP和gRPC服 ...
- 企业项目实战 .Net Core + Vue/Angular 分库分表日志系统 | 控制反转搭配简单业务
教程预览 01 | 前言 02 | 简单的分库分表设计 03 | 控制反转搭配简单业务 说明 我们上一节已经成功通过 连接提供程序存储库,获取到了 连接提供程序,但是连接提供程序和数据库连接依赖太深, ...
- SpringCloude简记_part3
18. SpringCloud Alibaba Sentinel实现熔断与限流 18.1 Sentiel 官网 https://github.com/alibaba/Sentinel 中文 https ...
- 极简 Node.js 入门 - 3.2 文件读取
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 3 Spark 集群安装
第3章 Spark集群安装 3.1 Spark安装地址 1.官网地址 http://spark.apache.org/ 2.文档查看地址 https://spark.apache.org/docs/2 ...
- 【转】python调用youtube-dl实现视频下载
youtube-dl是一个命令行程序,用于从YouTube.com和更多网站下载视频.它需要Python解释器,版本2.6,2.7或3.2+,并且支持Unix,Windows或Mac OS X中运行. ...
- double与Double
1. double是基本数据类型,Double是原始数据类型(Java 类) 2. double创建引用,Double创建对象 3. double不可以为NULL,Double是类所以其对象是可以为N ...