V-Charts 一个简化配置项的新轮子

3,106 阅读4分钟
原文链接: zhuanlan.zhihu.com
文档:V-Charts,基于 Vue2 + ECharts 的图表组件

使用 ECharts 开发图表组件的时候,我们经常需要在数据和配置项的转化中来回折腾,简单的图表可能修改起来还可以接受,对于复杂的需求,每次对于图表的改动可能都会伤筋动骨。为了能将 ECharts 图表开发从繁琐的数据类型转化、修改复杂的配置项中解脱出来,我们基于 Vue2 和 ECharts 封装了 V-Charts 图表组件,只需要统一提供一种对前后端都友好的数据格式,然后设置简单的配置项,便可轻松生成常见的图表。我们具体是如何做到这一点的呢,请看下面的例子。

安装

npm i v-charts -S

开始上手

<template>
  <div>
    <ve-line :data="chartData" :settings="chartSettings"></ve-line>
  </div>
</template>

<script>
import VeLine from 'v-charts/lib/line'
export default {
  data () {
    return {
      chartData: {
        columns: ['日期', '余额', '比率'],
        rows: [
          { '日期': '1月1日', '余额': 123, '比率': 0.3 },
          { '日期': '1月2日', '余额': 1223, '比率': 0.6 },
          { '日期': '1月3日', '余额': 2123, '比率': 0.9 },
          { '日期': '1月4日', '余额': 4123, '比率': 0.12 },
          { '日期': '1月5日', '余额': 3123, '比率': 0.15 },
          { '日期': '1月6日', '余额': 7123, '比率': 0.20 }
        ]
      },
      chartSettings: {}
    }
  },

  components: { VeLine }
}
</script>

效果:

&amp;amp;amp;lt;img src="https://pic3.zhimg.com/v2-1b7040fec6d6445ca712f5022c10d5f6_b.png" data-rawwidth="514" data-rawheight="361" class="origin_image zh-lightbox-thumb" width="514" data-original="https://pic3.zhimg.com/v2-1b7040fec6d6445ca712f5022c10d5f6_r.png"&amp;amp;amp;gt;

V-Charts 所使用的数据格式正如上面的代码所展示,为了使配置项更加简洁,我们默认使用 columns 数组中的第1个值为维度,后面的值为指标。生成一个基本的折线图就是这么简单。不过似乎数据的展示不是很完美,比率型数据的趋势完全看不出来,更好的显示方式应该是将比率型数据放到不同的坐标轴,并增加百分号显示,想要做到这一点只要把 chartSettings 的内容修改为:

chartSettings: {
  axisSite: {
    right: ['比率']
  },
  yAxisType: ['normal', 'percent']
}

效果:

&amp;amp;amp;lt;img src="https://pic1.zhimg.com/v2-2b96b1a7b15bcef917abc417b157b818_b.png" data-rawwidth="519" data-rawheight="369" class="origin_image zh-lightbox-thumb" width="519" data-original="https://pic1.zhimg.com/v2-2b96b1a7b15bcef917abc417b157b818_r.png"&amp;amp;amp;gt;当然,可能你对图表的颜色有额外的想法,或者是隐藏提示框、图例等需求,只要在组件上添加相应的属性便可轻松实现。

当然,可能你对图表的颜色有额外的想法,或者是隐藏提示框、图例等需求,只要在组件上添加相应的属性便可轻松实现。
<ve-line
  :data="chartData"
  :colors="['#87a997', '#d49ea2', '#5b4947']"
  :legend-visible="false"
  :tooltip-visible="false"
  :settings="chartSettings">
</ve-line>

&amp;amp;amp;lt;img src="https://pic2.zhimg.com/v2-f88ddebb99f16dbb6119b7885c0db085_b.png" data-rawwidth="520" data-rawheight="334" class="origin_image zh-lightbox-thumb" width="520" data-original="https://pic2.zhimg.com/v2-f88ddebb99f16dbb6119b7885c0db085_r.png"&amp;amp;amp;gt;

关于属性

正如上面的示例代码所展示的,我们使用 data 属性表示图表的数据,使用 settings 用作图表的显示状态配置,settings 中所包含的是具体的图表配置,至于 colors、tooltip-visible 等所有图表都具有的配置,都被直接置于组件上,具体有哪些配置项,可以参考文档

也许,你对图表有一些其他需要自定义的需求,对此 V-Charts 提供了 after-config 钩子,可以直接修改内部生成的配置项内容,将所有的控制权交到你的手上。如果需要为图表绑定事件,也可以直接在 events 属性中操作。

总结

不同于 Justineo/vue-echarts ,V-Charts 通过直接封装 ECharts 配置项生成逻辑在组件内部,避免了开发者直接生成繁琐的配置项;并且,V-Charts 内部处理了Echarts 的打包问题,每种图表只引入对应的模块,保证了最后生成的代码体积为最小。

在日常的业务开发中,我们根据 E-Charts 常用的场景,支持了 8 种的图表和一些常用的配置。下一步,我们准备将更多地图表加入其中,同时优化配置项,为图表开发者提供更好的使用体验。