【全栈老魏】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