基于Vue2的 echarts X轴表格 开箱即用

在项目中遇到这么一个业务需求

跑去网上找资料发现这个大佬的非常好用

作者：风居住de街道
链接：juejin.cn/post/705438…

于是就借鉴其代码根据自己的业务需求和项目技术栈写了一个Vue版本的实现。

具体补充的功能有：

1. 自适应屏幕和数据显示范围。
2. 自动销毁实例，防止内存泄露。
3. 暴露loading方法给父组件调用提高用户体验。
4. 增加左侧类目的显示以及不同数据用不同颜色作区分。

快速使用

npm 方式

npm i vue2-chart-table

yarn 方式

yarn add vue2-chart-table

在 vue 项目的 main.js 文件中全局引入并安装

import vue2ChartTable from 'vue2-chart-table'
Vue.use(vue2ChartTable)

然后直接使用即可

<template>

    ...
    
    <!-- 
      传入 xData 和 xArr 的数据（用typescript来表示）
        interface xDataOption{
          name:string,
          list:Array<string | number>
        }
        xData:Array<xDataOption>    Y轴数据
        xArr:Array<string>          X轴数据
        chartLoading:boolean        控制是否显示加载中
    -->
    <vue2-chart-table :xArr="xArr" :xData="xData" :chartLoading="chartLoading" />
    
    ...
    
</template>

现阶段还没适配X轴超过10个字符，以及其他的超长数据显示，后续有业务需求则会进行补充。

如果对源码感兴趣的话可以直接去node_modules内找。