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

前言：最近在做一个记账小程序的毕设，然后有一个数据分析想用饼图，弄了好久才弄好了，记录一下：
注意：要先下载 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
有什么问题也可以咨询我，哈哈哈，就当交个朋友！