Echarts 地图下钻实现过程记录
文章目录
- 一、其他问题记录：
- 二、配置echarts地图颜色随数据增大而加深
- 三、echarts设置为可放缩，可拖拽
- 四、解决echarts下钻地图，在平移和缩放后，下钻到下一级时生成的地图不在容器中间，会跑到容器外面去。
- 五、tooltip出现在鼠标正上方
- 六、Echarts使用geojson地理坐标地图地名label标签位置不居中
- 七、好的下钻实例文章
- 八、部分整理好的地图数据
一、其他问题记录：
1、点击市级数据时，数据中没有市级数据的 name
2、钻入之后，点击返回上一级，再钻入失败问题。
二、配置echarts地图颜色随数据增大而加深
配置 inRange 属性
visualMap: {
min: 0,
max: 100,
// text: ['100', '0'],
realtime: false,
calculable: true,
inRange: {
color: ['#A4C8FF', '#71A9FF']
}
},
三、echarts设置为可放缩，可拖拽
配置 roam 属性为 true
四、解决echarts下钻地图，在平移和缩放后，下钻到下一级时生成的地图不在容器中间，会跑到容器外面去。
重新绘制图表的时候需要： myChart.setOption(option,true），在setOption()方法中添加true，表示重新绘制
五、tooltip出现在鼠标正上方
position: function (point, params, dom, rect, size) {
// point 是鼠标的坐标 [x, y]
// size 包含提示框的宽度和高度 {contentSize: [width, height], viewSize: [width, height]}
var x = point[0] - size.contentSize[0]/2 ;
var y = point[1] - size.contentSize[1] - 20; // 将 y 坐标设为鼠标的 y 坐标减去提示框的高度
return [x, y];
}
六、Echarts使用geojson地理坐标地图地名label标签位置不居中
参考：调整json文件配置项中properties的cp属性
高德坐标拾取器（坐标可在DataV数据可视化平台生效）：https://lbs.amap.com/tools/picker
China.json文件生成平台：https://datav.aliyun.com/portal/school/atlas/area_selector
七、好的下钻实例文章
echarts中国地图开发 第三章 下钻与返回
Echarts绘制地图（超详细版！）
Vue.js 实现地图下钻功能，轻松构建层级数据可视化！
八、部分整理好的地图数据
城市数据