小程序绘制一个简单的饼图

前言：最近在做一个记账小程序的毕设，然后有一个数据分析想用饼图，弄了好久才弄好了，记录一下：
注意：要先下载 echarts.js 这个文件 在github中可以下载
JS：

// 1、引入依赖脚本
import * as echarts from '../../ec-canvas/echarts.js'

var chart = null;

// 2、进行初始化数据
function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    title: {
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      bottom: 10,
      left: 'center',
      data: ['CityA', 'CityB', 'CityD', 'CityC', 'CityE']
    },
    series: [
      {
        type: 'pie',
        radius: '65%',
        center: ['50%', '50%'],
        selectedMode: 'single',
        data: [
          {value: 1548,name: 'CityE',},
          { value: 735, name: 'CityC' },
          { value: 510, name: 'CityD' },
          { value: 434, name: 'CityB' },
          { value: 335, name: 'CityA' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  chart.setOption(option);
  return chart;
}


Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ec1: {
      onInit: initChart // 3、将数据放入到里面
    },
  },

})

JSON：

{
  "usingComponents": {
    "ec-canvas": "/ec-canvas/ec-canvas",
  },
  "navigationBarTitleText": "统计"
}

WXML：

<view class="box">
    <ec-canvas
      id="mychart-dom-bar"
      canvas-id="mychart-bar"
      ec="{{ ec1 }}"
    ></ec-canvas>
  </view>

WXSS：

 .box {
        width:100%;
        height:600rpx;
        // position: absolute;
        margin-top: 30;
        font-size: 42rpx;
        font-weight: bold;
    } 

效果图：

注意，有好兄弟需要做程序毕业设计项目的可以联系我wx：fa664431710
有什么问题也可以咨询我，哈哈哈，就当交个朋友！