前段时间由于公司需要，产品临时安排任务，希望尽快出一个实时数据统计的图表，所以综合考虑就没有用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复制代码
- 环图组件内容：
复制代码{ {percentage}} {
{text}}
- v-charts官方文档提到两点：
- ，为了能够更方便的设置属性配置项等，可以通过extend属性实现对已配置好的内部属性进行单独的设置；
，与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组件相关配置项
- settings，大家可以参考
- data，大家可以参考
- tooltip，大家可以参考
- extend，大家可以参考v-charts文档里的
- ve-ring组件内各属性值细节说明：
- settings内label作用是为了隐藏视觉引导线；
- settings内radius作用是为了设置环图外半径与内半径；
- settings内offsetY作用是为了设置纵向偏移量使环图居中；
- tooltip是为了设置鼠标hover时不触发提示框；
- extend内legend作用是为了隐藏展现不同系列的标记；
- extend内color作用是为了设置环图颜色；
- props内text环图底部文字描述；
- props内percentage表示环图中心百分比。
框二、折线图
折线图组件内容：
复制代码
- ve-line组件相关配置项
- settings，大家可以参考
- data，大家可以参考
- extend，大家可以参考v-charts文档里的
- ve-line组件内各属性值细节说明：
- settings内scale作用是为了坐标刻度不会强制包含零刻度；
- extend内series的label作用是为了显示每个拐点数量；
- extend内series的symbolSize作用是为了设置每个拐点小圆点的大小；
- extend内series的color作用是为了设置折线的颜色；
- extend内legend的作用是为了隐藏展现不同系列的标记；
- extend内grid的作用是为了控制y轴密集程度；
- extend内xAxis的作用是为了设置x轴字体、轴线样式；
- extend内yAxis的作用是为了设置y轴字体、轴线样式；
框三、地图分布图
- 地图分布图组件内容：
复制代码
- ve-map组件相关配置项
- settings，大家可以参考
- data，大家可以参考
- extend，大家可以参考v-charts文档里的
- ve-map组件内各属性值细节说明：
- settings内position作用是设置为中国地图；
- settings内itemStyle作用是设置地图区域的多边形 图形样式；
- settings内label作用是设置地图各区域的描述；
- settings内selectData作用是设置高亮显示数据对应位置；
- settings内scaleLimit作用是设置滚轮缩放的极限控制；
- settings内roam作用是设置开启鼠标缩放和平移漫游；
- extend内legend作用是为了隐藏展现不同系列的标记；
- extend内visualMap作用是为了设置左下角的视觉映射组件。
为ve-map组件添加geo、series属性可设置涟漪特效动画，如下图：
实现涟漪特效动画的关键代码如下： （感兴趣的可以自己实现，本来项目也需要做这个动画，但是当和区域地图结合的时候两者不能同时显示，目前还没有找到最佳方法，所以项目中舍弃了动画）
复制代码
框四、柱状图
- 柱状图组件内容：
复制代码
- { {item.name}}
- ve-histogram组件相关配置项
- data，大家可以参考
- extend，大家可以参考v-charts文档里的
- ve-histogram组件内各属性值细节说明：
- extend内legend作用是为了隐藏展现不同系列的标记；
- extend内grid的作用是为了控制x、y轴密集程度；
- extend内xAxis的作用是为了设置x轴字体、轴线样式；
- extend内yAxis的作用是为了设置y轴字体、轴线样式；
- extend内series的作用是为了柱状条样式。
框五、环图占比二
- 环图组件内容：
复制代码
- ve-ring组件相关配置项
- settings，大家可以参考
- data，大家可以参考
- extend，大家可以参考v-charts文档里的
- ve-ring组件内各属性值细节说明：
- settings内radius作用是为了设置环图外半径与内半径；
- settings内offsetY作用是为了设置纵向偏移量使环图居中；
- settings内labelLine作用是为了设置视觉引导线样式；
- settings内label作用是为了重组视觉引导线上的文字描述；
- extend内legend作用是为了隐藏展现不同系列的标记。
结语
其实在做项目之前，本人是没有用过echarts的，就项目本身而言是有些畏惧的，怕做不好。但通过自己的摸索，尽可能达到产品需要的效果，这也是我希望做到的。最后的效果除了地图有点差强人意，其他基本都正常实现了，后面有时间再好好研究下地图涟漪动画的实现。之所以写这个文章，一是为了帮助那些没用过又需要上手echarts的朋友；二是为了记录自己的学习过程。读到这里，如果觉得本文对你有所启发或帮助，请动动你们的手指，点个赞吧！