前言

天天可视化，可视化...

虽然贵为cv工程师，但是复制来复制去工作量也没下来呀，这样下去不是个办法，于是我封装了一个库 base-echarts 并上传到了 npm。去年为此专门写了一篇文章简单介绍了一下《将我的BaseEcharts上传到npm》，文笔略显粗糙没啥阅读量，初代 base-echarts 功能有，但是代码不严谨，耦合度很高。

最近借着开工工作还未全面展开之际对版本做了一次升级。这篇文章介绍一下最新版本的 base-echarts，希望大家提提意见，还有一些问题需要完善 😀

正文

升级

setup函数改为语法糖形式

紧跟潮流使用setup语法糖，需要注意作为插件打包组件内需要有name名。

可以在组件内再写一个script标签

或使用第三方插件 unplugin-vue-define-options

使用ts做类型限制

使用ts，主要针对基本配置的关键字，更加严谨，大势所趋

拆分组件，使用hooks

1.0版本将主要逻辑都糅合在组件内，2.0 版本使用hooks将逻辑拆分，方便后期修改升级

新增点击返回信息

针对点击图表事件做了信息返回，可以在 BaseEcharts 组件上通过 @echartsClick 绑定事件接收

1.0版本后续增加了这个功能，当时欠考虑在插件内部做了限制和判断

2.0 版本直接将信息做了返回，可以自己根据需求拿取

优化图表自适应盒子宽高

当浏览器窗口改变后调用需要调用图表的 resize() 方法实现自适应，我们还经常遇到浏览器窗口不变，图表所在盒子宽高发生变化的情况，这时我们也需要调用图表的 resize() 方法

2.0 版本中优化了调用 resize() 方法循环遍历的骚操作, 只针对宽高发生变化的图表调用resize()

针对插件的使用做了更详细的解释

功能

自适应浏览器窗口
自适应盒子宽高
tooltip 支持轮播、鼠标悬停
支持图表点击事件获取对应信息

基本配置

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

options      图表基本配置

width        宽度 默认 100%

height       高度 默认 360px 

istool       是否允许tooltip自动轮播 默认 true

interval     tooltip 轮播时间间隔 默认 2000

loopSeries   true表示循环所有series的tooltip, false则显示指定 seriesIndex 的 tooltip

seriesIndex  默认为0，指定某个系列（option中的series索引）循环显示tooltip,当loopSeries为true时，
             从seriesIndex系列开始执行

使用

安装： npm install base-echarts

引用：

组件内引用：

import { BaseEcharts } from 'base-echarts'

全局挂载使用：

// main.js

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

基本配置：

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

点击获取信息

<script setup lang="ts">
  import { BaseEcharts } from "base-echarts";
  const getParam = (params) => {
    console.log(params)
  }
</script>
<template>
  <BaseEcharts :options="options" @echartsClick="getParam"></BaseEcharts>
</template>

封装升级！！！我的 base-echarts 2.0 版本来啦

前言

正文

升级