vue3 echarts全局引入(入门示例)
1 在项目中安装echarts依赖包
npm install echarts --save
2 main.ts全局引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import * as echarts from 'echarts';
const app = createApp(App);
app.config.globalProperties.$echarts = echarts
app.use(store)
.use(router)
.use(Antd)
.mount('#app')
3 写页面小示例
<template>
<div>
<div
ref="lineChart"
id="lineChart"
:style="{ width: '800px', height: '400px' }"
></div>
</div>
</template>
<script lang="ts" setup>
import { getCurrentInstance, reactive, ref, onMounted } from "vue";
// 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
let internalInstance: any = getCurrentInstance();
let echarts = internalInstance.appContext.config.globalProperties.$echarts;
onMounted(() => {
const dom = document.getElementById("lineChart");
console.log(dom);
const myChart = echarts.init(dom); // 初始化echarts实例
myChart.setOption({
title: {
text: "ECharts 入门示例",
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
// 设置实例参数
window.onresize = () => {
myChart.resize();
};
});
</script>