关于小程序: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>
    )
  }
}