关于地图和柱状图的联合

做投资偏好解析模块的时候，需要做到这样一个需求
这里写图片描述
因为要进行地图色阶的区分，柱状图的色阶应该依据地图的数据也进行区分，所以单独一个地图和一个柱状图是不可取的，于是要把地图和柱状图进行联合。
这里需要一个echarts属性中的视觉映射属性visualMap属性，官方对他的解释是：
visualMap 组件可以定义为分段型（visualMapPiecewise）或连续型（visualMapContinuous），通过 type 来区分。例如：

option = {
visualMap: [
{ // 第一个 visualMap 组件
type: ‘continuous’, // 定义为连续型 viusalMap
…
},
{ // 第二个 visualMap 组件
type: ‘piecewise’, // 定义为分段型 visualMap
…
}
],
…
};
而我们这里需要第二种模式
这里写图片描述
接下来就是柱状图需要放在哪里呢？

   xAxis: [{
                       position: 'top',
                       type: 'value',
                       boundaryGap: false,
                       splitLine: {
                           show: false
                       },
                       axisLine: {
                           show: false
                       },
                       axisTick: {
                           show: false
                       },
                   }],
                   yAxis: [{
                       type: 'category',
                       data: titledata,
                       axisTick: {
                           alignWithLabel: true
                       }
                   }],
                   series: [{
                       z: 1,
                       name: '',
                       type: 'map',
                       mapType: 'china',
                       left: '2%',
                       width:'50%',
                       roam: true,
                       itemStyle: {
                           normal: {
                               label: {
                                   show: true
                               }
                           },
                           emphasis: {
                               label: {
                                   show: true
                               }
                           }
                       },
                       data: data

                   }, {
                       name: 'value',
                       z: 2,
                       type: 'bar',
                       roam: true,
                       label: {
                           normal: {
                               show: true,
                               textStyle: {
                                   color: '#000'

                               }
                           },
                           emphasis: {
                               show: true
                           }
                       },
                       itemStyle: {
                           emphasis: {
                               color: "rgb(254,153,78)"
                           },
                       },
                       data: arr
                   }]

基本上核心的代码片段就是这些，但是这样写了你会发现一个问题，柱状图的色阶显示和地图的色阶显示并不对应，这是什么原因，你忽略了一个属性，在visualMap中，有一个重要的属性dimension：指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。可以把 series.data 理解成一个二维数组，例如：

[
[12, 23, 43],
[12, 23, 43],
[43, 545, 65],
[92, 23, 33]
]
其中每个列是一个维度，即 dimension。例如 dimension 为 1 时，取第二列（即 23，23，545，23），映射到视觉元素上。

默认取 data 中最后一个维度。
所以我需要在我的visualMap中设置dimension设置为0；
这算是一个坑吧！
还有就是，我需要展示市级的所有地区的柱状图，如果只显示在一个柱状图上，高度没法控制，太高了，于是换了一种展示方式：
分页展示这里写图片描述
点击每一段，就展示每一段的柱状图：在这里如果每次重新加载所有整个地图，会很慢，因为地图加载chinaCity就需要花费3秒左右，于是我是这么写的：

 var chinaItem;
           if(!window.localStorage.getItem(chinaItem)){
                $.getJSON(uploadedDataURL, function (china) {
                   var chinaData = china;
                   window.localStorage.setItem(chinaItem,JSON.stringify(chinaData))
                   chinaOption(chinaData,arr,dataPie,dataName,max)
               });
           }else{
               chinaOption(JSON.parse(window.localStorage.getItem(chinaItem)),arr,dataPie,dataName,max)
           }

放入本地缓存的方式

关于地图和柱状图的联合

猜你喜欢