v-charts

发表于 更新于 分类于 Waline：

Echarts是百度提供的一个用于在web端快速绘制图表的工具，它是通过js在canvas中进行图表的绘制，所以只要你的项目能够支持js，那就可以使用echarts。

Echarts有着丰富且详细的文档，可以让我们去定制自己喜欢的图表样式。但是这篇博客主要讲的是如何在vue项目中使用v-charts。

v-charts是对echarts的有一次封装，在保留了echart原有的所有设置的同时，可以让我们的代码风格更加接近vue，而不是像原生echarts一样完全是js代码。

但是在使用过程中我却遇到了一些问题，主要还是因为v-charts的文档有些模糊，这里记录一下遇到的问题。

首先给出二者的文档

Echarts文档， v-charts文档

三点配置项使用总述

对于v-charts的文档，我最疑惑的地方就是它是如何将echart中那么多的配置项结合起来的。在v-chart的文档的图表属性一节中只是简单地说明了它封装过的几个属性，其他所有的属性都是一笔带过，说我们可以去看echarts的文档，但是如何设置它没有封装的属性却没有说清楚，这里总结一下。

属性

所有图表都具有的属性，例如 width, events 等。

1
<ve-line :data="chartData" width="100px" :events="chartEvents"></ve-line>

基本属性

配置项简介类型默认值
data数据，参考文档object-
settings配置项object-
width宽度stringauto
height高度string400px
events事件绑定，参考文档object-
init-optionsinit 附加参数，参考文档object-
tooltip-visible是否显示提示框booleantrue
legend-visible是否显示图例booleantrue
theme自定义主题object-
theme-name自定义主题名称string-
judge-width是否处理生成图表时的宽度问题booleanfalse
width-change-delay容器宽度变化的延迟number300
resizeable是否处理窗口 resize 事件booleantrue
cancel-resize-check是否禁用 resize 时的容器检测booleanfalse
resize-delay窗口 resize 事件回调的延迟number200
change-delay属性修改触发图表重绘回调的延迟number0
set-option-optsecharts setOption 的第二个参数, 参考文档boolean objecttrue
not-set-unchange未发生变化时不参加 setOption 的属性array-
log在控制台打印内部生成的echarts optionsbooleanfalse

上面这些内容来自v-charts的文档，意思是这些属性都可以直接在组件上通过vue特有的双向绑定的方法进行设置。

需要注意的一点事，setting中具体可以设置什么内容也是v-charts封装好的，需要去查v-charts文档中对应的每个类型的图表，才能知道这种类型的图表可以设置什么属性。

extend 属性

为了能够更方便的设置属性配置项等，可以通过extend属性实现对已配置好的内部属性进行单独的设置， extend为对象类型，对象内的属性可以是函数，也可以对象，也可以是其他类型的值

  • 当属性为函数时，设置的是函数的返回值
  • 当属性为对象时，如果在options中对应的属性为对象(eg: tooltip)或包含对象的数组(eg: series)， 对应的配置会被合并，否则将直接覆盖对应的配置

具体使用方法可以参考属性配置示例

echarts options 属性

与echarts配置项对应的属性也被加到了组件上，用于直接覆盖options原有的对应属性，使用方式可参考文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
grid: [object, array],
colors: array,
visualMap: [object, array],
dataZoom: [object, array],
toolbox: [object, array],
title: object,
legend: [object, array],
xAxis: [object, array],
yAxis: [object, array],
radar: object,
tooltip: object,
axisPointer: object,
brush: [object, array],
geo: object,
timeline: [object, array],
graphic: [object, array],
series: [object, array],
backgroundColor: [object, string],
textStyle: object,
animation: object

如果某属性加上去之后没有生效，很可能是没有引入相应的模块，模块的位置可以参考此文件

这两部分的文档会给我们产生一个误导，就是我们可以给chart组件绑定一个extend，以及一个options，但其实不是这样的，这两部分中提到的所有属性都是通过“：extend”进行绑定的，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
<ve-line :extend="extend"></ve-line>

<script>
export default {
	data () {
		return {
			extend: {
				grid: [object, array]
			}
		}
	}
}
</script>

最后一点，也是隐藏的最深的一点，在echarts的文档中，有的属性既不是extend，也没有写在v-charts的setting文档中，这些就是echarts文档中series中规定的属性，比如折线图，echarts中有的属性是规定在这里，这些属性也是可以通过设置在settings.series中生效的。

几个例子

这里只展示两个在v-charts文档中无法直接找到的设置的例子，可以设置折线图的分割线样式，填充面样式以及柱状图的颜色渐变样式，熟练之后，结合v-charts，echarts的文档可以很快地配置各种属性。

line

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
lineChartSetting: {
        area: true,  // 填充折线下方
        scale: [true],
        lineStyle: {
          color: '#52B8DF'   //折线的颜色
        }
      },
      extend: {
        series: {
          symbol: 'none',  // 不显示这线上的拐点
          areaStyle: {  // 设置折线下方填充部分的样式为过渡色
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(82, 184, 223,0.4)'
                },
                {
                  offset: 1,
                  color: 'rgba(82, 184, 223,0.1)'
                }
              ],
              globalCoord: false
            }
          }
        },
        legend: {
          show: false  //不显示图例
        },
        tooltip: {
          show: true  // 鼠标悬停时不显示详细信息
        },
        yAxis: {  // y轴样式
          splitLine: {  //y轴分割线样式
            show: true,  // 显示分割线
            lineStyle: {
              color: ['rgba(82, 184, 223, 0.2)']  // 分割线颜色
            }
          },
          axisLabel: {
            color: '#52B8DF'  // y轴刻度的字体颜色
          }
        },
        xAxis: {
          axisLabel: {
            color: '#52B8DF'
          }
        }
      }

histogram

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
this.chartSettings = {
      metrics: ['访问用户', '下单用户'],
      dimension: ['日期'],
      itemStyle: {  // 柱状图柱体颜色渐变
        normal: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(3, 252, 173,0.5)' },
              { offset: 1, color: 'rgba(3, 252, 173,0.1)' }
            ]
          )
        }
      }
    };
    this.extend = {
      yAxis: {
        splitLine: {
          show: true,
          lineStyle: {
            color: ['rgba(255, 255, 255, 0.2)']
          }
        },
        axisLabel: {
          color: '#52B8DF'
        }
      },
      xAxis: {
        axisLabel: {
          color: '#52B8DF'
        }
      }
    };