介绍
组件库基于vue,主要用于构建大屏(全屏)数据展示页面即数据可视化,具有多种类型组件可供使用: (使用文档 )
- 装饰器 (基于DataV ),详情可以点此链接
-
边框
带有不同边框的容器
-
装饰
用来点缀页面效果,增加视觉效果
-
图表
图表组件基于Charts封装,轻量,易用
-
其他
飞线图/水位图/轮播表/...
- echarts 图表的二次封装;echarts版本5.3.2, 不兼容4.x版本的写法 (echarts中文官方)(移动端可用)
效果预览地址 (有时会失效)
-
柱状图
-
饼状图
-
折线图
-
地图
3d地图/2d地图/散点地图/热力图/飞线图/行政图...
- echarts通用图表 采用echarts的全配置项
用前必看
长期维护,不断添加新组件以丰富组件库,组件主要分为echarts相关和装饰器两大类;
致谢
组件库的开发基于个人学习和兴趣,由于技术水平及经验的限制,组件尚有许多不完善之处,如有BUG可联系,也欢迎提供指正和建议,感谢各位的支持,邮箱: daiyuewen@gmail.com。
TODO
- 地图组件的完善
- 尺寸兼容性
- 文档详细化
- 组件压缩优化
安装
使用
由于动态尺寸变化的问题还没有解决,import XXX from 'ts-vue-echarts',调整为import XXXX from 'ts-vue-echarts/src/index'
// 方法一:将自动注册所有组件为全局组件
import {useEchartView, useEchart} from 'ts-vue-echarts/src/index'
Vue.use(useEchartView)
Vue.use(useEchart)
// 方法二:将自动注册所有组件为全局组件
import useVueEchart from 'ts-vue-echarts/src/index'
Vue.use(useVueEchart)
按需引入
按需引入仅支持基于ES module的tree shaking,按需引入示例如下:
import { tsVueBarStyle1 } from 'ts-vue-echarts'
Vue.use(tsVueBarStyle1)