前言
在之前的文章中,我介绍了自己封装的 base-echarts
插件。感谢大家的反馈,我在使用过程中发现了一些问题并进行了修复。经过最近的版本更新,尤其是关于tooltip跳动错乱的bug修复,我可以确认插件短期内不会有重大变动,大家可以放心使用。
本篇文章将重述最新版本的使用方法,以及它在项目开发中带来的巨大便利性
使用方式
安装: npm install base-echarts
引用:
有两种方式可以引入 base-echarts
:
- 组件内引用: 在需要使用图表的组件中引入:
javascript
import { BaseEcharts } from 'base-echarts'
- 全局挂载 : 如果希望在全局使用,可以在
main.js
中进行挂载:
javascript
// main.js
import { install } from 'base-echarts'
app.use(install)
基本配置:
使用 <BaseEcharts />
组件时,可以传递多个配置项,以下是基本的配置示例:
ini
<BaseEcharts
:options="options"
:width="width"
:height="height"
:istool="true"
:interval="2000"
:loopSeries="true"
:seriesIndex="0"
:isCache="false">
</BaseEcharts>
事件调用
插件内置了所有 ECharts 的鼠标交互事件,可以直接使用。例如,可以监听点击事件:
ini
echarts.value.onClick(e => {
console.log(e);
});
此外,其他属性或事件可以通过实例对象 echartsInstance()
调用。例如,清除图表:
scss
echarts.value.echartsInstance().clear();
完整代码示例
确保在 DOM 元素渲染完成后调用 ref
,可以使用 onMounted
或 nextTick
:
xml
<script setup lang="ts">
import { BaseEcharts } from "base-echarts";
import { onMounted, ref } from "vue";
let echarts = ref(null);
onMounted(() => {
// 点击事件直接调用(仅限鼠标交互事件)
echarts.value.onClick(e => {
console.log(e);
});
// 通过 echartsInstance() 实例对象调用(所有 ECharts 内置方法)
echarts.value.echartsInstance().on('click', function (e) {
console.log(e);
});
});
</script>
<template>
<BaseEcharts :options="options" ref="echarts"></BaseEcharts>
</template>
具体应用
在项目的排版上,我们可以将每个
<BaseEcharts/>
组件视作一个独立的 div 盒子进行布局。组件默认宽高为100%,如果不想使用外层 div 来进行布局,也可以直接为组件指定宽高。
最新版本修复的bug:
最近,解决了图表数据变化后 tooltip 跳动错乱的问题。使用 tooltip-auto-show-vue
插件时,可能会导致旧的 tooltip 依然存在定时器没有清除的问题。为此,我在封装过程中增加了一步判断,确保在数据变化时清理掉旧的轮播。如果你也在使用这个插件,可以参考我的解决方案。