隆重的给大家介绍一下 <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 插件在功能和稳定性上都有了显著提升,期待能为大家的项目开发带来更大的便利!
相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#