【全栈老魏-前端】Vue3引入echarts
Mast Sail 2024-07-25 11:33:01 阅读 88
1.先上代码,直接用
1.1.全局引入方式echarts
<code>//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>code>
</template>
<script lang="ts" setup>code>
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>code>
</template>
<script lang="ts" setup>code>
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>code>
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
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。