v-charts

由于工做须要，使用v-chart也有一段时间了，期间针对配置图表也遇到了很多问题，在这里总结一下。

如何配置图表信息

echart的配置项可谓是至关的海量，能不看就不看。而v-chart对其进行了很多的简化，因此咱们想要自定义一个图表时，最好按照如下步骤来检查：

图表私有属性

v-chart每个图表都有本身独有的设置项，想要配置这些项须要在组件上加入 :setting="chartSettings"，而后在vue组建的data里设置chartSettings的值，以下:

<template> <ve-line :data="chartData" :settings="chartSettings"></ve-line> </template> <script> export default { data () { this.chartSettings = { xAxisType: 'time' } return { chartData: { columns: ['日期', '访问用户'], rows: [ { '日期': '2018-01-01', '访问用户': 1393 }, { '日期': '2018-01-02', '访问用户': 3530 }, { '日期': '2018-01-03', '访问用户': 2923 } ] } } } } </script> 

图表公有属性

v-chart全部图表组件中共有的属性，直接在图标组件上挂载:属性名称="属性值"便可设置，下面是一些比较经常使用的

名称	类型	默认值	介绍
data	Object	无	图表的显示数据
setting	Object	无	图表的私有属性
height	String	400px	高度
width	String	auto	宽度，默认根据高度自动适配
tooltip-visible	boolean	true	是否显示提示框
legend-visible	boolean	true	是否显示图例
extend	Object	无	设置echart的详细属性

公共属性上最重要的能够说就是extend属性了，在vchart的公共属性里extend竟然不在基本属性了，而是放在文档后面专门开了一段讲。当时为了找到这个属性能够说是废了老半天功夫。若是你在前二者中都没有找到想要的设置项，那就能够经过这个属性来设置echart的配置，毕竟是基于echart的嘛，因此echart的全部配置在这里均可以适用，下边是配置示例：

<template> <ve-histogram :data="chartData" :extend="chartExtend"></ve-histogram> </template> <script> export default { data () { this.chartExtend = { series: { barWidth: 10 }, tooltip: { trigger: 'none' } } /* 等同于 this.chartExtend = { series (v) { v.forEach(i => { i.barWidth = 10 }) return v }, tooltip (v) { v.trigger = 'none' return v } } 等同于 this.chartExtend = { 'series.0.barWidth': 10, 'series.1.barWidth': 10, 'tooltip.trigger': 'none' } */ return { chartData: { ... } } } } </script> 

Echart配置项

接下来就是重头戏了，若是你在前二者里都没有找到，那就只能从echart的配置项里找了，下面是一些目前比较经常使用的配置项

名称	类型	介绍
legend	Object	用于控制图表的图例组件，包括位置、样式、类型、图标等
series	Object	每一个图表的专属设置项，用于控制图表的详细样式位置等

其中series的属性就能够完成绝大多数配置了，下边是一个配置示例 实现的效果为：

• 图例位于图表右方，且距右边缘20px
• 图例颜色#A0A0A0，字体12px
• 环图中心相对于左上角距离112px, s92px
• 隐藏环图上的文本标签和引导线
• 环图内半径55px与外半径72px

//template <ve-ring :settings="chartSetting" legend-position="right" :extend="chartExtend"></ve-ring> ... //script data () { return { chartExtend: { series: { center: [112, 92] }, legend: { right: 20, textStyle: { color: '#A0A0A0', fontSize: 12 } } } chartSetting: { label: { show: false }, labelLine: { show: false }, radius: [55, 72] } } }