海南小地图(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 ...
随机推荐
- 低版本系统兼容的ActionBar（四）添加Tab+添加自定义的Tab视图+Fragment
在ActionBar中添加Tab是很有用的技巧.在support V7库的支持下,我们几乎可以用和之前一样的方式来添加Tab,对于Tab来说,我们可以和MenuItem一样,给他定义自己的视图.我这里 ...
- EditText 中文文档
本文来自:http://www.cnblogs.com/over140/archive/2010/09/02/1815439.html 属性名称 描述 android:autoLink 设置是否当文本 ...
- Guava Finalizer
/* * Copyright (C) 2008 The Guava Authors Licensed under the Apache License, Version 2.0 (the " ...
- System.Reflection.TargetException:“非静态方法需要一个目标。”
报错:TargetException, 非静态方法需要一个目标,非静态方法 如果实例为null,调用实例方法会报如上错. 解决办法: 检查实例是否为null,考虑什么情况下实例为null,然后排除实例 ...
- 在SqlServer 中解析JSON数据 [parseJSON] 函数 数据库中 解析JSON
使用如下: SELECT * FROM parseJSON('{ "联系人": { "姓名": "huang", "网名" ...
- Doxygen简单经验谈。。。
Doxygen,大名鼎鼎的文档生成工具,被Boost.OpenCasCade等诸多项目作为文档生成的不二人选.人说,才华横溢往往是高深莫测,这句话放在 Doxygen这里显然是不适用的.十八般武艺样样 ...
- VS2010整合NUnit进行单元测试
1.下载安装NUnit(最新win版本为NUnit-2.6.0.12051.msi) http://www.nunit.org/index.php?p=download 2.下载并安装VS的Visua ...
- 微信小程序wxml文件中调用自定义函数
想在微信小程序的wxml文件里自如的像vue那样调用自定义的方法,发现并不成功,得利用WXS脚本语言. WXS脚本语言是 WeiXin Script 脚本语言的简称,是JavaScript.JSON. ...
- MFC中插入符的生成
响应WM_CREATE消息的代码如下: int CTextView::OnCreate(LPCREATESTRUCT lpCreateStruct) { ) ; // 插入符在窗口重绘的过程中不会消失 ...
- java 获取指定日前的前一天
/** * @Author: * @Description:更加输入日期,获取输入日期的前一天 * @Date: * @strData:参数格式:yyyy-MM-dd * @return:返回格式:y ...