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

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情。

大家好，我是 那个曾经的少年回来了。10年前我也曾经年轻过，如今已步入被淘汰的年龄，但如下幡然醒悟，所以活在当下，每天努力一点点，来看看2024年的时候自己会是什么样子吧，2024年的前端又会是什么样子，而2024年的中国乃至全球又会变成什么样子，如果你也有想法，那还不赶紧行动起来。期待是美好的，但是更重要的是要为美好而为之奋斗付诸于行动。

本文所涉及到的所有源码已开源： github.com/aehyok/taro…

1、安装

// 全局安装脚手架，后面创建项目方便
npm i -g @tarojs/cli

// 查看版本，确认安装是否成功
taro -v

我目前的版本是3.5.4,前几天写文章的时候用的是3.5.3.

2、创建项目

taro init taro3-vue3-demo

pnpm i

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

然后在微信开发者工具中打开dist会报如下错误

查看到github官网github.com/NervJS/taro… 前几天使用的3.5.3版本，是有这个bug的，将版本降低到3.5.2 果然就可以了。这几天taro官网出了3.5.4版本,也是没问题了。

3、taro3 vue3 echarts

关于echarts在微信小程序中如何使用，官网这里有一个简单的说明 echarts.apache.org/handbook/zh…。更多的详情可以查看github上的开源项目 github.com/ecomfe/echa…

通过梳理和尝试，终于在微信小程序中可以使用echarts了。

4、复制ec-vancas到项目中

首先我把echarts-for-weixin开源项目下载了下来，然后把 ec-canvas 整个文件夹拷贝到项目的 src/components下，目录如下所示

5、当前页面引入

在当前页面的index.config.ts文件中添加 usingComponents,引入echarts组件，也就是我们复制到components的组件

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

6、当前组件中使用

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

里面最重要的就是绑定 ec.onInit,然后剩下的echarts配置跟官网就没有区别了。

7、效果

最终页面的展示效果如下

8、注意事项

config/dev.js开启 production，会对代码进行压缩

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

微信小程序中设置

还可以通过微信小程序的分包来处理上传文件过大的问题

9、总结

有理由相信taro会越来越好吧，taro的体验性还是非常不错，接近使用vue3开发pc端和h5端，还能开发其他夸端的小程序，以及支持鸿蒙，不过我主要尝试的是微信小程序了。本文所涉及到的所有源码已开源： github.com/aehyok/taro… 。

我的个人博客：vue.tuokecat.com/blog

我的个人github：github.com/aehyok

我的前端项目：pnpm + monorepo + qiankun + vue3 + vite3 + 工具库、组件库 + 工程化 + 自动化
不断完善中,整体框架都有了
在线预览：vue.tuokecat.com
github源码：github.com/aehyok/vue-…