【全栈老魏-前端】Vue3引入echarts

1.先上代码,直接用

1.1.全局引入方式echarts

//main.ts
import * as echarts from "echarts";

const app = createApp(App);

app.config.globalProperties.$echarts = echarts;

//你的vue文件
<template>
  <div ref="echartsRef" style="width: 600px; height: 400px"></div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, onMounted, onUnmounted, ref } from "vue";

const { proxy } = getCurrentInstance()!;

const echartsRef = ref();
onMounted(() => {
  if (!proxy) {
    console.log("无法获得组件实例");
    return;
  }
  const myChart = (proxy as any).$echarts.init(echartsRef.value);
  const option = {
    tooltip: {
      trigger: "item"
    },
    legend: {
      top: "5%",
      left: "center"
    },
    color: [
      "#ee6666",
      "#91cc75"
    ],
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2
        },
        label: {
          show: false,
          position: "center"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: "已完成" },
          { value: 735, name: "未完成" }
        ]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
});
</script>
<style scoped>

</style>

1.2在组件中引入echarts

<template>
  <div ref="echartsRef" style="width: 600px; height: 400px"></div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, onMounted, onUnmounted, ref } from "vue";

import * as echarts from "echarts";


const echartsRef = ref();
onMounted(() => {
  const myChart = echarts.init(echartsRef.value);
  const option = {
    tooltip: {
      trigger: "item"
    },
    legend: {
      top: "5%",
      left: "center"
    },
    color: [
      "#ee6666",
      "#91cc75"
    ],
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2
        },
        label: {
          show: false,
          position: "center"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: "已完成" },
          { value: 735, name: "未完成" }
        ]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
});
</script>
<style scoped>
</style>

2.全局引入方式，过程中遇到的问题

1.不显示图表

<!-- 在echarts挂载元素加上宽和高属性 -->
<div ref="echartsRef" style="width: 600px; height: 400px"></div>

2.Vue3如何拿到全局配置的属性

const { proxy, ctx } = getCurrentInstance()
//开发、生产环境可用
const myChart = (proxy as any).$echarts.init(echartsRef.value)
//开发环境可用
const myChart = (ctx as any).$echarts.init(echartsRef.value)

3.报错proxy 报红TS2339: Property proxy does not exist on type ComponentInternalInstance | null

//加上非空判断即可
//方式一：需要你保证返回值不会为null
const { proxy } = getCurrentInstance()!
//方式二：较为安全的方式
const instance = getCurrentInstance();
if (instance) {
  const { proxy } = instance;
  // 现在你可以安全地使用 proxy
} else {
  console.error("无法获取组件实例");
}

4.报错$echarts报红TS2339: Property $echarts does not exist on type

const { proxy, ctx } = getCurrentInstance()
//proxy 改为(proxy as any)
const myChart = (proxy as any).$echarts.init(echartsRef.value)

查考资料：

• Vue3中我是这样玩Echart的

• Vue3——getCurrentInstance、页面中route和router的获取方式

• Property ‘proxy‘ does not exist on type ‘ComponentInternalInstance | null‘.ts