ehcharts中国地图四级级下钻
echarts 官网关于中国地图，只有全国-省；省-市，没有中国-省-市-县四级下钻相关文献，echarts地图最重要一点是模块化相对于其他各个图形，一下为三级下钻部分代码包括各级别交互，望指点；
中国地图模块化部分js及各个图形联动：
require(
[
'echarts',
'echarts/chart/map', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/pie', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/line', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/radar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/funnel' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
$.ajax({
type: "get",
//url: "exp1.txt",
url: "/stat/led/region",
data: "regionType=0®ionId=0",
success: function (data) {
var areadata = [];
if (data.status == "0") {
if (data.data) {
var totalCntMap = data.data["totalCntMap"];
$.each(totalCntMap, function (v, p) {//解析成对象模式省市部分
areadata.push({"name": v, "value": p});
});
} var regionType = 0;//默认全国
var regionId = 0;//默认全国
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
var cityMap = {
"北京市": "110000",
//"北京市": "110100",
"天津市": "120000",
//"天津市": "120100",
"上海市": "310000",
//"上海市": "310100",
"重庆市": "500000",
//"重庆市": "500100", "崇明县": "310200", // ??
"湖北省直辖县市": "429000", // ??
"铜仁市": "522200", // ??
"毕节市": "522400", // ?? "石家庄市": "130100",
"唐山市": "130200",
"秦皇岛市": "130300",
"邯郸市": "130400",
"邢台市": "130500",
"保定市": "130600",
"张家口市": "130700",
"承德市": "130800",
"沧州市": "130900",
"廊坊市": "131000",
"衡水市": "131100",
"太原市": "140100",
"大同市": "140200",
"阳泉市": "140300",
"长治市": "140400",
"晋城市": "140500",
"朔州市": "140600",
"晋中市": "140700",
"运城市": "140800",
"忻州市": "140900",
"临汾市": "141000",
"吕梁市": "141100",
"呼和浩特市": "150100",
"包头市": "150200",
"乌海市": "150300",
"赤峰市": "150400",
"通辽市": "150500",
"鄂尔多斯市": "150600",
"呼伦贝尔市": "150700",
"巴彦淖尔市": "150800",
"乌兰察布市": "150900",
"兴安盟": "152200",
"锡林郭勒盟": "152500",
"阿拉善盟": "152900",
"沈阳市": "210100",
"大连市": "210200",
"鞍山市": "210300",
"抚顺市": "210400",
"本溪市": "210500",
"丹东市": "210600",
"锦州市": "210700",
"营口市": "210800",
"阜新市": "210900",
"辽阳市": "211000",
"盘锦市": "211100",
"铁岭市": "211200",
"朝阳市": "211300",
"葫芦岛市": "211400",
"长春市": "220100",
"吉林市": "220200",
"四平市": "220300",
"辽源市": "220400",
"通化市": "220500",
"白山市": "220600",
"松原市": "220700",
"白城市": "220800",
"延边朝鲜族自治州": "222400",
"哈尔滨市": "230100",
"齐齐哈尔市": "230200",
"鸡西市": "230300",
"鹤岗市": "230400",
"双鸭山市": "230500",
"大庆市": "230600",
"伊春市": "230700",
"佳木斯市": "230800",
"七台河市": "230900",
"牡丹江市": "231000",
"黑河市": "231100",
"绥化市": "231200",
"大兴安岭地区": "232700",
"南京市": "320100",
"无锡市": "320200",
"徐州市": "320300",
"常州市": "320400",
"苏州市": "320500",
"南通市": "320600",
"连云港市": "320700",
"淮安市": "320800",
"盐城市": "320900",
"扬州市": "321000",
"镇江市": "321100",
"泰州市": "321200",
"宿迁市": "321300",
"杭州市": "330100",
"宁波市": "330200",
"温州市": "330300",
"嘉兴市": "330400",
"湖州市": "330500",
"绍兴市": "330600",
"金华市": "330700",
"衢州市": "330800",
"舟山市": "330900",
"台州市": "331000",
"丽水市": "331100",
"合肥市": "340100",
"芜湖市": "340200",
"蚌埠市": "340300",
"淮南市": "340400",
"马鞍山市": "340500",
"淮北市": "340600",
"铜陵市": "340700",
"安庆市": "340800",
"黄山市": "341000",
"滁州市": "341100",
"阜阳市": "341200",
"宿州市": "341300",
"六安市": "341500",
"亳州市": "341600",
"池州市": "341700",
"宣城市": "341800",
"福州市": "350100",
"厦门市": "350200",
"莆田市": "350300",
"三明市": "350400",
"泉州市": "350500",
"漳州市": "350600",
"南平市": "350700",
"龙岩市": "350800",
"宁德市": "350900",
"南昌市": "360100",
"景德镇市": "360200",
"萍乡市": "360300",
"九江市": "360400",
"新余市": "360500",
"鹰潭市": "360600",
"赣州市": "360700",
"吉安市": "360800",
"宜春市": "360900",
"抚州市": "361000",
"上饶市": "361100",
"济南市": "370100",
"青岛市": "370200",
"淄博市": "370300",
"枣庄市": "370400",
"东营市": "370500",
"烟台市": "370600",
"潍坊市": "370700",
"济宁市": "370800",
"泰安市": "370900",
"威海市": "371000",
"日照市": "371100",
"莱芜市": "371200",
"临沂市": "371300",
"德州市": "371400",
"聊城市": "371500",
"滨州市": "371600",
"菏泽市": "371700",
"郑州市": "410100",
"开封市": "410200",
"洛阳市": "410300",
"平顶山市": "410400",
"安阳市": "410500",
"鹤壁市": "410600",
"新乡市": "410700",
"焦作市": "410800",
"濮阳市": "410900",
"许昌市": "411000",
"漯河市": "411100",
"三门峡市": "411200",
"南阳市": "411300",
"商丘市": "411400",
"信阳市": "411500",
"周口市": "411600",
"驻马店市": "411700",
"省直辖县级行政区划": "469000",
"武汉市": "420100",
"黄石市": "420200",
"十堰市": "420300",
"宜昌市": "420500",
"襄阳市": "420600",
"鄂州市": "420700",
"荆门市": "420800",
"孝感市": "420900",
"荆州市": "421000",
"黄冈市": "421100",
"咸宁市": "421200",
"随州市": "421300",
"恩施土家族苗族自治州": "422800",
"长沙市": "430100",
"株洲市": "430200",
"湘潭市": "430300",
"衡阳市": "430400",
"邵阳市": "430500",
"岳阳市": "430600",
"常德市": "430700",
"张家界市": "430800",
"益阳市": "430900",
"郴州市": "431000",
"永州市": "431100",
"怀化市": "431200",
"娄底市": "431300",
"湘西土家族苗族自治州": "433100",
"广州市": "440100",
"韶关市": "440200",
"深圳市": "440300",
"珠海市": "440400",
"汕头市": "440500",
"佛山市": "440600",
"江门市": "440700",
"湛江市": "440800",
"茂名市": "440900",
"肇庆市": "441200",
"惠州市": "441300",
"梅州市": "441400",
"汕尾市": "441500",
"河源市": "441600",
"阳江市": "441700",
"清远市": "441800",
"东莞市": "441900",
"中山市": "442000",
"潮州市": "445100",
"揭阳市": "445200",
"云浮市": "445300",
"南宁市": "450100",
"柳州市": "450200",
"桂林市": "450300",
"梧州市": "450400",
"北海市": "450500",
"防城港市": "450600",
"钦州市": "450700",
"贵港市": "450800",
"玉林市": "450900",
"百色市": "451000",
"贺州市": "451100",
"河池市": "451200",
"来宾市": "451300",
"崇左市": "451400",
"海口市": "460100",
"三亚市": "460200",
"三沙市": "460300",
"成都市": "510100",
"自贡市": "510300",
"攀枝花市": "510400",
"泸州市": "510500",
"德阳市": "510600",
"绵阳市": "510700",
"广元市": "510800",
"遂宁市": "510900",
"内江市": "511000",
"乐山市": "511100",
"南充市": "511300",
"眉山市": "511400",
"宜宾市": "511500",
"广安市": "511600",
"达州市": "511700",
"雅安市": "511800",
"巴中市": "511900",
"资阳市": "512000",
"阿坝藏族羌族自治州": "513200",
"甘孜藏族自治州": "513300",
"凉山彝族自治州": "513400",
"贵阳市": "520100",
"六盘水市": "520200",
"遵义市": "520300",
"安顺市": "520400",
"黔西南布依族苗族自治州": "522300",
"黔东南苗族侗族自治州": "522600",
"黔南布依族苗族自治州": "522700",
"昆明市": "530100",
"曲靖市": "530300",
"玉溪市": "530400",
"保山市": "530500",
"昭通市": "530600",
"丽江市": "530700",
"普洱市": "530800",
"临沧市": "530900",
"楚雄彝族自治州": "532300",
"红河哈尼族彝族自治州": "532500",
"文山壮族苗族自治州": "532600",
"西双版纳傣族自治州": "532800",
"大理白族自治州": "532900",
"德宏傣族景颇族自治州": "533100",
"怒江傈僳族自治州": "533300",
"迪庆藏族自治州": "533400",
"拉萨市": "540100",
"昌都地区": "542100",
"山南地区": "542200",
"日喀则地区": "542300",
"那曲地区": "542400",
"阿里地区": "542500",
"林芝地区": "542600",
"西安市": "610100",
"铜川市": "610200",
"宝鸡市": "610300",
"咸阳市": "610400",
"渭南市": "610500",
"延安市": "610600",
"汉中市": "610700",
"榆林市": "610800",
"安康市": "610900",
"商洛市": "611000",
"兰州市": "620100",
"嘉峪关市": "620200",
"金昌市": "620300",
"白银市": "620400",
"天水市": "620500",
"武威市": "620600",
"张掖市": "620700",
"平凉市": "620800",
"酒泉市": "620900",
"庆阳市": "621000",
"定西市": "621100",
"陇南市": "621200",
"临夏回族自治州": "622900",
"甘南藏族自治州": "623000",
"西宁市": "630100",
"海东地区": "632100",
"海北藏族自治州": "632200",
"黄南藏族自治州": "632300",
"海南藏族自治州": "632500",
"果洛藏族自治州": "632600",
"玉树藏族自治州": "632700",
"海西蒙古族藏族自治州": "632800",
"银川市": "640100",
"石嘴山市": "640200",
"吴忠市": "640300",
"固原市": "640400",
"中卫市": "640500",
"乌鲁木齐市": "650100",
"克拉玛依市": "650200",
"吐鲁番地区": "652100",
"哈密地区": "652200",
"昌吉回族自治州": "652300",
"博尔塔拉蒙古自治州": "652700",
"巴音郭楞蒙古自治州": "652800",
"阿克苏地区": "652900",
"克孜勒苏柯尔克孜自治州": "653000",
"喀什地区": "653100",
"和田地区": "653200",
"伊犁哈萨克自治州": "654000",
"塔城地区": "654200",
"阿勒泰地区": "654300",
"自治区直辖县级行政区划": "659000",
"台湾省": "710000",
"香港特别行政区": "810100",
"澳门特别行政区": "820000"
};
var provinceMap = {
"北京": 110000,
"天津": 120000,
"河北": 130000,
"山西": 140000,
"内蒙古": 150000,
"辽宁": 210000,
"吉林": 220000,
"黑龙江": 230000,
"上海": 310000,
"江苏": 320000,
"浙江": 330000,
"安徽": 340000,
"福建": 350000,
"江西": 360000,
"山东": 370000,
"河南": 410000,
"湖北": 420000,
"湖南": 430000,
"广东": 440000,
"广西": 450000,
"海南": 460000,
"重庆": 500000,
"四川": 510000,
"贵州": 520000,
"云南": 530000,
"西藏": 540000,
"陕西": 610000,
"甘肃": 620000,
"青海": 630000,
"宁夏": 640000,
"新疆": 650000,
"台湾": 710000,
"香港": 810000,
"澳门": 820000
};
var municipality = ["北京", "天津", "上海", "重庆", "台湾", "香港", "澳门"]; function chinamap() {
var myChart = ec.init(document.getElementById('main'));
option = {
tooltip: {
show: false,
trigger: 'item',
formatter: '{a} <br/>{b}: {c}'
},
dataRange: {
//orient: 'horizontal',
//itemWidth:'.5',宽度
itemHeight: 8,
min: 0,
max: 50,
//color:['orange','yellow'],
text: ['高危', '安全'], // 文本，默认为数值文本
calculable: true,
x: 'left',
y: '65%',
color: ['#DC3106', '#E25F07', '#B1DA4D', '#09CF0A'],
textStyle: {
color: '#48B1CE' // 值域文字颜色
} //splitList: [
// {start: 1000},
// {start: 800, end: 1000},
// {start: 600, end: 800},
// {start: 400, end:600},
// {start: 0, end:400}
//] },
series: [
{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode: 'multiple',
itemStyle: {
show: true,
normal: {label: {show: true}},
emphasis: {
label: {show: true}
}
},
data: areadata
//data:[{name:'山东',value:12}]
}
]
}; myChart.setOption(option);
//地图自适应
$(window).resize(function(){
myChart.resize();
}); myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) {
regionType = 1;
var provinceregionType = 1;
var provinceregionId;
var selected = param.selected;
var provincename = param.target;//获取各省名字
for (var pname in provinceMap) {
if (pname == provincename) {
provinceregionId = provinceMap[pname];//获取对应省的id
regionId = provinceregionId;
}
}
if (provincename == '北京') {
except1(); } else if (provincename == '天津') {
except1();
}
else if (provincename == '重庆') {
except1();
}
else if (provincename == '上海') {
except1();
}
else {
except();
}
function except1() { //请求各省里面的市的数据
var mapdata = "regionType=" + provinceregionType + "®ionId=" + provinceregionId;
$.ajax({//安装位置属性部分
type: "get",
//url: "exp2.txt",
async: true,
url: "/stat/led/region",
data: mapdata,
success: function (data) {
if (data.status == "0") {
var citydata = [];
if (data.data) {
var totalCntMap = data.data["totalCntMap"];
$.each(totalCntMap, function (v, p) {//解析成对象模式省市部分
citydata.push({"name": v, "value": p});
});
}
function provincemap() {
var myChart = ec.init(document.getElementById('mainprovince'));
option = {
dataRange: {
//orient: 'horizontal',
//itemWidth:'.5',宽度
itemHeight: 8,
min: 0,
max: 50,
//color:['orange','yellow'],
text: ['高危', '安全'], // 文本，默认为数值文本
calculable: true,
x: 'left',
y: '65%',
color: ['#DC3106', '#E25F07', '#B1DA4D', '#09CF0A'],
textStyle: {
color: '#48B1CE' // 值域文字颜色
} //splitList: [
// {start: 1000},
// {start: 800, end: 1000},
// {start: 600, end: 800},
// {start: 400, end:600},
// {start: 0, end:400}
//] },
tooltip: {
show: false,
trigger: 'item',
formatter: '{a} <br/>{b}: {c}'
},
series: [
{
name: '中国',
type: 'map',
mapType: provincename,
selectedMode: 'multiple',
itemStyle: {
normal: {label: {show: true}},
emphasis: {label: {show: true}}
},
data: citydata }
]
};
myChart.setOption(option);
//地图自适应
$(window).resize(function(){
myChart.resize();
});
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) {
regionType = 0;
regionId = 0;
$("#mainsuffix").removeClass("show");
$("#mainprovince").removeClass("show");
$("#main").removeClass("none");
$(".primaryselect").addClass("selected").removeClass("unselected").siblings('.selected').removeClass("selected").addClass("unselected");
chinamap();
mapPiedata();
bottomrightdata();
bottomleftdata();
toprighttopdata();
toprightbottomdata();
boarddata(); }) } provincemap(); } else {
alert(data.message)
} }
}); $(".primaryselect").addClass("selected").removeClass("unselected").siblings('.selected').removeClass("selected").addClass("unselected");
mapPiedata();
bottomrightdata();
bottomleftdata();
toprighttopdata();
toprightbottomdata();
boarddata();
$("#main").addClass("none");
$("#mainprovince").addClass("show");
} function except() {
//请求各省里面的市的数据
var mapdata = "regionType=" + provinceregionType + "®ionId=" + provinceregionId;
$.ajax({//安装位置属性部分
type: "get",
//url: "exp2.txt",
async: true,
url: "/stat/led/region",
data: mapdata,
success: function (data) {
if (data.status == "0") {
var citydata = [];
if (data.data) {
var totalCntMap = data.data["totalCntMap"];
$.each(totalCntMap, function (v, p) {//解析成对象模式省市部分
citydata.push({"name": v, "value": p});
});
}
function provincemap() {
var myChart = ec.init(document.getElementById('mainprovince'));
option = {
dataRange: {
//orient: 'horizontal',
//itemWidth:'.5',宽度
itemHeight: 8,
min: 0,
max: 50,
//color:['orange','yellow'],
text: ['高危', '安全'], // 文本，默认为数值文本
calculable: true,
x: 'left',
y: '65%',
color: ['#DC3106', '#E25F07', '#B1DA4D', '#09CF0A'],
textStyle: {
color: '#48B1CE' // 值域文字颜色
} //splitList: [
// {start: 1000},
// {start: 800, end: 1000},
// {start: 600, end: 800},
// {start: 400, end:600},
// {start: 0, end:400}
//] },
tooltip: {
show: false,
trigger: 'item',
formatter: '{a} <br/>{b}: {c}'
},
series: [
{
name: '中国',
type: 'map',
mapType: provincename,
selectedMode: 'multiple',
itemStyle: {
normal: {label: {show: true}},
emphasis: {label: {show: true}}
},
data: citydata }
]
};
myChart.setOption(option);
//地图自适应
$(window).resize(function(){
myChart.resize();
});
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) { regionType = 2;
var cityregionType = 2;
var selected = param.selected;
var regionname = param.target;//获取各市名字
var geoJsonNamecounty;
for (var cityname in cityMap) {
if (cityname == regionname) {
geoJsonNamecounty = cityMap[cityname];//获取对应市的id
regionId = geoJsonNamecounty;
countymap();
} }
$(".primaryselect").addClass("selected").removeClass("unselected").siblings('.selected').removeClass("selected").addClass("unselected");
mapPiedata();
bottomrightdata();
bottomleftdata();
toprighttopdata();
toprightbottomdata();
boarddata();
$("#mainprovince").removeClass("show");
$("#main").addClass('none')
$("#mainsuffix").addClass("show").removeClass('hide');
function countymap() {
var mapdata = "regionType=" + cityregionType + "®ionId=" + geoJsonNamecounty; $.ajax({
type: "get", async: true,
url: "/stat/led/region",
data: mapdata,
success: function (data) { if (data.status == "0") {
var countydata = [];
if (data.data) {
var totalCntMap = data.data["totalCntMap"];
$.each(totalCntMap, function (v, p) {//解析成对象模式省市部分 //countydata.push({"name":v,"value":p});
countydata.push({
"name": v,
"value": p
});
});
}
citymap();
function citymap() { var myChart = ec.init(document.getElementById('mainsuffix')); // 自定义扩展图表类型：mapType = HK
require('echarts/util/mapData/params').params.HK = {
getGeoJson: function (callback) { $.getJSON('json文件远程保存地址', callback);
}
}
option = {
title: {
show: false,
text: '香港18区人口密度 （2011）',
subtext: '人口密度数据来自Wikipedia',
sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
},
tooltip: {
show: false,
trigger: 'item',
formatter: '{b}<br/>{c} (p / km2)'
},
toolbox: {
show: false,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: {show: true},
dataView: {
show: true,
readOnly: false
},
restore: {show: true},
saveAsImage: {show: true}
}
},
dataRange: {
//orient: 'horizontal',
//itemWidth:'.5',宽度
itemHeight: 8,
min: 0,
max: 50,
//color:['orange','yellow'],
text: ['高危', '安全'], // 文本，默认为数值文本
calculable: true,
x: 'left',
y: '65%',
color: ['#DC3106', '#E25F07', '#B1DA4D', '#09CF0A'],
textStyle: {
color: '#48B1CE' // 值域文字颜色
} //splitList: [
// {start: 1000},
// {start: 800, end: 1000},
// {start: 600, end: 800},
// {start: 400, end:600},
// {start: 0, end:400}
//] },
series: [
{
name: '香港18区人口密度',
type: 'map',
mapType: 'HK', // 自定义扩展图表类型
itemStyle: {
normal: {label: {show: true}},
emphasis: {label: {show: true}}
},
data: countydata
}
]
}; myChart.setOption(option);
myChart.on('click', function (params) {
//返回首页部分
$("#mainsuffix").removeClass("show").addClass("hide");
$("#main").removeClass("none");
$(".primaryselect").addClass("selected").removeClass("unselected").siblings('.selected').removeClass("selected").addClass("unselected");
regionId = 0;
regionType = 0;
chinamap();
mapPiedata();
bottomrightdata();
bottomleftdata();
toprighttopdata();
toprightbottomdata();
boarddata(); });
}
} else {
alert(data.message)
} }
});
} }) } provincemap(); } else {
alert(data.message)
} }
}); $(".primaryselect").addClass("selected").removeClass("unselected").siblings('.selected').removeClass("selected").addClass("unselected");
mapPiedata();
bottomrightdata();
bottomleftdata();
toprighttopdata();
toprightbottomdata();
boarddata();
$("#main").addClass("none");
$("#mainprovince").addClass("show");
} })
} chinamap(); //function others(){ var mappieinside = [];//内圈数据
var mappieoutside = [];//外圈数据 //中国地图右侧饼状图部分
function mapPiedata() {
mappieinside = [];
mappieoutside = [];
var mapdata = "regionType=" + regionType + "®ionId=" + regionId;
$.ajax({
type: "get", url: "/stat/led/region",
data: mapdata,
success: function (data) {
if (data.status == "0") {
if (data.data) {
var faultCntMap = data.data["faultCntMap"];//内圈
var alarmCntMap = data.data["alarmCntMap"];//外圈
$.each(faultCntMap, function (v, p) {//解析成对象模式省市部分
mappieinside.push({"name": v, "value": p});
});
$.each(alarmCntMap, function (v, p) {//解析成对象模式省市部分
mappieoutside.push({"name": v, "value": p});
});
mapPie();
} else {
$("#map-piechild").html("此区域暂无数据……")
$("#map-pie").html("此区域暂无数据……")
}
} else {
alert(data.message)
} }
})
} mapPiedata();
//以下地图-饼状图数据部分 topleft
function mapPie() {
var myChart5 = ec.init(document.getElementById('map-pie'));
var myChart55 = ec.init(document.getElementById('map-piechild'));
option5 = {
tooltip: {
show: false,
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
show: false,
orient: 'vertical',
x: 'left',
data: ['海淀', '朝阳', '西城', '东城', '昌平', '密云', '怀柔', '顺义', '大兴', '通州']
},
series: [
{
name: '访问来源',
type: 'pie',
selectedMode: 'single',
radius: [0, '20%'], label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
//data:[
// {value:335, name:'大兴', selected:true},
// {value:679, name:'通州'},
//]
data: mappieinside
},
{
name: '访问来源',
type: 'pie',
radius: ['40%', '55%'], //data:[
// {value:310, name:'朝阳'},
// {value:234, name:'西城'},
// {value:135, name:'东城'},
// {value:102, name:'其他'}
//]
data: mappieoutside
}
]
};
myChart5.setOption(option5);
myChart55.setOption(option5);
} mapPie(); //以下为历史信息地区企业本月上月部分数据索取 bottomright
$('.historylegend').click(function () {
$(this).addClass("selected").removeClass("unselected");
$(this).siblings('.selected').removeClass("selected").addClass("unselected");
if ($(this).html() == "地区") {
statType = 1;
bottomrightdata(); } else {
statType = 2;
bottomrightdata();
}
});
var statType = 1;//地区或企业
var currentmonthydata = [];
var lastmonthydata = [];
var xdata = []; function bottomrightdata() { currentmonthydata = [];
lastmonthydata = [];
xdata = [];
var bottomrightdata = "regionType=" + regionType + "®ionId=" + regionId + "&statType=" + statType;
$.ajax({
type: "get", url: "/stat/led/relate-ratio",
data: bottomrightdata,
success: function (data) {
if (data.status == "0") {
if (data.data) {
var currentmonth = data.data["本月"];//本月
var lastmonth = data.data["上月"];//上月
$.each(currentmonth, function (i, v) {//获取本月数据
xdata.push(v.X);
currentmonthydata.push(v.Y);
});
$.each(lastmonth, function (i, v) {//获取上月数据
lastmonthydata.push(v.Y);
});
bottomright();
} else {
$("#rhistory").html("此区域暂无数据……");
$("#rhistorychild").html("此区域暂无数据……")
}
} else {
alert(data.message)
} }
})
} bottomrightdata();
//以下为历史信息地区企业本月上月部分 bottomright
function bottomright() {
var myChart1 = ec.init(document.getElementById('rhistory'));
var myChart11 = ec.init(document.getElementById('rhistorychild')); option1 = {
title: {
show: true,
text: '历史问题统计数据图表',
subtext: 'HISTORY STATISTICAL DATA CHART',
x: "center",
backgroundColor: '#4CB9D6',
textStyle: {
fontWeight: 'bold',
color: '#081E57'
},
subtextStyle: {
fontWeight: 'normal',
color: '#081E57'
}
},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
//data:['直接访问','邮件营销']
data: [
//{name: '上月', textStyle:{color:"#5DA290"}},
//{name:'本月', textStyle:{color:"#51AEFE"}}
{name: '上月', textStyle: {color: "#36B6D3"}},
{name: '本月', textStyle: {color: "#E05B5A"}}
],
selected: {
'企业': false
},
y: "22%",
x: "left"
},
grid: {
//left: '-3%',
//top: '-50%',
//right: '4%',
//bottom: '3%',
containLabel: true,
width: "85%",
height: "55%",
x: "10%",
y: "30%",
borderWidth: '0px' },
xAxis: [
{
type: 'category',
data: xdata,
//data : ['朝阳区','大兴区','海淀区','东城区','丰台区','昌平区','西城区'],
axisLabel: {
show: true,
textStyle: {
color: '#9EA2AB'
}
},
axisLine: {
lineStyle: {
color: 'transparent',
width: 0//这里是为了突出显示加上的，可以去掉
}
},
splitLine: {show: false}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value} ',
textStyle: {
color: '#9EA2AB'
}
},
axisLine: {
lineStyle: {
color: 'transparent',
width: 0//这里是为了突出显示加上的，可以去掉
}
}
}
],
series: [
//{
// name:'上月',
// type:'bar',
// data:[320, 332, 301, 334, 390, 330, 320]
//},
{
name: '上月',
type: 'bar',
//stack:"地区上月",
data: lastmonthydata,
//data:[120, 132, 101, 134, 90, 230, 210],
itemStyle: {normal: {color: '#5DA290'}}
},
{
name: '本月',
type: 'bar',
//stack:"地区上月",
data: currentmonthydata,
//data:[120, 132, 101, 134, 90, 230, 210],
itemStyle: {normal: {color: '#A54C86'}}
}
]
};
//option1.legend.selected['企业'] = false;
myChart1.setOption(option1);
myChart11.setOption(option1);
} bottomright(); //以下为曲线图历史统计按年按月按日数据索取 bottomleft
$('.curvedata>span').click(function () {
$(this).addClass("selected").removeClass("unselected");
$(this).siblings('.selected').removeClass("selected").addClass("unselected");
if ($(this).html() == "按日统计") {
timeType = 1;
bottomleftdata(); } else if ($(this).html() == "按周统计") {
timeType = 2;
bottomleftdata();
} else if ($(this).html() == "按月统计") {
timeType = 3;
bottomleftdata();
} else {
timeType = 4;
bottomleftdata();
}
});
var timeType = 1;//日或年或月或周
var statlengend = [];//legend数据
var staty = [];
var statxdata = [];//x轴数据
function bottomleftdata() {
var statx = [];
currentmonthydata = [];
lastmonthydata = [];
statxdata = [];
staty = [];
statlengend = [];
var bottomrightdata = "regionType=" + regionType + "®ionId=" + regionId + "&timeType=" + timeType;
$.ajax({
type: "get", url: "/stat/led/curve",
data: bottomrightdata,
success: function (data) {
if (data.status == "0") {
if (data.data) {
$.each(data.data, function (i, v) {//获取本月数据
statlengend.push(i);//获取legend数据
statx.push(v);//x轴数据获取第一部分
var ydata = [];//x，y数据获取第一部分
$.each(v, function (a, b) {
ydata.push(b['Y'])
});
staty.push({"name": i, 'type': 'line', "data": ydata});//获取x,y数据部分
});
$.each(statx[0], function (p, q) {//x轴数据获取
statxdata.push(q['X'])
});
bottomleft();
}
else {
$("#rcurvedata").html("此区域暂无数据……")
$("#rcurvedatachild").html("此区域暂无数据……")
}
} else {
alert(data.message)
} }
})
} bottomleftdata();
//曲线图历史统计部分bottomleft
function bottomleft() {
var myChart2 = ec.init(document.getElementById('rcurvedata'));
var myChart22 = ec.init(document.getElementById('rcurvedatachild')); var option2 = {
grid: {
//left: '-3%',
//top: '-50%',
//right: '4%',
//bottom: '3%',
containLabel: true,
width: "87.5%",
height: "60%",
x: "7.5%",
y: "30%",
borderWidth: '0px' },
title: {
show: true,
text: '历史问题统计数据图表',
subtext: 'HISTORY STATISTICAL DATA CHART',
x: "center",
backgroundColor: '#4CB9D6',
textStyle: {
//fontSize:16,
fontWeight: 'bold',
color: '#081E57'
},
subtextStyle: {
//fontSize:8,
fontWeight: 'normal',
color: '#081E57'
}
},
tooltip: {
show: true,
trigger: 'axis',
formatter: "{a} <br/>{b} : {c} "
},
legend: {
//data:['朝阳区','昌平区','海淀区','西城区'],
//data:[
// {name: '朝阳区', textStyle:{color:"#5DA290"}},
// {name:'昌平区', textStyle:{color:"#51AEFE"}} ,
// {name:'海淀区', textStyle:{color:"#FFB901"}} ,
// {name:'西城区', textStyle:{color:"#E195D5"}}
// //{name:'按年统计', textStyle:{color:"#E195D5"}},
// //{name:'按月统计', textStyle:{color:"#E195D5"}},
// //{name:'按周统计', textStyle:{color:"#E195D5"}},
// //{name:'按日统计', textStyle:{color:"#E195D5"}}
//
//],
data: statlengend,
x: "left",
y: "20%",
textStyle: {color: "#4CB9D6"}
},
toolbox: {
show: false,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: statxdata,
//data : ['周一','周二','周三','周四','周五','周六','周日'],
axisLabel: {
show: true,
textStyle: {
color: '#9EA2AB'
}
},
axisLine: {
lineStyle: {
color: 'transparent',
width: 0//这里是为了突出显示加上的，可以去掉
}
},
splitLine: {
lineStyle: {
color: ['#1E5977'],
width: 1,
type: 'solid'
}
}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value} ',
//formatter: '{value} °C',
textStyle: {
color: '#9EA2AB'
}
},
axisLine: {
lineStyle: {
color: 'transparent',
width: 0//这里是为了突出显示加上的，可以去掉
}
},
splitLine: {
lineStyle: {
color: ['#1E5977'],
width: 1,
type: 'solid'
}
} }
],
//series : [
// {
// name:'朝阳区',
// type:'line',
// data:[11, 11, 15, 13, 12, 13, 10]
// //markPoint : {
// // data : [
// // {type : 'max', name: '最大值'},
// // {type : 'min', name: '最小值'}
// // ]
// //},
// //markLine : {
// // data : [
// // {type : 'average', name: '平均值'}
// // ]
// //}
// },
// {
// name:'昌平区',
// type:'line',
// data:[1, -2, 2, 5, 33, 2, 0]
// },
// {
// name:'海淀区',
// type:'line',
// data:[1, -2, 2, 54, 3, 22, 0]
// },
// {
// name:'西城区',
// type:'line',
// data:[21, -2, 23, 5, 3, 23, 0]
// }
//]
series: staty
}; // 为echarts对象加载数据
myChart2.setOption(option2);
myChart22.setOption(option2);
} bottomleft(); //以下为横柱状图问题统计数据获取部分 topright-leftop
var toprtxdata = [];
var toprtydata = []; function toprighttopdata() { toprtxdata = [];
toprtydata = [];
var bottomrightdata = "regionType=" + regionType + "®ionId=" + regionId;
$.ajax({
type: "get",
//url: "exp6",
url: "/stat/led/efficacy",
data: bottomrightdata,
success: function (data) {
if (data.status == "0") {
if (data.data) {
var colorarr = ['#D0373A', '#F45A38', '#E5982E', '#13B9DF', '#0EC7C1', '#A54C86', '#589E19'];
$.each(data.data['efficacyList'], function (i, v) {//获取本月数据
toprtxdata.push(v['X']);
//toprtydata.push(v['Y']);
toprtydata.push({
'value': v['Y'],
'itemStyle': {
normal: {
barBorderRadius: [4, 4, 4, 4],
color: colorarr[i]
}
}
});
});
toprighttop();
} else {
$("#axbar").html("此区域暂无数据……");
$("#axbarchild").html("此区域暂无数据……")
}
} else {
alert(data.message)
} }
})
} toprighttopdata();
//以下为横柱状图问题统计数据部分 topright-leftop
function toprighttop() {
var myChart3 = ec.init(document.getElementById('axbar'));
var myChart33 = ec.init(document.getElementById('axbarchild'));
option3 = {
//color:['#D0373A', '#F45A38','#E5982E','#13B9DF','#0EC7C1','red','black'], //饼图颜色设置
title: {
text: '数据统计图表',
backgroundColor: '#4CB9D6',
textStyle: {
fontWeight: 'bold',
color: '#081E57'
},
x: 'center'
//subtext: '数据来自网络'
},
tooltip: {
show: true,
trigger: 'item',
formatter: "{a} <br/>{b} : {c} "
},
//legend: {
// data: ['2011年', '2012年']
//},
grid: {
//left: '-3%',
//top: '-50%',
//right: '4%',
//bottom: '3%',
containLabel: true,
width: "75%",
height: "55%",
x: "15%",
y: "25%",
borderWidth: '0px' },
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
splitLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#9EA2AB'
}
}
},
yAxis: {
axisLine: {
lineStyle: {
color: 'transparent',
width: 0//这里是为了突出显示加上的，可以去掉
}
},
splitLine: {
show: false
},
type: 'category',
data: toprtxdata,
//data: ['第一教学楼','化工实验楼','哲学楼'],
axisLabel: {
show: true,
textStyle: {
color: '#9EA2AB'
//fontWeight:'bold'
}
} },
series: [
//{
// name: '2011年',
// type: 'bar',
// data: [104970, 131744, 630230]
//},
{
//name: '2012年',
type: 'bar',
data: toprtydata
//data: [ {value:121594,itemStyle:{normal:{color:'yellow'}}},
//]
}
]
}; myChart3.setOption(option3);
myChart33.setOption(option3);
} toprighttop(); //以下为已处理问题展开部分统计数据后台获取部分 topright-lefbottom
var toprbxdata = [];
var toprbydata = [];
var toprbpie = [];
var toprbcircle = []; function toprightbottomdata() { toprbxdata = [];//横向柱状图x数据
toprbydata = [];//横向柱状图y数据
toprbpie = [];//饼状图数据索取
toprbcircle = [];//环形图数据索取
var bottomrightdata = "regionType=" + regionType + "®ionId=" + regionId;
$.ajax({
type: "get",
//url: "exp6",
url: "/stat/led/deal-cnt",
data: bottomrightdata,
success: function (data) {
if (data.status == "0") {
if (data.data) {
$.each(data.data['dealCntList'], function (i, v) {//获取本月数据
toprbxdata.push(v['X']);
toprbydata.push(v['Y']);
toprbpie.push({"name": v['X'], "value": v['Y']});//饼状图数据索取
});
toprightbottom();
} else {
$("#pie-chart").html("此区域暂无数据……");
$("#pie-chartchild").html("此区域暂无数据……");
$("#dount-chart").html("此区域暂无数据……");
$("#dount-chartchild").html("此区域暂无数据……");
}
} else {
alert(data.message)
} }
})
} toprightbottomdata();
//以下为已处理问题展开部分统计数据部分 topright-lefbottom
function toprightbottom() {
var myChart41 = ec.init(document.getElementById('pie-chart'));
var myChart41child = ec.init(document.getElementById('pie-chartchild'));
option41 = {
title: {
text: '已处理问题统计数据图表',
backgroundColor: '#4CB9D6',
textStyle: {
fontWeight: 'bold',
color: '#081E57'
},
x: 'right'
//subtext: '数据来自网络'
},
tooltip: {
show: true,
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
show: false,
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '数据统计',
type: 'pie',
radius: '50%',
center: ['50%', '52%'],
data: toprbpie,
//data:[
// {value:335, name:'海淀'},
// {value:310, name:'朝阳'},
// {value:234, name:'东城'},
// {value:135, name:'西城'},
// {value:1548, name:'昌平'}
//],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart41.setOption(option41);
myChart41child.setOption(option41);
var myChart42 = ec.init(document.getElementById('dount-chart'));
var myChart42child = ec.init(document.getElementById('dount-chartchild')); option42 = {
color: ['#D0373A', '#F45A38', '#E5982E', '#13B9DF', '#0EC7C1', 'red', 'black'], //饼图颜色设置
title: {
show: false,
text: '各区故障数量',
//subtext: '纯属虚构',
x: 'center'
},
tooltip: {
show: true,
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
show: false,
orient: 'vertical',
left: 'right',
data: ['海淀', '朝阳', '东城', '西城', '昌平']
},
series: [
{
name: '数据统计',
type: 'pie',
radius: ['30%', '60%'],
//radius : '55%',
center: ['50%', '56%'],
roseType: 'area',
data: toprbpie,
//data:[
// {value:335, name:'海淀'},
// {value:310, name:'朝阳'},
// {value:234, name:'东城'},
// {value:135, name:'西城'},
// {value:154, name:'昌平'}
//],
itemStyle: {
//emphasis: {
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
//},
normal: {
label: {
show: false,
formatter: '{b} : ({d}%)'
//formatter: '{b} : {c} ({d}%)'
},
labelLine: {show: false}
}
}
}
]
}; myChart42.setOption(option42);
myChart42child.setOption(option42);
} toprightbottom();
//以下信息为右侧公告栏数据后台获取部分
function boarddata() {//请求各省的数据
var mapdata = "regionType=" + regionType + "®ionId=" + regionId;
$.ajax({//安装位置属性部分
type: "get",
//url: "exp7.txt",
url: "led/msg",
data: mapdata,
success: function (data) {
var scrollTimer = null;
var scrollTimer1 = null;
if (data.status == "0") {
if (!(data.data.msgList.length==0)) {//判断是否有返回数据部分
//if (data.data) {
var paragra = "";
var typetxtdata = 1;
$.each(data.data.msgList, function (v, p) {
if (p.type == 1) {
typetxtdata = "报警";
} else if (p.type == 2) {
typetxtdata = "故障";
} else if (p.type == 3) {
typetxtdata = "公告";
} else {
typetxtdata = "提示";
}
//paragra += "<p class="boardcolor"" + p.type + ">【<span>" + typetxtdata + '</span>】<span>' + p.content + '</span><span> ' + p.createTime + '</span></p>';
paragra += "<li class="boardcolor"" + p.type + ">【<span>" + typetxtdata + '</span>】<span>' + p.content + '</span><span> ' + p.createTime + '</span></li>';
});
$('#id2').html("<ul class='scrolling'>" + paragra + "</ul>");//一级页面
$('#id1').html("<ul class='scrolling1'>" + paragra + "</ul>");//二级页面
//公告栏屏幕滚动
if ($(".scrolling").children().length<=8) {//确定滚动条目
window.clearInterval(scrollTimer) }
if ($(".scrolling1").children().length <=20) {//确定滚动条目
window.clearInterval(scrollTimer1) }
}
else {
$('#id2').html("此区域暂无数据……");//一级页面
$('#id1').html("此区域暂无数据……");//二级页面 }
} else {
alert(data.message)
} }
})
} boarddata(); } else {
alert(data.message)
} }
}) }
);
ehcharts中国地图四级级下钻的更多相关文章
- vue+echarts+datav大屏数据展示及实现中国地图省市县下钻
随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够 ...
- D3.js中国地图下钻
使用d3.js实现中国地图及中国地图下钻到省市区 在可视化开发中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市,看到区这样的下钻过程,今天我们就来实现这个效果. ...
- 中国地图（Highmaps）
1.中国地图省份和市 调用的包( <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js">< ...
- R绘制中国地图，并展示流行病学数据
流行病学的数据讲究“三间分布”,即人群分布.时间分布和空间分布.其中的“空间分布”最好是在地图上展示,才比较清楚.R软件集统计分析与高级绘图于大成,是最适合做这项工作了.关于地图的绘制过程,谢益辉.邱 ...
- Highcharts中国地图热力图
最近有个项目需要将MC销量按大陆各省统计,并以中国地图人力图效果显示.由于项目一直使用Highcharts进行图表的统计,故采用Highmaps来实现. 效果如下: 1)中国各个省.直辖市.自治区: ...
- 一个让echarts中国地图包含省市轮廓的技巧
背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...
- 如何使用highmaps制作中国地图
如何使用highmaps制作中国地图 文章目录 Highmaps 所需文件 地图初始化代码 highmaps 渲染讲解 highmaps 中国各城市坐标的json文件 highmaps 线上DEMO ...
- Datazen 自定义地图--中国地图
背景: 关于Datazen可以google一下,因为目前Datazen还没有中文版,所以google出来的资料会多一点,由于公司想用Datazen来做报表展示,所以有了下文. 参考文章: 中文---h ...
- C# 使用winForm的TreeView显示中国城镇四级联动
直接上代码吧,这里 MySql.Data.MySqlClient;需要到mysql官网下载mysql-connector-net-6.9.8-noinstall.zip 访问密码 6073 usi ...
随机推荐
- 如何用JavaScript在浏览器端获取图片的原始尺寸大小？
var img = $("#img_id"); // Get my img elem var pic_real_width, pic_real_height; $("&l ...
- POJ 3308 Paratroopers（最小割EK）
题目链接 题意 : 有一个n*m的矩阵,L个伞兵可能落在某些点上,这些点的坐标已知,需要在某些位置安上一些枪,然后每个枪可以将一行或者一列的伞兵击毙.把这种枪安装到不同行的行首.或者不同列的列首,费用 ...
- loadrunner 怎么能得到返回的http状态？
loadrunner如何保存从服务器传回来的http头的信息? Action() { int HttpRetCode; web_url("www.hao123.com", &quo ...
- thinkphp 调用函数
1,定义为Common.php文件.自动加载. 2,配置文件config.php文件里配置'LOAD_EXT_FILE'=>'function'.则会自动加载function.php文件 3,使 ...
- Android TabActivity与Activity之间的动画跳转(主要Tabhost中跳转出来的动画效果解决)
首先,要说的是ActivityA到ActivityB的切换这个相对简单,只要overridePendingTransition(In,out). 这里不就说了.但是这里要说名的ActivityA不能T ...
- html5 动画精灵
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- Fedora 17下交叉编译vlc-2.0.6-win32小记
关于编译windows下的vlc网上的教程除了翻译N年前wiki官网的那些蚂蚁文之外,可以说基本没啥参考意义和价值.因为那些都是非常老的版本,0.8.x或者1.x.x,而我这个人有喜欢新鲜事儿,所以就 ...
- VJP1100 加分二叉树（树形DP）
链接 归属树形DP 做着更像记忆化 DP很好做 就是那个输出路径恶心了..改代码 从60多行改到120多行..dp从1维加到三维.. 先类似记忆化搜索整棵树 枚举以i为根节点的最大值 子树类似 求完 ...
- [Hadoop源码解读]（二）MapReduce篇之Mapper类
前面在讲InputFormat的时候,讲到了Mapper类是如何利用RecordReader来读取InputSplit中的K-V对的. 这一篇里,开始对Mapper.class的子类进行解读. 先回忆 ...
- a++与=++a的区别
//a++;//a=a+1; // ++a;//a=a+1; //Console.WriteLine(a++);// Console.WriteL ...