关于小程序:Taro-30Echarts-编译成微信小程序

1、创立Taro我的项目
IDE：VSCode
环境：node>=12.0.0
装置Taro，参照官网 Taro装置及应用

• npm install -g @tarojs/cli（装置Taro）
• taro init myApp（创立Taro我的项目）
• npm run dev:weapp（编译成微信小程序）
• 关上微信开发者工具，预览该我的项目

2、援用Echarts

• 下载echarts-for-weixin我的项目中的ec-canvas到我的项目中
• 也能够在echarts里定制须要的图表替换ec-canvas里的echarts.js

3、我的项目构造&成果预览

4、pie.js代码示例

import React, { Component } from "react";
import { View } from "@tarojs/components";
import "./pie.scss";
import * as echarts from "../../components/ec-canvas/echarts";

let pieDataA = null;
export default class PieIndex extends Component {

  constructor(props) {
    super(props)
    this.state = {
      ec: {
        onInit: function (canvas, width, height) {
          pieDataA = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          canvas.setChart(pieDataA);
          return pieDataA;
        }
      }
    }
  }

  componentWillMount() {
    let dataA = ['A', 'B', 'C', 'D'];

    let dataValA = [
      { value: 1548, name: 'A' },
      { value: 535, name: 'B' },
      { value: 510, name: 'C' },
      { value: 634, name: 'D' }
    ];

    setTimeout(() => {
      pieDataA.setOption(this.getOption(dataA, dataValA));
    }, 100);

  }

  getOption(data, dataVal) {
    let option = {
      animation: false,
      tooltip: {
        trigger: 'item',
        formatter: '{c} ({d}%)'
      },
      legend: {
        // bottom: 0,
        left: 'center',
        data: data
      },
      color: ['#3AA1FF', '#36CBCB', '#E91D63', '#4ECB73'],
      series: [
        {
          type: 'pie',
          radius: '65%',
          center: ['50%', '50%'],
          data: dataVal
        }
      ]
    };
    return option;
  }


  render() {
    return (
      <View className='list'>
        <View className='mychart-con'>
          <ec-canvas ec={this.state.ec}></ec-canvas>
        </View>
      </View>
    )
  }
}