search

haitaodesign / vue-cli-base

基于Vue CLI 的企业级快速初始化项目模板
5 stars 1 forks source link

[New Feature] 数据可视化方案 #8

Open haitaodesign opened 5 years ago

haitaodesign commented 5 years ago
  1. 目前开源解决方案调研
  2. 确认当前模板使用的可视化库
  3. 规范常见图表类型的数据格式
  4. 基于社区方案，封装适合业务的数据可视化组件
haitaodesign commented 5 years ago

开源图表库

  1. Echarts ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表

  2. G2 G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。

  3. highcharts 兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库

  4. chartjs 为设计人员和开发人员提供简单而灵活的JavaScrip图表

  5. D3.js D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

    基于以上图表库封装的Vue图表组件

  6. vue-echarts 基于Echarts的Vue图表组件，由Echarts官方团队维护

  7. v-charts 基于 Vue2.0 和 ECharts 封装的图表组件，由ElemeFE官方团队维护

  8. vue-highcharts 基于highcharts的Vue图表组件，由国内的个人维护，目前公司产品所使用的Vue图表组件

  9. vue-chartjs vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components.

    总结

    以上图表库都是笔者接触或者开始中使用过的一些库，社区贡献比较活跃，都是由大团队维护，可以放心使用。

G2和D3.js社区内暂时没有基于Vue.js的二次封装，这两个库的学习成本相对其他库来说是比较高的，用户群的比例不是很高，但是对于自定义化要求比较高的产品可以根据团队的技术栈以及技术能力适当的引入。

为了提高团队开发效率，减少维护成本，选择基于v-charts的图表库，团队使用的组件库是element-ui，是比较好用的产品，对于其v-charts也是比较倾向的，重点是解决了使用echarts生成图表时，要频繁的转换数据类型，以及更改复杂的配置项数据的痛点。

haitaodesign commented 4 years ago

可视化组件封装参考

  1. vue-bizcharts
  2. Bizcharts