taro react 图表开发

使用的插件 echarts-taro3-react
npm install echarts-taro3-react

文档
demo：

// 柱状图
import Taro from '@tarojs/taro'
import React, { Component } from "react";
import { View, Image, ScrollView } from '@tarojs/components'
import EChart from "echarts-taro3-react/lib/echart";
import "./todayFindStore.less";
export default class TodayFindStore extends Component {
  state = {
    pieChart: null,
    chartData: [
	  { value: 27, name:'餐饮美食', city_id: '257' },
	  { value: 10, name:'美容美发', city_id: '257' },
	  { value: 4, name:'服装鞋包', city_id: '257' },
	  { value: 8, name:'休闲娱乐', city_id: '257' },
	  { value: 12, name:'超市百货', city_id: '257' },
	  { value: 8, name:'生活服务', city_id: '257' },
	  { value: 6, name:'汽修美容', city_id: '257' },
	  { value: 4, name:'医疗保健', city_id: '257' },
	  { value: 6, name:'教育培训', city_id: '257' },
	  { value: 5, name:'酒店宾馆', city_id: '257' },
	  { value: 8, name:'其他', city_id: '257' },
	  { value: 1, name:'家具建材', city_id: '257' },
	  { value: 1, name:'电器通讯', city_id: '257' }
	]
  }
  componentDidMount() {
    this.getTodayCount()
  }
  getTodayCount = async () => {
    
    const defautOption = {
      color: ['#71ae46', '#96b744', '#c4cc38', '#ebe12a', '#eab026', '#e3852b', '#d85d2a', '#ce2626', '#ac2026', '#71ae46', '#96b744', '#c4cc38', '#63b2ee'],
      title: {
        text: "标题",
        left: "center",
      },
      series: [
        {
          type: "pie",
          radius: "50%",
          center: ["50%", "40%"],
          label: {
            formatter: '{b}:\n {d}%'
          },
          data: this.state.chartData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    this.state.pieChart.refresh(defautOption);
  }
  // 获取城市名
  refpieChart = (node) => (this.state.pieChart = node);

  render() {
    const { chooseCity, cityList, cityIndex } = this.state
    return (
        <View className="chart">
          <EChart ref={this.refpieChart} canvasId='bar-canvas' />
        </View>
    );
  }
}

其余插件可看taro物料集合
物料

最重要的： 添加样式 否则图标不显示

 .chart {
   margin-top: 20vh;
   width: 100%;
   height: 64vh;
 }