可视化图表组件v-charts（https://v-charts.js.org/）是为了在vue中方便的使用echarts（https://echarts.apache.org/zh/），而对echarts进行裁剪封装后的vue组件，所以在vue中使用起来非常方便。
然而在实际项目中，一些应用场景所需要的功能在v-charts文档中没有明确描述，但v-charts实际上是支持的，下面是我在实际项目中翻出的v-charts隐藏技能：
一、地图map
1、地图数据本地化
在v-charts中，地图数据实际上就是一堆json文件，每个国家、每个省份、每个地市、每个区县…都对应一个json文件，有了这个json文件就有了这个地区的地图数据。
有三种方式指定地图数据：
1）通过名称指定：chartSettings.position: 'china' 、chartSettings.position:'province/jiangsu'
2）通过指定地图数据源：chartSettings.positionJsonLink:'https://unpkg.com/v-charts-custom-maps@0.2.1/hk-geo.json'
3）通过绑定本地json文件：chartSettings.positionJsonLink:'statics/map/echarts/320000.geo.json'
我倾向于采用第三种方式，好处有二：一是如果项目运行在外网，可以减少数据依赖，同时也会保障速度；二是项目同样可以运行在内网，因为地图数据都在本地。
我在获取json文件的时候遇到一个坑：由于是用的echarts，所以第一反应是到https://hxkj.vip/demo/echartsMap/上下载地图数据，但这个网站的区县数据有问题，即同一个地市下的各个区县json数据都一样（下的时候没有注意，操作地图时才偶然发现这个问题）。所以建议到http://datav.aliyun.com/tools/atlas/下载地图数据，目前还未发现数据问题。
2、地图上隐藏图例
在组件上增加一句:legend-visible="false"即可，具体如下：
<ve-map :data="chartData" :settings="chartSettings" :events="chartEvents" :visual-map="visualMap" :legend-visible="false" height="450px"></ve-map>
3、 地图的逐级钻取
地图的逐级钻取本质上就是动态修改指向不同的json文件（地图数据文件），即修改chartSettings.positionJsonLink的值。当然这还不够，每次修改地图数据文件指向的同时，还必须修改chartSettings. position的值，否则地图不能刷新成新的地图。我是把chartSettings. position值设为当前地图的行政区划代码，这样可以确保和上一次的地图position不同。
4、地图上热力图实现
v-charts文档没有描述在map组件上如何实现热力图，而是通过一个单独的热力图组件实现，这显然不能满足在地图逐级钻取的同时展现热力图的应用场景要求。
map组件上实现热力图，和常规的热力图有所差异：她是地图上每个地区一种颜色，不同地区由于指标值（metrics）不同，所以显示不同的颜色。在map组件上实现热力图需要如下两步：
第一步，设置视觉映射组件，即visual-map="visualMap"，具体如下
<ve-map :data="chartData" :settings="chartSettings" :events="chartEvents" :visual-map="visualMap" :legend-visible="false" height="450px"></ve-map>
为了使用视觉映射组件，记得在VUE中：
import visualMap from"echarts/lib/component/visualMap"; //visualMap包含在v-charts中，所以无需单独安装
同时需要配置视觉映射组件的参数值，尤其是min、max，我的配置如下：
visualMap: {
type: 'piecewise', //piecewise分段模式、continuous连续模式
splitNumber: 8, //分段的数量，piecewise模式下有效
min: 800, //最小值，应小于地图上所有地区的指标值
max: 50000, //最大值，应大于地图上所有地区的指标值
text: ['最多', '最少'], //piecewise模式下，有此参数则不显示每段旁边的label，否则就显示label；continuous模式下必须要此参数
realtime: false,
calculable: true,
inRange: { color: ['white', 'yellow', 'orangered'] } },
第二步，指定指标列（metrics），建议只指定一个指标，因为如果有多个指标，则每个地区的颜色具体依据哪个指标值就会比较乱。
二、仪表盘gauge
1、容器的尺寸
在组件中如果未指定容器尺寸，则仪盘表的容器是整个组件放置区域；如果组件中指定了尺寸，则容器大小就为指定尺寸，如下配置就是指定容器的高度为160px,长度为当前区域的100%：
2、仪表盘的位置
每个仪表盘的默认位置均是chartSettings_gauge.seriesMap.center:['50%', '50%']，即仪表盘的圆心为当前容器的中心点，由于是默认值，所以一般仪表盘的chartSettings中都不配置center:['50%', '50%']。但在如下两种情况下，需要配置center值：
第一种情况，有多个仪表盘，显然每个仪表盘的中心点位置不同，所以必须配置center值。
第二种情况，需要调整仪表盘在容器中的位置，例如我在这个项目中就把中心点调整为center: ['50%', '60%']，原因是仪表盘的下面缺少了一部分，要把这个表盘放在图形中间，就需要下移表盘中心点位置。
3、仪表盘的大小
仪表盘的大小是由仪表盘的半径决定的，即chartSettings_gauge.seriesMap.radius: '50%'，在v-charts的文档示例中，半径都是采用百分比，这样做大的好处是随着容器大小的变化，则仪表盘的大小也跟着变化，但缺点也是明显的，可能导致整个画面效果变乱。
所以一般我都喜欢设定为一个固定值，具体值的大小自行根据容器位置和屏幕大小调整确定。
4、关于指针
chartSettings_gauge.seriesMap中的三个参数min、max、splitNumber决定了表盘刻度和当前指针指向的位置，所以需要根据指标值（metrics）定义好min、max、splitNumber的值，否则就会出现指针指向有问题，或者表盘刻度不合理。
