前言

    最近项目前端使用v-chars比较多，遇到一些需求和问题，在此留个笔记

v-charts    

    v-charts是基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，介绍在v-charts官网上都有，就不多赘述了，主要说一下在vue项目使用时，双折线图和地图图表遇到的一些问题。

双折线图

    在场景中遇到一个这样的需求，要求三个维度的数据，柱状图加双折线图，先看一下效果图：

图1

    代码中：

图2

这里的showLine是个数组，可以放多个字段（一开始没意识到），这个地方的data3如果是小数要显示成百分比，需要在yAxisType设置右侧数据为percent(百分比)，而且在axisSite中right属性里加上data3字段，这样在图表中data3就会自动以右边的y轴为基准并以百分比显示。

地图-VeMap

VeMap的引用，由于当时项目引用的是v-charts1.19.0版本，所以很多echarts属性不能直接用，所以很无奈在项目中又引入了echarts的包

图3

如果只是用地图不需要过多的东西是可以不需要引入echarts的，但这里需要显示地图上的一个区间范围控件，如图：

图4

这种方式的区间控件，需要使用echarts中的属性去设置，用chartExtend的方式去引用echarts的属性：

图5