隆重的给大家介绍一下 <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 插件在功能和稳定性上都有了显著提升,期待能为大家的项目开发带来更大的便利!
相关推荐
yqcoder4 分钟前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_8827275713 分钟前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
会发光的猪。1 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客1 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记1 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安2 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
红绿鲤鱼2 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
Domain-zhuo2 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
小丁爱养花2 小时前
前端三剑客(三):JavaScript
开发语言·前端·javascript
ZwaterZ2 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue