随记：Taro之小程序+echarts

echarts-taro3-react文档
npm依赖安装不适配 图表无法显示，文件下载可以放到components文件下；
将echarts.js里的{t.addEventListener.(e,n,i)}改为 {t.addEventListener?.(e,n,i)} 如不更改还是会发生不显示；

** 子组件 柱状图 EChartBar**

import { useEffect, useState, useRef } from 'react'
import { View, Canvas } from '@tarojs/components'
import { EChart } from '@/components/echarts-taro3-react'
import './index.less'

interface IProps {
  data?: number[],
  xAxis?: string[]
}
/**
 * 柱状图
 * @returns 
 */
const EChartBar: React.FC<IProps> = ({ data, xAxis }) => {
  let Chart: any;
  const option = {
    disableTouch: true, //解决ios系统，echarts长按不能滑动的问题
    grid: {
      top: '0',
      left: '3%',
      right: '6%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisTick: "none",
      axisLine: "none",
      axisLabel: "none",
      splitLine: "none",
      data: xAxis
    },
    yAxis: {
      type: 'value',
      max: 200,
      axisTick: "none",
      axisLine: "none",
      axisLabel: "none",
      splitLine: "none",
    },
    series: [
    {
      data: data,
      type: 'bar',
      xAxisIndex: 1,
      barWidth: 20,
      itemStyle: {
        barBorderRadius: [50, 50, 0, 0], // 柱条圆角
        color: {
          type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [{ offset: 0, color: '#D9E5FC' },
          { offset: 1, color: '#7CADF0' }],
          globalCoord: false
        },
      },
    }
    ]
  };
  const refresh = () => Chart.refresh(option)
  const setChart = (node) => Chart = node;
  useEffect(() => {
    refresh();
  }, [])
  return <EChart ref={setChart} canvasId='bar-chart' force-use-old-canvas={false} />
}
export default EChartBar;

父组件 index.tsx

import EChartBar from '@/components/echart-bar'
  <EChartBar item={data:[150, 100, 120],xaxis:['较高', '一般', '较低']}/>

小程序编译优化指南