echarts地图中城市与省份之间的切换
来源:互联网 发布:方正数据库 编辑:程序博客网 时间:2024/06/05 23:53
在使用echarts地图中,可能会用到显示各省份的数据和显示各城市的数据。综合了这两种的配置项,只需传四个参数即可完成对这两种模式的切换。
例如,当显示省份数据时,如下如:
下面就是配置项代码:
//地图配置//mapData:图表所需数据;mapType:地图模式或散点图模式(即按省份显示数据或按城市显示数据)//minValue:视觉映射组件最小值;maxValue:视觉映射最大值function _setMap(mapData, mapType, minValue, maxValue) { var option = {}; return option = { tooltip: { trigger: 'item', formatter: function (params) { return params.name;//自行定义formatter格式 } }, visualMap: { min: minValue || 0,//视觉映射组件的最小值 max: maxValue || 200,//视觉映射组件的最大值 calculable: true, inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] }, textStyle: { color: '#666' }, left: 'left', top: 'bottom', text: ['高', '低'], // 文本,默认为数值文本 }, geo: { map: 'china', label: { emphasis: { show: false //城市模式下,鼠标移上去不显示省份名称 } }, itemStyle: { normal: { areaColor: '#eeeeee', borderColor: '#111' }, emphasis: { areaColor: '#00a695', } } }, series: [ { type: mapType, //mapType可选"scatter"或"map",即选择散点图模式或地图模式(显示省份数据为地图模式,显示城市为散点模式) mapType: 'china', coordinateSystem: 'geo', symbolSize: 14, label: { normal: { formatter: '{b}', //城市模式下在地图上显示该城市名称() textStyle: { color: '#000' }, show: true }, emphasis: { show: true } }, data: mapData //当为地图模式即显示省份数据时,数据格式为: [{name: '山东',value: 183 }, {name: '云南',value: 286 }] //当为散点模式即显示城市数据时,数据格式为: [{name:"厦门",value:[118.1,24.46,183]},{name:"武汉",value:[114.31,30.52,199]}] //散点模式value代表的含义[经度,纬度,人数] } ] }}
例如,当显示省份数据时,如下如:
当显示城市时,如下:
阅读全文
0 0
- echarts地图中城市与省份之间的切换
- 基于SpringMVC 和MyBatis的实现省份城市之间的动态切换
- 省份与城市集连的脚本
- echarts 地图的切换注意点
- 使用echarts简单制作省份地图
- 关于echarts省份地图不显示
- html中select控件(省份与城市关联)
- 全国省份与城市的下拉框实现
- 省份与城市对应选择的功能javascript
- 使用Json设置网页省份与城市的级联查询
- 省份城市联动的例子
- 中国省份与城市数据库插入
- echarts地图某些省份禁止高亮显示
- 润乾报表echarts统计图省份地图设置
- NCL中绘制中国任意省份的精确地图
- 百度echarts中地图
- JS中实现省份之间的动态跳转
- JS中实现省份之间的动态跳转
- Widget控件
- java使用freemarker生成静态html页面,基于中文API(简单版)
- 搭建dubbo+zookeeper Linux环境
- idea打包maven项目,发布到tomcat下面
- python_利用selenium 爬取淘宝商品
- echarts地图中城市与省份之间的切换
- C语言中变量名为什么不能以数字开头
- 微信支付(公众号支付)ASP.NET
- Java输入输出流
- python的exec()及扩展
- C语言——实例065 一个最优美的图案。
- FragmentTabHost的使用
- HZ 与 jiffies
- Cocos-Lua UI及控件