海南小地图(echart)
先看效果
这个是海南省地图：
然后看引入的html：
<body class="">
<div class="container">
<div class="row">
<div class="biaoti">执法人员区域匹配</div>
<div class="chartContainer" id="certNumChart" style="padding-left: 10px;"></div>
<img src="data:image/dao.png" class="dao">
</div>
</div>
<script src="market_map.js"></script>
</body>
然后是market_map.js
var certNumChart;
$(document).ready(function() {
certNumChart = echarts.init(document.getElementById('certNumChart'));
certNumChart.showLoading();
initShowView();
//设置点击事件
certNumChart.on('click', function (params) {
var city = params.name;
var code = params.data.code;
var url = G3.webPath
+ "jsp/marketcheck/map_detail.jsp?code="+code;
G3.showModalDialog("执法人员区域匹配", url, {
width : 1000,
height : 560
}, function(e, ret) {
if (ret == "1") {
grid.reload();
}
});
});
});
var geoCoordMap;
var planePath = 'arrow';
var provinceMap = proCantName;
var certNumOption = {
tooltip : {
trigger: 'item',
formatter: '{b}:<br/> {c}'
},
legend: {
orient: 'horizontal',
x:'top',
data:["随机数据"]
},
grid:{
top:0,
bottom:0
},
geo : {
map : provinceMap,
top : '10%',
roam : false,
zoom:1.2,
silent : true,
itemStyle : {
normal : {
areaColor : '#1673c5',
borderColor : '#36a0fd'
},
emphasis : {
areaColor : '#2a333d'
}
}
},
dataRange: {
show:true,
min: 0,
max: 10,
x:"right",
color:['#0080FF','#D2E9FF'],
text:['高','低'], // 文本，默认为数值文本
calculable : true
},
series : [
{
name: '检查数据量',
type: 'map',
mapType: proCantName,
zoom:1.2,
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[]
}
]
}; function initShowView() {
$.ajax({
async : true,
url : G3.webPath
+ "command/dispatcher/com.inspur.dtdcommon.casemanage.cmd.DtdChecManDispatcherCmd/queryList",
type : "POST",
data : {
checkYearDate : checkYearDate,
checkEndYearDate : checkEndYearDate
},
success : function(data) {
certNumOption.legend.data = data.catalog;
certNumOption.series[0].data = data.data;
certNumChart.hideLoading();
$.get(G3.webPath + 'skins/echars/dataGeo/geometryProvince/'+proCantCode+'.json', function (geoJson) {
echarts.registerMap(proCantName, geoJson);
certNumChart.setOption(certNumOption);
});
}
}); } function iconRefresh() {
$(document).on(
"click",
".icon-refresh",
function() {
var $container = $(this).parents(".chart-container").find(
".chartContainer");
if ($container.css("display") == "none") {
$container.css("display", "block");
$container.prev().css("display", "none");
}
});
}
注意：
initShowView方法中的参数： proCantCode = "460000"
geoJson:
certNumOption.series[0].data数据格式如下：
[
{
"code":"460100",
"name":"海口市",
"value":"363"
},
{
"code":"460200",
"name":"三亚市",
"value":"177"
},
{
"code":"469001",
"name":"五指山市",
"value":"64"
},
{
"code":"469002",
"name":"琼海市",
"value":"114"
},
{
"code":"460400",
"name":"儋州市",
"value":"153"
},
{
"code":"469005",
"name":"文昌市",
"value":"97"
},
{
"code":"469006",
"name":"万宁市",
"value":"117"
},
{
"code":"469007",
"name":"东方市",
"value":"80"
},
{
"code":"469021",
"name":"定安县",
"value":"61"
},
{
"code":"469022",
"name":"屯昌县",
"value":"65"
},
{
"code":"469023",
"name":"澄迈县",
"value":"95"
},
{
"code":"469024",
"name":"临高县",
"value":"73"
},
{
"code":"469025",
"name":"白沙县",
"value":"61"
},
{
"code":"469026",
"name":"昌江县",
"value":"59"
},
{
"code":"469027",
"name":"乐东县",
"value":"92"
},
{
"code":"469028",
"name":"陵水县",
"value":"71"
},
{
"code":"469029",
"name":"保亭县",
"value":"56"
},
{
"code":"469030",
"name":"琼中县",
"value":"58"
},
{
"code":"460500",
"name":"洋浦开发区",
"value":"19"
},
{
"code":"460300",
"name":"三沙市",
"value":"0"
}
]
然后初始化数据地图
海南小地图(echart)的更多相关文章
- e-chart 本地加载中国地图
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- echart图表控件配置入门(二)常用图表数据动态绑定
上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...
- echart图表控件配置入门(一)
现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...
- echart 插件实现全国地图
最近的项目要用到一个能展现全国地图的功能,并且全国各个省份显示的颜色不同,点击省份后会返回省份名称.经过反复的查找最终确定了echart这个插件,最后的成果还不错,在这里写下来希望对大家有所帮助.话不 ...
- 利用eChart绘制网页图表
首先,最好的教程在这里:eCchart eChart所需JS: echarts.min.js china.js echarts.js 页面代码如下: 一.图表 <!DOCTYPE html> ...
- echart搭配时间轴进行展示 （本例展示的是多时间 多地区 多指标条件 ）
1:照常先来几张图 看效果 2:首先 看官方文档 我把echart官方的例子给扒下来并整理了得出如下效果 上 案例图和代码 效果图 : 代码: <style type="text/c ...
- echart地图下钻
需求:展示中国地图,鼠标点击显示对应的省份 在echart的github上下载需要的 地图文件China.js,各个省份的json文件 遇到的问题:直接在浏览器打开报错,跨域问题,用webstrom打 ...
- Echart：前端很好的数据图表展现工具+demo
官网: http://echarts.baidu.com/index.html 通过一个简单的小Demo介绍echart的使用:demo均亲测可以运行 demo1: 1.新建一个echarts.ht ...
- echart封装，前端简单路由，图表设置自动化
https://github.com/cclient/EhartDemoSetByAngular 后端node.js 前端插件 echart,jquery,jqueryui,datapicker,an ...
随机推荐
- java.security.InvalidKeyException: Illegal key size aes解密失败
使用微信时定期提示:java.security.InvalidKeyException: Illegal key size和 com.qq.weixin.mp.aes.AesException: ae ...
- 每天一个linux命令-wc命令
语法:wc [选项] 文件… 说明:该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取.wc同时也给出所有指定文件的总统计数.字是由空格字符区分开的最大字符串. 该命令各选 ...
- Android Studio安装和配置的方法 & 错误解决
Android Studio终于到了1.0时代了,所以我也试着去学习了下如何使用它.上手确实比较麻烦,今天就分享下如何去下载并使用它. 一.下载 & 安装 大家可以去google给出的地址下载 ...
- Button 在布局文件中定义监听器，文字阴影，自定义图片，代码绘制样式，添加音效的方法
1.Button自己在xml文件中绑定监听器 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andro ...
- C#里，如何模拟DataGridView里的一个Cell的Click事件。
//假设dgv是一个DataGridView. //我要点击第3行的第二个cell. //当然,要有一个点击事件.假设dgv_CellClick是那个点击事件. dgv_CellClick(dgv, ...
- [转]用chrome模拟微信浏览器访问需要OAuth2.0网页授权的页面
FROM : http://blog.csdn.net/gavin_luo/article/details/40620217 现在很流行微信网页小游戏,用html5制作的小游戏移过来,可以放到微信浏览 ...
- Hadoop2.6.0版本号MapReudce演示样例之WordCount（一）
一.准备測试数据 1.在本地Linux系统/var/lib/hadoop-hdfs/file/路径下准备两个文件file1.txt和file2.txt,文件列表及各自内容例如以下图所看到的: wate ...
- QT国际化（中英转换）
转载:https://blog.csdn.net/u012528526/article/details/54707233 QT国际化(中英转换) 我们都知道在安卓中,想做国际化很简单,只需要建立对应的 ...
- LeetCode295-Find Median from Data Stream && 480. 滑动窗口中位数
中位数是有序列表中间的数.如果列表长度是偶数,中位数则是中间两个数的平均值. 例如, [2,3,4] 的中位数是 3 [2,3] 的中位数是 (2 + 3) / 2 = 2.5 设计一个支持以下两种操 ...
- C# 简单日志文本输出
第一种 直接文件IO流写日志文件 using System.IO; public static void WriteLog(string strLog) { string sFilePath=&qu ...