隆重的给大家介绍一下 <BaseEcharts/>

前言

在之前的文章中，我介绍了自己封装的 base-echarts 插件。感谢大家的反馈，我在使用过程中发现了一些问题并进行了修复。经过最近的版本更新，尤其是关于tooltip跳动错乱的bug修复，我可以确认插件短期内不会有重大变动，大家可以放心使用。

本篇文章将重述最新版本的使用方法，以及它在项目开发中带来的巨大便利性

使用方式

安装： npm install base-echarts

引用：

有两种方式可以引入 base-echarts：

1. 组件内引用： 在需要使用图表的组件中引入：

import { BaseEcharts } from 'base-echarts'

2. 全局挂载 ： 如果希望在全局使用，可以在 main.js 中进行挂载：

// main.js

import { install } from 'base-echarts'
app.use(install)

基本配置：

使用 <BaseEcharts /> 组件时，可以传递多个配置项，以下是基本的配置示例：

<BaseEcharts
  :options="options"
  :width="width"
  :height="height"
  :istool="true"
  :interval="2000"
  :loopSeries="true"
  :seriesIndex="0"
  :isCache="false">
</BaseEcharts>

事件调用

插件内置了所有 ECharts 的鼠标交互事件，可以直接使用。例如，可以监听点击事件：

echarts.value.onClick(e => {
  console.log(e);
});

此外，其他属性或事件可以通过实例对象 echartsInstance() 调用。例如，清除图表：

echarts.value.echartsInstance().clear();

完整代码示例

确保在 DOM 元素渲染完成后调用 ref，可以使用 onMounted 或 nextTick：

<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 依然存在定时器没有清除的问题。为此，我在封装过程中增加了一步判断，确保在数据变化时清理掉旧的轮播。如果你也在使用这个插件，可以参考我的解决方案。

结语

通过这些优化和修复，base-echarts 插件在功能和稳定性上都有了显著提升，期待能为大家的项目开发带来更大的便利！