<template>
<div ref="echart" class="echart"></div>
</template>
<script>
import echarts from "echarts";
import "echarts/theme/shine";
export default {
data() {
// 直接写在return 里会不显示 tooltip
this.chart = null;
return {};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeUnmount() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
// 图表初始化
initChart() {
this.chart = echarts.init(this.$refs.echart, "shine");
this.setOptions();
},
// 设置图表
setOptions() {
this.chart.setOption({
title: {
text: "图表标题",
},
// 提示框组件 (全局)
tooltip: {
// 触发类型 : item 数据项图形触发(主要在散点图,饼图等无类目轴的图表中使用); axis 坐标轴触发(主要在柱状图,
如何在vue3中使用echarts
最新推荐文章于 2024-08-14 09:31:25 发布
本文详细介绍了在Vue3项目中集成Echarts的步骤,包括安装Echarts库,创建组件,实例化图表,以及如何在组件中动态更新数据,实现交互功能。同时,讨论了Vue3与Echarts的兼容性和优化技巧,帮助开发者高效地在Vue3应用中使用Echarts进行数据可视化。
摘要由CSDN通过智能技术生成