blog

Appearance

安装 ​

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

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

我目前的版本是3.5.3

image.png

创建项目 ​

taro init taro3-vue3-demo

image.png

pnpm i

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

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

image.png

查看到github官网https://github.com/NervJS/taro/issues/12281 将版本降低到3.5.2 果然就可以了,这几天taro官网出了3.5.4版本。

taro3 vue3 echarts ​

关于echarts在微信小程序中如何使用，官网这里有一个简单的说明 https://echarts.apache.org/handbook/zh/how-to/cross-platform/wechat-app/。 更多的详情可以查看github上的开源项目 https://github.com/ecomfe/echarts-for-weixin

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

复制ec-vancas到项目中 ​

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

image.png

当前页面引入 ​

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

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

当前组件中使用 ​

javascript
<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配置跟官网就没有区别了。 最终页面的展示效果如下

image.png

注意事项 ​

  • config/dev.js开启 production，会对代码进行压缩
  env: {
    NODE_ENV: '"production"'
  },
  • 微信小程序中设置

image.png

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