The applet draws a simple pie chart

Preface ： Recently, I was working on the completion of a small accounting program , Then there is a data analysis that wants to use a pie chart , It took a long time to finish , Make a note of ：
Be careful ： Download... First echarts.js This file stay github You can download
JS：

// 1、 Introduce dependency scripts 
import * as echarts from '../../ec-canvas/echarts.js'

var chart = null;

// 2、 Initialize data 
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、 Put the data in it 
    },
  },

})

JSON：

{
    
  "usingComponents": {
    
    "ec-canvas": "/ec-canvas/ec-canvas",
  },
  "navigationBarTitleText": " Statistics "
}

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;
    } 

design sketch ：

Be careful , If you have a good brother who needs to do a program graduation design project, you can contact me wx：fa664431710
You can also consult me if you have any questions , Ha ha ha , Make a friend ！