在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
一、问题描述: 在小程序的项目中,封装公共的饼图组件,并在需要的页面引入使用。要求一个页面中有多个饼图,动态渲染不同的数据。
二、效果实现: 1. 查看——小程序使用Echarts的方式 2. 封装饼图公共组件 // pie.wxml <view class="containers"> <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({
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方法里。
|
请发表评论