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