一、问题描述:

在小程序的项目中,封装公共的饼图组件,并在需要的页面引入使用。要求一个页面中有多个饼图,动态渲染不同的数据。

二、效果实现:

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公共组件,遍历图表实现多个饼图的更多相关文章

  1. 微信小程序封装年月日时分组件

    第一步,在page下新建component文件,放你封装的小组件,和vue里的component差不多 第二步,在需要使用的组件的.json文件中添加usingComponents 第三步,在页面中引 ...

  2. 微信小程序引入ECharts组件

    首先打开ECharts网页 https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8 ...

  3. 微信小程序使用 ECharts 实现数据可视化

    微信小程序使用 ECharts 显示图表 首先创建微信小程序 这里就不再赘述 下载 GitHub 上的 ecomfe/echarts-for-weixin 下载后解压,打开文件夹,里面的 ec-can ...

  4. 微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题

    1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减少文件大小占比,也可以下载以前旧版本文件比较小的应付使用 下载 ...

  5. 微信小程序开发—快速掌握组件及API的方法

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

  6. 微信小程序开发—快速掌握组件及API的方法---转载

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

  7. [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext

    引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...

  8. 小程序 模态对话框自定义组件(modal)

    1. 概述 1.1 说明 小程序中使用wx.showModal(Object object)打开一个模态对话框,但是目前小程序所提供的modal中的内容显示比较死板,不能够完全满足工作中所遇到的功能信 ...

  9. 微信小程序封装storage(含错误处理)

    这次给你们安利的是微信小程序封装storage,先说下微信官方的 wx.getStorage({ key:"", success: function (res) { }, fail ...

随机推荐

  1. C#设计模式之0-简单工厂模式

    简单工厂模式(Simple Factory Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/387 访问 ...

  2. jquary常见问题总结

    如何调用本地json 1. 调用 <script src="solution.json?cb=readData"></script> 2. json 修改 ...

  3. 性能测试必备知识(11)- 怎么理解内存中的Buffer和Cache?

    做性能测试的必备知识系列,可以看下面链接的文章哦 https://www.cnblogs.com/poloyy/category/1806772.html 缓存 从 free 命令可以看到,缓存其实就 ...

  4. go语言gRPC系列(三) - 使用grpc-gateway同时提供HTTP和gRPC服务

    1. gRPC提供HTTP服务 1.1 存在的意义 1.2 代码示例 1.3 使用postman尝试调用 1.4 gRPC客户端代码调用 2. 使用grpc-gateway同时提供HTTP和gRPC服 ...

  5. 企业项目实战 .Net Core + Vue/Angular 分库分表日志系统 | 控制反转搭配简单业务

    教程预览 01 | 前言 02 | 简单的分库分表设计 03 | 控制反转搭配简单业务 说明 我们上一节已经成功通过 连接提供程序存储库,获取到了 连接提供程序,但是连接提供程序和数据库连接依赖太深, ...

  6. SpringCloude简记_part3

    18. SpringCloud Alibaba Sentinel实现熔断与限流 18.1 Sentiel 官网 https://github.com/alibaba/Sentinel 中文 https ...

  7. 极简 Node.js 入门 - 3.2 文件读取

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  8. 3 Spark 集群安装

    第3章 Spark集群安装 3.1 Spark安装地址 1.官网地址 http://spark.apache.org/ 2.文档查看地址 https://spark.apache.org/docs/2 ...

  9. 【转】python调用youtube-dl实现视频下载

    youtube-dl是一个命令行程序,用于从YouTube.com和更多网站下载视频.它需要Python解释器,版本2.6,2.7或3.2+,并且支持Unix,Windows或Mac OS X中运行. ...

  10. double与Double

    1. double是基本数据类型,Double是原始数据类型(Java 类) 2. double创建引用,Double创建对象 3. double不可以为NULL,Double是类所以其对象是可以为N ...