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

前言

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

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

使用方式

安装: npm install base-echarts

引用:

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

  1. 组件内引用: 在需要使用图表的组件中引入:
javascript 复制代码
import { BaseEcharts } from 'base-echarts'
  1. 全局挂载 : 如果希望在全局使用,可以在 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,可以使用 onMountednextTick

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

结语

通过这些优化和修复,base-echarts 插件在功能和稳定性上都有了显著提升,期待能为大家的项目开发带来更大的便利!
相关推荐
lvbb663 分钟前
框架修改思路
前端·javascript·vue.js
树上有只程序猿6 分钟前
Java程序员需要掌握的技术
前端
从零开始学安卓9 分钟前
Kotlin(三) 协程
前端
阿镇吃橙子12 分钟前
一些手写及业务场景处理问题汇总
前端·算法·面试
庸俗今天不摸鱼13 分钟前
【万字总结】前端全方位性能优化指南(九)——FSP(First Screen Paint)像素级分析、RUM+合成监控、Lighthouse CI
前端·性能优化
逆袭的小黄鸭13 分钟前
JavaScript:作用域与作用域链的底层逻辑
前端·javascript·面试
用户261245834016114 分钟前
vue2实现滚动条自动滚动
前端
傻球22 分钟前
Jotai 使用详解:React 轻量级状态管理库
前端·react.js
Json_23 分钟前
Vue 构造器 Vue.extend
前端·vue.js·深度学习