vue3+echarts4taro3的使用

1：抽成组件

<template>
  <e-chart ref="refNOde" canvas-id="bar-canvas" />
</template>
<script lang="ts" setup>
import { EChart } from "echarts4taro3"; //体积太大请查看README.md文档
import Taro from "@tarojs/taro";
import { shallowRef, watch } from "vue";
import "./echarts.scss";
const props = defineProps({
  option: {
    type: Object,
    default: {},
  },
});
const refNOde = shallowRef<Element | null>(null);
watch(
  () => props.option,
  () => {
    Taro.nextTick(() => {
      setTimeout(() => {
        refNOde.value?.refresh(props.option); // 初始化图表
      }, 200);
    });
  },
  { deep: true, immediate: true }
);
</script>

2：使用

    <template>
     <echarts :option="baseOption" />
    </template>
    <script lang="ts">
        import echarts from "@/components/echarts/echarts.vue";
         const baseOption = {
              tooltip: {
                trigger: "item",
              },
              legend: {
                orient: "vertical",
                left: "left",
                padding: 0,
                itemWidth: 15,
                itemHeight: 15,
                borderRadius: 30,
                textStyle: {
                  fontSize: 8,
                },
              },
              series: [
                {
                  type: "pie",
                  radius: ["5%", "70%"],
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                    position: "center",
                  },
                  labelLine: {
                    show: false,
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: "15",
                      fontWeight: "bold",
                    },
                  },
                  data: [
                    { value: 10, name: "北京" },
                    { value: 10, name: "广州" },
                    { value: 10, name: "上海" },
                    { value: 10, name: "深圳" },
                  ],
                },
              ],
            };
    </script>
    

注！，若占用的内存太大，则需要在echart官网，自定义charts.js，只导入需要的图标包，详细教程查看echarts4taro3的readme.md文档