对v-charts图表组件（基于VUE2.0和echarts封装）的补充说明

           可视化图表组件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/[email protected]/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"即可，具体如下：

     3、 地图的逐级钻取

     地图的逐级钻取本质上就是动态修改指向不同的json文件（地图数据文件），即修改chartSettings.positionJsonLink的值。当然这还不够，每次修改地图数据文件指向的同时，还必须修改chartSettings. position的值，否则地图不能刷新成新的地图。我是把chartSettings. position值设为当前地图的行政区划代码，这样可以确保和上一次的地图position不同。

      4、地图上热力图实现

      v-charts文档没有描述在map组件上如何实现热力图，而是通过一个单独的热力图组件实现，这显然不能满足在地图逐级钻取的同时展现热力图的应用场景要求。

       map组件上实现热力图，和常规的热力图有所差异：她是地图上每个地区一种颜色，不同地区由于指标值（metrics）不同，所以显示不同的颜色。在map组件上实现热力图需要如下两步：

       第一步，设置视觉映射组件，即visual-map="visualMap"，具体如下

        为了使用视觉映射组件，记得在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的值，否则就会出现指针指向有问题，或者表盘刻度不合理。