echarts在vue3中的使用(全局使用和按需使用)
echarts官方链接全局使用main.ts的代码中:import { createApp } from 'vue';import App from './App.vue';import * as echarts from 'echarts';//引入echartsconst app = createApp(App);app.config.globalProperties.$echarts = e
·
全局使用
main.ts的代码中:
import { createApp } from 'vue';
import App from './App.vue';
import * as echarts from 'echarts';//引入echarts
const app = createApp(App);
app.config.globalProperties.$echarts = echarts;//全局使用
router.isReady().then(() => {
app.mount('#app');
});
组件中使用:
import { getCurrentInstance } from "vue";
- 实例化(变量名一定得是proxy)
const { proxy } = getCurrentInstance() as any;
- 完整代码
<script lang="ts">
import { defineComponent, nextTick, onMounted, getCurrentInstance } from "vue";
export default defineComponent({
name: "userSetting",
setup() {
const { proxy } = getCurrentInstance() as any;
onMounted(() => {
const option = {
title: {
text: userName + "的回复统计",
},
tooltip: {
trigger: "axis",
},
legend: {
data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
yAxis: {
type: "value",
},
series: [
{
name: "邮件营销",
type: "line",
stack: "总量",
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: "联盟广告",
type: "line",
stack: "总量",
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: "视频广告",
type: "line",
stack: "总量",
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: "直接访问",
type: "line",
stack: "总量",
data: [320, 332, 301, 334, 390, 330, 320],
},
{
name: "搜索引擎",
type: "line",
stack: "总量",
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
};
nextTick(() => {
const chartDom = <HTMLElement>document.getElementById("main");
const myChart = proxy.$echarts.init(chartDom);
myChart.setOption(option);
window.onresize = function () {
myChart.resize();
};
});
});
return {
userName,
};
},
});
</script>
按需使用
打开官网中的示例,选择你所需要的,点击之后会有完整代码,直接copy就可以了
注意点:
一定要给获取的DOM元素添加它的高宽,不然不会在页面中显示
由于在onMounted生命周期之前,组件未挂载完成,这时候使用document.getElementById的时候是个null值,会报错,所以要在onMounted这个生命周期中使用,或者用nextTick,个人推荐nextTick,因为它能够保证整个视图已经渲染完毕
更多推荐
已为社区贡献1条内容
所有评论(0)