文档: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;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;gt;V-Charts 所使用的数据格式正如上面的代码所展示,为了使配置项更加简洁,我们默认使用 columns 数组中的第1个值为维度,后面的值为指标。生成一个基本的折线图就是这么简单。不过似乎数据的展示不是很完美,比率型数据的趋势完全看不出来,更好的显示方式应该是将比率型数据放到不同的坐标轴,并增加百分号显示,想要做到这一点只要把 chartSettings 的内容修改为:
chartSettings: {
axisSite: {
right: ['比率']
},
yAxisType: ['normal', 'percent']
}
效果:
&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;gt;当然,可能你对图表的颜色有额外的想法,或者是隐藏提示框、图例等需求,只要在组件上添加相应的属性便可轻松实现。
当然,可能你对图表的颜色有额外的想法,或者是隐藏提示框、图例等需求,只要在组件上添加相应的属性便可轻松实现。<ve-line
:data="chartData"
:colors="['#87a997', '#d49ea2', '#5b4947']"
:legend-visible="false"
:tooltip-visible="false"
:settings="chartSettings">
</ve-line>
&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;gt;
关于属性
正如上面的示例代码所展示的,我们使用 data 属性表示图表的数据,使用 settings 用作图表的显示状态配置,settings 中所包含的是具体的图表配置,至于 colors、tooltip-visible 等所有图表都具有的配置,都被直接置于组件上,具体有哪些配置项,可以参考文档。
也许,你对图表有一些其他需要自定义的需求,对此 V-Charts 提供了 after-config 钩子,可以直接修改内部生成的配置项内容,将所有的控制权交到你的手上。如果需要为图表绑定事件,也可以直接在 events 属性中操作。
总结
不同于 Justineo/vue-echarts ,V-Charts 通过直接封装 ECharts 配置项生成逻辑在组件内部,避免了开发者直接生成繁琐的配置项;并且,V-Charts 内部处理了Echarts 的打包问题,每种图表只引入对应的模块,保证了最后生成的代码体积为最小。
在日常的业务开发中,我们根据 E-Charts 常用的场景,支持了 8 种的图表和一些常用的配置。下一步,我们准备将更多地图表加入其中,同时优化配置项,为图表开发者提供更好的使用体验。