使用echarts,制作色温图
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,制作色温图相关推荐
- vue使用e-charts制作专题图(广西省为例)---第一篇
vue使用E-Charts制作专题图(广西省为例)---第一篇 写博客是为了做笔记 先给大家看一下效果图: "专题图"顾名思义就是地图的每一部分根据一定的标准,展现出不一样颜色,使 ...
- Echarts制作态势图、热点图、轨迹图,使用百度底图,地图下钻
记录最近使用echarts制作地图的过程及部分代码: 其中在网络上借鉴了不少优秀的源码,在此感谢他们的开源精神. 先看效果: (一)态势图.热点图.轨迹图及全屏功能 全屏效果: (二)改普通地图为百度 ...
- echarts制作图表同时有3d柱状图与折线图
echarts制作图表同时有3d柱状图与折线图 工作遇到,小可爱们可直接抄作业,使用的pictorialBar 工作遇到,小可爱们可直接抄作业,使用的pictorialBar echarts封装,使用 ...
- echarts制作饼状图如何设置不同类别之间有一定间隔?
解决echarts饼状图不同类之间有一定间隔 用echarts制作饼状图时,为了有利于区分不同类别,一般通过设置不同的颜色代表不同的类别即可,但为了进一步体现不同类别之间的区分,可通过设置不同类别之间 ...
- echarts嵌套饼图自动动画_使用百度echarts制作可视化大屏——制作一个双层饼图...
使用百度echarts制作可视化大屏--制作一个双层饼图 发布时间:2018-06-12 16:24, 浏览次数:745 , 标签: echarts 实现一个两层嵌套的环形图,展示三个分类下各个品牌车 ...
- 数据可视化:利用Python和Echarts制作“用户消费行为分析”可视化大屏
数据可视化:利用Python和Echarts制作"用户消费行为分析"可视化大屏 前言 实验目的: 准备工作: 一.创建项目: 二.建立数据库连接获取数据: 三.页面布局: 四.下载 ...
- 使用echarts制作泡泡效果
公司项目需要泡泡效果,项目已经引入了vue和echarts框架,就按着两个框架找了找,在echarts官网找到个例子,再结合自己的需求制作而成.只是记录给自己看的,如能帮上别人的忙也是乐意的. 先给个 ...
- 使用百度echarts制作可视化大屏
先看一下效果图(部分) 我们现在就来完成这个第一个环形进度条. 1.下载百度echarts和jquery,添加到你的页面中: <script language="javascript& ...
- JS Echarts之雷达图 | 使用Excel画雷达图
文章目录 第一部分:JS Echarts之雷达图 1. 什么是 Echarts 2. JS Echarts之雷达图 2.1 使用Echarts画雷达图 2.3 echarts雷达图中常用修改 修改in ...
最新文章
- js调用ios和安卓方法
- android_launcher的源码详细分析和壁纸修改 .
- 芯片数据手册datasheet哪里找?
- linux安装comfast网卡驱动,电脑如何通过usb共享手机网络 Linux安装wifi 无线网络 811AC usb网卡驱动...
- IT公司老板落水,各部门员工怎么救
- 数学也浪漫 数学的几句贴心话
- sh linux 一组命令,linux中的组命令和子shell
- java excel导入_一场关于Java.lang.String类的极限调优操作
- 皇帝的新脑-读书笔记
- 3.4 51单片机-矩阵键盘
- attiny85(digispark)零延迟启动探究
- 如何彻底清除流氓的2345安全卫士及2345SafeCenterSvc服务?
- 什么是ubuntu ?
- 叮咚买菜VS每日优鲜:同亏不同命
- P1146 硬币翻转 python题解
- 直线度测量告别手工测量时代
- 你从未见过的,最全微服务架构实战详解,干货满满
- PostgreSQL常用字符串函数和时间函数:
- 【应急响应】Windows应急响应
- OpenCV图像特征提取学习四,SIFT特征检测算法
热门文章
- 电子元件二极管封装SMA,SMB,SMC的区别
- 自由的百科全书 Wikipedia 18 周岁了
- 【UE】简易的水材质
- unity塔防游戏怪物转向_英雄塔防物语下载-英雄塔防物语官方版下载
- 关键词挖掘,已经挖掘出来的关键词应该怎么样选取
- 搜索的艺术——搜索引擎使用心得
- 1型错误和2型错误_实际项目常犯错误8:挡土墙计算的常见问题2
- HTTP/1.1 中 If-Modified-Since 和 If-Unmodified-Since 区别简记
- 简单的签到代码_Python自动签到
- 欧尼酱讲JVM(07)——方法的栖身之所—虚拟机栈