1、需要下载echarts的echarts-all.js文件和创建地图需要用到的数据源

2、在项目中创建jsp文件,将js文件引入

<script type="text/javascript" src="plug-in/echarts/jquery-1.8.3.min.js"></script>
 <script type="text/javascript" src="plug-in/echarts/echarts-all.js"></script>

创建div模型,用于展示生成的地图

<div id="maptab" style="width:90%;height: 90%;"></div>

3、通过js创建echarts地图对象,封装option

<script type="text/javascript">
var cityMap = {"兰州市": "620100","嘉峪关市": "620200","金昌市": "620300","白银市": "620400","天水市": "620500","武威市": "620600","张掖市": "620700","平凉市": "620800","酒泉市": "620900","庆阳市": "621000","定西市": "621100","陇南市": "621200","临夏回族自治州": "622900","甘南藏族自治州": "623000"
};
var mapGeoData = echarts.util.mapData.params;for (var city in cityMap) {// 自定义扩展图表类型mapGeoData.params[city] = {getGeoJson: (function (c) {var geoJsonName = cityMap[c];return function (callback) {$.getJSON('../../echarts/doc/example/geoJson/china-main-city/' + geoJsonName + '.json', callback);}})(city)}
}var ecConfig = echarts.config;
var zrEvent = zrender.tool.event;
var curIndx = 0;
var mapType = [ '甘肃'];
var mt = '甘肃';$("#maptab").show();var myChart = echarts.init(document.getElementById('maptab'), 'shine');myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){var len = mapType.length;if (mt == '甘肃') {// 全国选择时指定到选中的省份var selected = param.selected;for (var i in selected) {if (selected[i]) {mt = i;while (len--) {if (mapType[len] == mt) {curIndx = len;}}break;}}option.tooltip.formatter = '点击返回全省<br/>{b}';}else {curIndx = 0;mt = '甘肃';option.tooltip.formatter = '点击进入该市<br/>{b}';}option.series[0].mapType = mt;option.series[0].data= getDataByAreaName(mt);option.title.subtext = mt + ' (点击切换)';alert(option);myChart.setOption(option,true);
});option = {title: {text : '甘肃省',link : 'http://www.pactera.com/',subtext : '甘肃 (点击进入该市)'},tooltip : {trigger: 'item',formatter: '点击进入该市<br/>{b}'},legend: {orient: 'vertical',x:'right',data:['随机数据']},dataRange: {min: 0,max: 1000,color:['red','yellow'],text:['高','低'],           // 文本,默认为数值文本calculable : true},series : [{name: '随机数据',type: 'map',mapType: '甘肃',selectedMode : 'single',itemStyle:{normal:{label:{show:true}},emphasis:{label:{show:true}}},data:[{name: '酒泉市',value: Math.round(Math.random()*1000)},{name: '张掖市',value: Math.round(Math.random()*1000)},{name: '甘南藏族自治州',value: Math.round(Math.random()*1000)},{name: '武威市',value: Math.round(Math.random()*1000)},{name: '陇南市',value: Math.round(Math.random()*1000)},{name: '庆阳市',value: Math.round(Math.random()*1000)},{name: '白银市',value: Math.round(Math.random()*1000)},{name: '定西市',value: Math.round(Math.random()*1000)},{name: '天水市',value: Math.round(Math.random()*1000)},{name: '兰州市',value: Math.round(Math.random()*1000)},{name: '平凉市',value: Math.round(Math.random()*1000)},{name: '临夏回族自治州',value: Math.round(Math.random()*1000)},{name: '金昌市',value: Math.round(Math.random()*1000)},{name: '嘉峪关市',value: Math.round(Math.random()*1000)}]}]
};var area_obj = new Object();
area_obj["甘肃"] = '兰州市,嘉峪关市,金昌市,白银市,天水市,武威市,张掖市,平凉市,酒泉市,庆阳市,定西市,陇南市,临夏回族自治州,甘南藏族自治州';
area_obj["兰州市"] = '城关区,七里河区,西固区,安宁区,红古区,永登县,皋兰县,榆中县';
function getDataByAreaName(name){var _data =[];if(null == name || '' == name) return _data;var area_name = area_obj[name];if(null == area_name || '' == area_name){return _data;}var area_names = area_name.split(',');for(var i in area_names){_data.push("{name: '"+area_names[i]+"',value: "+Math.round(Math.random()*1000)+"}");}var n_str = _data.toString();n_str = "[" + n_str + "]";return  eval(n_str);
};myChart.setOption(option,true);</script>

转载于:https://www.cnblogs.com/guo-eric/p/7879989.html

使用echarts,制作色温图相关推荐

  1. vue使用e-charts制作专题图(广西省为例)---第一篇

    vue使用E-Charts制作专题图(广西省为例)---第一篇 写博客是为了做笔记 先给大家看一下效果图: "专题图"顾名思义就是地图的每一部分根据一定的标准,展现出不一样颜色,使 ...

  2. Echarts制作态势图、热点图、轨迹图,使用百度底图,地图下钻

    记录最近使用echarts制作地图的过程及部分代码: 其中在网络上借鉴了不少优秀的源码,在此感谢他们的开源精神. 先看效果: (一)态势图.热点图.轨迹图及全屏功能 全屏效果: (二)改普通地图为百度 ...

  3. echarts制作图表同时有3d柱状图与折线图

    echarts制作图表同时有3d柱状图与折线图 工作遇到,小可爱们可直接抄作业,使用的pictorialBar 工作遇到,小可爱们可直接抄作业,使用的pictorialBar echarts封装,使用 ...

  4. echarts制作饼状图如何设置不同类别之间有一定间隔?

    解决echarts饼状图不同类之间有一定间隔 用echarts制作饼状图时,为了有利于区分不同类别,一般通过设置不同的颜色代表不同的类别即可,但为了进一步体现不同类别之间的区分,可通过设置不同类别之间 ...

  5. echarts嵌套饼图自动动画_使用百度echarts制作可视化大屏——制作一个双层饼图...

    使用百度echarts制作可视化大屏--制作一个双层饼图 发布时间:2018-06-12 16:24, 浏览次数:745 , 标签: echarts 实现一个两层嵌套的环形图,展示三个分类下各个品牌车 ...

  6. 数据可视化:利用Python和Echarts制作“用户消费行为分析”可视化大屏

    数据可视化:利用Python和Echarts制作"用户消费行为分析"可视化大屏 前言 实验目的: 准备工作: 一.创建项目: 二.建立数据库连接获取数据: 三.页面布局: 四.下载 ...

  7. 使用echarts制作泡泡效果

    公司项目需要泡泡效果,项目已经引入了vue和echarts框架,就按着两个框架找了找,在echarts官网找到个例子,再结合自己的需求制作而成.只是记录给自己看的,如能帮上别人的忙也是乐意的. 先给个 ...

  8. 使用百度echarts制作可视化大屏

    先看一下效果图(部分) 我们现在就来完成这个第一个环形进度条. 1.下载百度echarts和jquery,添加到你的页面中: <script language="javascript& ...

  9. JS Echarts之雷达图 | 使用Excel画雷达图

    文章目录 第一部分:JS Echarts之雷达图 1. 什么是 Echarts 2. JS Echarts之雷达图 2.1 使用Echarts画雷达图 2.3 echarts雷达图中常用修改 修改in ...

最新文章

  1. js调用ios和安卓方法
  2. android_launcher的源码详细分析和壁纸修改 .
  3. 芯片数据手册datasheet哪里找?
  4. linux安装comfast网卡驱动,电脑如何通过usb共享手机网络 Linux安装wifi 无线网络 811AC usb网卡驱动...
  5. IT公司老板落水,各部门员工怎么救
  6. 数学也浪漫 数学的几句贴心话
  7. sh linux 一组命令,linux中的组命令和子shell
  8. java excel导入_一场关于Java.lang.String类的极限调优操作
  9. 皇帝的新脑-读书笔记
  10. 3.4 51单片机-矩阵键盘
  11. attiny85(digispark)零延迟启动探究
  12. 如何彻底清除流氓的2345安全卫士及2345SafeCenterSvc服务?
  13. 什么是ubuntu ?
  14. 叮咚买菜VS每日优鲜:同亏不同命
  15. P1146 硬币翻转 python题解
  16. 直线度测量告别手工测量时代
  17. 你从未见过的,最全微服务架构实战详解,干货满满
  18. PostgreSQL常用字符串函数和时间函数:
  19. 【应急响应】Windows应急响应
  20. OpenCV图像特征提取学习四,SIFT特征检测算法

热门文章

  1. 电子元件二极管封装SMA,SMB,SMC的区别
  2. 自由的百科全书 Wikipedia 18 周岁了
  3. 【UE】简易的水材质
  4. unity塔防游戏怪物转向_英雄塔防物语下载-英雄塔防物语官方版下载
  5. 关键词挖掘,已经挖掘出来的关键词应该怎么样选取
  6. 搜索的艺术——搜索引擎使用心得
  7. 1型错误和2型错误_实际项目常犯错误8:挡土墙计算的常见问题2
  8. HTTP/1.1 中 If-Modified-Since 和 If-Unmodified-Since 区别简记
  9. 简单的签到代码_Python自动签到
  10. 欧尼酱讲JVM(07)——方法的栖身之所—虚拟机栈