京东最新版taro3.5.4中使用vue3开发微信小程序的echarts图表

// 全局安装脚手架，后面创建项目方便
npm i -g @tarojs/cli
// 查看版本，确认安装是否成功
taro -v

taro init taro3-vue3-demo

pnpm i
pnpm dev:weapp  // 后面我把命令改为了start

module.exports = {
  navigationBarTextStyle: 'black',
  navigationBarTitleText: 'echarts地图示例',
  backgroundColor: '#eeeeee',
  backgroundTextStyle: 'light',
  usingComponents: {
    'ec-canvas': '../../components/ec-canvas/ec-canvas'
  }
}

<template>
  <view class="echarts">
    <ec-canvas id="chart-dom-area" canvas-id="chart-area" :ec="ec"></ec-canvas>
  </view>
</template>
<script lang="ts" setup>
  import { reactive } from 'vue'
  import * as echarts from '@/components/ec-canvas/echarts'
  import './index.scss'
  function initChart(canvas: any, width: any, height: any) {
    // echarts.init初始化
    const chart = echarts.init(canvas, null, {
      width,
      height
    })
    canvas.setChart(chart)
    const option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {}
        }
      ]
    }
    chart.setOption(option)
    return chart
  }
  const ec = reactive({
    onInit: initChart
  })
</script>

env: {
    NODE_ENV: '"production"'
  },