微信小程序Echarts—饼图

Echarts官方文档:http://www.echartsjs.com/examples/

在这里插入图片描述
Echars文件:

链接:https://pan.baidu.com/s/1NGKs4JKTPOiWjtrFpI6pDw 
提取码:472z 

wxml:

<ec-canvas id="mychart-dom-bar" class='mychart-bar' canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>

json:

"usingComponents": {
    "ec-canvas": "../../lib/ec-canvas/ec-canvas"
 }

js:

import * as echarts from '../../lib/ec-canvas/echarts';
const app = getApp();

Page({
  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      lazyLoad: false // 延迟加载
    }, //饼图
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function() {
    this.piechartsComponnet = this.selectComponent('#mychart-dom-bar'); //饼图
  },
  
  //初始化图表--饼图
  init_pieCharts: function() {
    this.piechartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      const pieChart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      pieChart.setOption(this.getPieOption());
      // 注意这里一定要返回 chart 实例,否则会影响事件处理等
      return pieChart;
    });
  },

  //饼图
  getPieOption: function() {
    var option = {
      tooltip: {
        show: true,
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      toolbox: {
        show: true,
        feature: {
          mark: {
            show: true
          },
          dataView: {
            show: true,
            readOnly: false
          },
          restore: {
            show: true
          },
          saveAsImage: {
            show: true
          }
        }
      },
      color: ['#56cbff', '#ff6300'],
      calculable: true,
      series: [{
        name: '分类',
        type: 'pie',
        center: ['50%', '50%'],
        radius: 80,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'inner',
              formatter: function(params) {
                return (params.percent - 0).toFixed(0) + '%'
              }
            },
            labelLine: {
              show: false
            }
          },
          emphasis: {
            label: {
              show: true,
              formatter: "{b}\n{d}%"
            }
          }
        },
        data: [{
            value: 99,
            name: 'A'
          },
          {
            value:1,
            name: 'B'
          }
        ]
      }]
    };
    return option;
  },
});
  • 1
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值