• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

【小程序】----封装Echarts公共组件,遍历图表实现多个饼图

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、问题描述:

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

 

二、效果实现:

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({
// 接收页面传递过来的 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方法里。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap