vue中使用v-charts

前段时间由于公司需要，产品临时安排任务，希望尽快出一个实时数据统计的图表，所以综合考虑就没有用echarts本身，而是使用了通过vue封装过的v-charts，希望能快速上手echarts,然后就有了这篇文章的实现过程。

相关文档

• vue官方文档
• v-charts官方文档
• echarts官方文档

界面效果图

接下来按照上图红框从左到右从上到下一一讲解：

框一、 环图占比

• 因为是用vue实现的，不希望所有内容都写在一个组件里，所以上图的五个红框分别代表五个子组件；
• 目录如下：

├── src                    源码目录  
│  ├── main.js             入口js文件
│  ├── app.json            全局配置
│  ├── components          组件目录
│  │  └── common           公共组件
          └── classfiyRing.vue   框5
          └── hHistogram.vue     框4
          └── hLine.vue          框2
          └── hMap.vue           框3
          └── hRing.vue          框1复制代码

• 环图组件内容：

复制代码

• v-charts官方文档提到两点：

1. extend 属性，为了能够更方便的设置属性配置项等，可以通过extend属性实现对已配置好的内部属性进行单独的设置；

2. echarts options 属性，与echarts配置项对应的属性也被加到了组件上，用于直接覆盖options原有的对应属性；

3. echarts options 属性如下：

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复制代码

• ve-ring组件相关配置项

1. settings，大家可以参考v-charts官方文档
2. data，大家可以参考v-charts官方文档
3. tooltip，大家可以参考echarts官方文档
4. extend，大家可以参考v-charts文档里的extend属性说明

• ve-ring组件内各属性值细节说明：

1. settings内label作用是为了隐藏视觉引导线；
2. settings内radius作用是为了设置环图外半径与内半径；
3. settings内offsetY作用是为了设置纵向偏移量使环图居中；
4. tooltip是为了设置鼠标hover时不触发提示框；
5. extend内legend作用是为了隐藏展现不同系列的标记；
6. extend内color作用是为了设置环图颜色；
7. props内text环图底部文字描述；
8. props内percentage表示环图中心百分比。

​

框二、折线图

• 折线图组件内容：

复制代码

• ve-line组件相关配置项

1. settings，大家可以参考v-charts官方文档
2. data，大家可以参考v-charts官方文档
3. extend，大家可以参考v-charts文档里的extend属性说明

• ve-line组件内各属性值细节说明：

1. settings内scale作用是为了坐标刻度不会强制包含零刻度；
2. extend内series的label作用是为了显示每个拐点数量；
3. extend内series的symbolSize作用是为了设置每个拐点小圆点的大小；
4. extend内series的color作用是为了设置折线的颜色；
5. extend内legend的作用是为了隐藏展现不同系列的标记；
6. extend内grid的作用是为了控制y轴密集程度；
7. extend内xAxis的作用是为了设置x轴字体、轴线样式；
8. extend内yAxis的作用是为了设置y轴字体、轴线样式；

​

框三、地图分布图

• 地图分布图组件内容：

复制代码

• ve-map组件相关配置项

1. settings，大家可以参考v-charts官方文档
2. data，大家可以参考v-charts官方文档
3. extend，大家可以参考v-charts文档里的extend属性说明

• ve-map组件内各属性值细节说明：

1. settings内position作用是设置为中国地图；
2. settings内itemStyle作用是设置地图区域的多边形 图形样式；
3. settings内label作用是设置地图各区域的描述；
4. settings内selectData作用是设置高亮显示数据对应位置；
5. settings内scaleLimit作用是设置滚轮缩放的极限控制；
6. settings内roam作用是设置开启鼠标缩放和平移漫游；
7. extend内legend作用是为了隐藏展现不同系列的标记；
8. extend内visualMap作用是为了设置左下角的视觉映射组件。

为ve-map组件添加geo、series属性可设置涟漪特效动画，如下图：

​

实现涟漪特效动画的关键代码如下： （感兴趣的可以自己实现，本来项目也需要做这个动画，但是当和区域地图结合的时候两者不能同时显示，目前还没有找到最佳方法，所以项目中舍弃了动画）

"app">
    "chartTooltip" :settings="chartSettings" :geo="chartGeo" :series="chartSeries" :data="chartData">

复制代码

框四、柱状图

• 柱状图组件内容：

复制代码

• ve-histogram组件相关配置项

1. data，大家可以参考v-charts官方文档
2. extend，大家可以参考v-charts文档里的extend属性说明

• ve-histogram组件内各属性值细节说明：

1. extend内legend作用是为了隐藏展现不同系列的标记；
2. extend内grid的作用是为了控制x、y轴密集程度；
3. extend内xAxis的作用是为了设置x轴字体、轴线样式；
4. extend内yAxis的作用是为了设置y轴字体、轴线样式；
5. extend内series的作用是为了柱状条样式。

​

框五、环图占比二

• 环图组件内容：

复制代码

• ve-ring组件相关配置项

1. settings，大家可以参考v-charts官方文档
2. data，大家可以参考v-charts官方文档
3. extend，大家可以参考v-charts文档里的extend属性说明

• ve-ring组件内各属性值细节说明：

1. settings内radius作用是为了设置环图外半径与内半径；
2. settings内offsetY作用是为了设置纵向偏移量使环图居中；
3. settings内labelLine作用是为了设置视觉引导线样式；
4. settings内label作用是为了重组视觉引导线上的文字描述；
5. extend内legend作用是为了隐藏展现不同系列的标记。

​

结语

其实在做项目之前，本人是没有用过echarts的，就项目本身而言是有些畏惧的，怕做不好。但通过自己的摸索，尽可能达到产品需要的效果，这也是我希望做到的。最后的效果除了地图有点差强人意，其他基本都正常实现了，后面有时间再好好研究下地图涟漪动画的实现。之所以写这个文章，一是为了帮助那些没用过又需要上手echarts的朋友；二是为了记录自己的学习过程。读到这里，如果觉得本文对你有所启发或帮助，请动动你们的手指，点个赞吧！

转载于:https://juejin.im/post/5d006dec6fb9a07eac05cb74