地图下钻+时间线+柱状图echarts 12px "Microsoft YaHei", sans-serif配置项内容和展示
配置项如下
var zhejiang = "/asset/get/s/data-1589341975698-bAD4Vp3PY.json";
// 市
var hangzhou = "/asset/get/s/data-1589003571047-8Xg37jcwv.json";
var zhoushan = "/asset/get/s/data-1589003566916-ohp8QsNF9.json";
var jiaxin = "/asset/get/s/data-1589003552334-5OQ_uGIPs.json";
var ningbo = "/asset/get/s/data-1589003540474-BkDTACUUL.json";
var taizhou = "/asset/get/s/data-1589003536896-6DDlyRZab.json";
var wenzhou = "/asset/get/s/data-1589003533265-AkeJlc9Ps.json";
var lishui = "/asset/get/s/data-1589003526529-SQeTLEaOJ.json";
var huzhou = "/asset/get/s/data-1589003522912-OrPXCa6ye.json";
var quzhou = "/asset/get/s/data-1589003519348-WpDW6vYTD.json";
var jinhua = "/asset/get/s/data-1589003512597-pX-ocI1Wr.json";
var shaoxing = "/asset/get/s/data-1589003496398-Qbj2FVpud.json";
// 杭州市各区
var yuhang = "/asset/get/s/data-1589002810673-aR1YzRH61.json";
var xihu = "/asset/get/s/data-1589002855913-aEdHbUtV1.json";
var shangcheng = "/asset/get/s/data-1589002846878-tS3MyeChU.json";
var xiacheng = "/asset/get/s/data-1589002861672-GBErE4ZQK.json";
var binjiang = "/asset/get/s/data-1589002818402-wXtY_arX7.json";
var tonglu = "/asset/get/s/data-1589002851190-IGhlcvixI.json";
var fuyang = "/asset/get/s/data-1589002828168-4oGOJElFc.json";
var jiande = "/asset/get/s/data-1589002832817-Lx7Zqmlzg.json";
var xiaoshan = "/asset/get/s/data-1589002866948-14pra2MgE.json";
var gongshu = "/asset/get/s/data-1589002980875-rbR_QPOcH.json";
var linan = "/asset/get/s/data-1589002842369-20yopBJgF.json";
var jianggan = "/asset/get/s/data-1589002837571-4zlnwvYh0.json";
var chunan = "/asset/get/s/data-1589002822195-Zm_Tq0ACJ.json";
// 模拟点数据——数据点位无实际意义 仅供参考
var mapArr = {
浙江省: [{
name: "杭州",
value: [120.210896, 30.246036, 1],
},
{
name: "湖州",
value: [120.086881, 30.894178, 0],
},
{
name: "嘉兴",
value: [120.755623, 30.746814, 0],
},
{
name: "绍兴",
value: [120.583305, 30.051136, 0],
},
{
name: "宁波",
value: [121.62454, 29.860258, 0],
},
{
name: "舟山",
value: [122.207395, 29.985578, 0],
},
{
name: "衢州",
value: [118.859307, 28.970229, 0],
},
{
name: "金华",
value: [119.647265, 29.079195, 0],
},
{
name: "台州",
value: [121.42079, 28.655716, 0],
},
{
name: "丽水",
value: [119.923249, 28.467694, 0],
},
{
name: "温州",
value: [120.699279, 27.993849, 0],
},
],
杭州市: [{
name: "余杭区",
value: [120.3060892965, 30.4244838332, 1,500],
},
{
name: "西湖区",
value: [120.1371565592, 30.2651970958, 0,600],
},
{
name: "拱墅区",
value: [120.1484873743, 30.324906244, 0,700],
},
{
name: "上城区",
value: [120.2040848844, 30.2328603996, 0,25],
},
{
name: "下城区",
value: [120.1876141702, 30.28673585, 0,75],
},
{
name: "江干区",
value: [120.2114310483, 30.2628716672, 0,60],
},
{
name: "滨江区",
value: [120.2184566077, 30.2143928485, 0,50],
},
{
name: "萧山区",
value: [120.2708053894, 30.1895246409, 0,44],
},
{
name: "临安区",
value: [119.7313212674, 30.239743139, 0,64],
},
{
name: "富阳区",
value: [119.9671985789, 30.0539026103, 0,48],
},
{
name: "桐庐区",
value: [119.6981058619, 29.7988325149, 0,96],
},
{
name: "建德区",
value: [119.287548962, 29.4813766767, 0,34],
},
{
name: "淳安区",
value: [119.0484695874, 29.6152091789, 0,15],
},
],
上城区: [{
name: "33011003",
value: [120.18915669224, 30.237287162543, 0],
},
{
name: "33015057",
value: [120.19922034051, 30.235133348706, 0],
},
],
下城区: [{
name: "33010127",
value: [120.1671967765, 30.266743852496, 0],
},
{
name: "33019028",
value: [120.19384385251, 30.342224566937, 0],
},
],
江干区: [{
name: "33010164",
value: [120.197120989581, 30.2722505771474, 0],
},
{
name: "33015265",
value: [120.26602565373, 30.3175431482886, 0],
},
],
拱墅区: [{
name: "33010487",
value: [120.151508870388, 30.2850301964867, 0],
},
{
name: "33014148",
value: [120.173834955998, 30.3708542283502, 0],
},
{
name: "33010164",
value: [120.197120989581, 30.2722505771474, 0],
},
{
name: "33015265",
value: [120.26602565373, 30.3175431482886, 0],
},
],
西湖区: [{
name: "33010216",
value: [120.14096678401, 30.273505030871, 0],
},
{
name: "33014161",
value: [120.10112323964, 30.29794196665, 0],
},
{
name: "33011003",
value: [120.18915669224, 30.237287162543, 0],
},
{
name: "33015057",
value: [120.19922034051, 30.235133348706, 0],
},
],
滨江区: [{
name: "33011065",
value: [120.2151700964, 30.199560551644, 0],
},
{
name: "33019249",
value: [120.13585717584, 30.16852739334, 0],
},
],
萧山区: [{
name: "33017388",
value: [120.24728418493, 30.180294169914, 0],
},
{
name: "33015378",
value: [119.033746561182, 29.6055595157275, 0],
},
],
余杭区: [{
name: "33015501",
value: [120.29494435694, 30.412715702058, 0],
},
{
name: "33014521",
value: [120.29659123326, 30.501453905111, 0],
},
],
富阳区: [{
name: "33011406",
value: [119.94520844126, 30.053833453656, 0],
},
{
name: "33015403",
value: [119.66472313905, 29.985457240343, 0],
},
],
淳安县: [{
name: "33011922",
value: [119.043620031871, 29.6058306092139, 0],
},
{
name: "33019919",
value: [119.046607704754, 29.6038488141601, 0],
},
],
临安区: [{
name: "33011601",
value: [119.70560939215, 30.229842691419, 0],
},
{
name: "33019608",
value: [119.7051829209, 30.231791316266, 0],
},
],
主城区: [{
name: "33010216",
value: [120.14096678401, 30.273505030871, 0],
},
{
name: "33014161",
value: [120.10112323964, 30.29794196665, 0],
},
{
name: "33011003",
value: [120.18915669224, 30.237287162543, 0],
},
{
name: "33015057",
value: [120.19922034051, 30.235133348706, 0],
},
{
name: "33010127",
value: [120.1671967765, 30.266743852496, 0],
},
{
name: "33019028",
value: [120.19384385251, 30.342224566937, 0],
},
{
name: "33010487",
value: [120.151508870388, 30.2850301964867, 0],
},
{
name: "33014148",
value: [120.173834955998, 30.3708542283502, 0],
},
{
name: "33010164",
value: [120.197120989581, 30.2722505771474, 0],
},
{
name: "33015265",
value: [120.26602565373, 30.3175431482886, 0],
},
],
};
var mapArrDate = [{
2014: {
浙江省: [{
name: "杭州",
value: [120.210896, 30.246036, 1, 40],
},
{
name: "湖州",
value: [120.086881, 30.894178, 0, 50],
},
{
name: "嘉兴",
value: [120.755623, 30.746814, 0, 70],
},
{
name: "绍兴",
value: [120.583305, 30.051136, 0, 60],
},
{
name: "宁波",
value: [121.62454, 29.860258, 0, 55],
},
{
name: "舟山",
value: [122.207395, 29.985578, 0, 45],
},
{
name: "衢州",
value: [118.859307, 28.970229, 0, 66],
},
{
name: "金华",
value: [119.647265, 29.079195, 0, 77],
},
{
name: "台州",
value: [121.42079, 28.655716, 0, 69],
},
{
name: "丽水",
value: [119.923249, 28.467694, 0, 54],
},
{
name: "温州",
value: [120.699279, 27.993849, 0, 28],
},
],
杭州市: [{
name: "余杭区",
value: [120.3060892965, 30.4244838332, 1],
},
{
name: "西湖区",
value: [120.1371565592, 30.2651970958, 0],
},
{
name: "拱墅区",
value: [120.1484873743, 30.324906244, 0],
},
{
name: "上城区",
value: [120.2040848844, 30.2328603996, 0],
},
{
name: "下城区",
value: [120.1876141702, 30.28673585, 0],
},
{
name: "江干区",
value: [120.2114310483, 30.2628716672, 0],
},
{
name: "滨江区",
value: [120.2184566077, 30.2143928485, 0],
},
{
name: "萧山区",
value: [120.2708053894, 30.1895246409, 0],
},
{
name: "临安区",
value: [119.7313212674, 30.239743139, 0],
},
{
name: "富阳区",
value: [119.9671985789, 30.0539026103, 0],
},
{
name: "桐庐区",
value: [119.6981058619, 29.7988325149, 0],
},
{
name: "建德区",
value: [119.287548962, 29.4813766767, 0],
},
{
name: "淳安区",
value: [119.0484695874, 29.6152091789, 0],
},
],
上城区: [{
name: "33011003",
value: [120.18915669224, 30.237287162543, 0],
},
{
name: "33015057",
value: [120.19922034051, 30.235133348706, 0],
},
],
下城区: [{
name: "33010127",
value: [120.1671967765, 30.266743852496, 0],
},
{
name: "33019028",
value: [120.19384385251, 30.342224566937, 0],
},
],
江干区: [{
name: "33010164",
value: [120.197120989581, 30.2722505771474, 0],
},
{
name: "33015265",
value: [120.26602565373, 30.3175431482886, 0],
},
],
拱墅区: [{
name: "33010487",
value: [120.151508870388, 30.2850301964867, 0],
},
{
name: "33014148",
value: [120.173834955998, 30.3708542283502, 0],
},
{
name: "33010164",
value: [120.197120989581, 30.2722505771474, 0],
},
{
name: "33015265",
value: [120.26602565373, 30.3175431482886, 0],
},
],
西湖区: [{
name: "33010216",
value: [120.14096678401, 30.273505030871, 0],
},
{
name: "33014161",
value: [120.10112323964, 30.29794196665, 0],
},
{
name: "33011003",
value: [120.18915669224, 30.237287162543, 0],
},
{
name: "33015057",
value: [120.19922034051, 30.235133348706, 0],
},
],
滨江区: [{
name: "33011065",
value: [120.2151700964, 30.199560551644, 0],
},
{
name: "33019249",
value: [120.13585717584, 30.16852739334, 0],
},
],
萧山区: [{
name: "33017388",
value: [120.24728418493, 30.180294169914, 0],
},
{
name: "33015378",
value: [119.033746561182, 29.6055595157275, 0],
},
],
余杭区: [{
name: "33015501",
value: [120.29494435694, 30.412715702058, 0],
},
{
name: "33014521",
value: [120.29659123326, 30.501453905111, 0],
},
],
富阳区: [{
name: "33011406",
value: [119.94520844126, 30.053833453656, 0],
},
{
name: "33015403",
value: [119.66472313905, 29.985457240343, 0],
},
],
淳安县: [{
name: "33011922",
value: [119.043620031871, 29.6058306092139, 0],
},
{
name: "33019919",
value: [119.046607704754, 29.6038488141601, 0],
},
],
临安区: [{
name: "33011601",
value: [119.70560939215, 30.229842691419, 0],
},
{
name: "33019608",
value: [119.7051829209, 30.231791316266, 0],
},
],
}
},
{
2015: {
浙江省: [{
name: "杭州",
value: [120.210896, 30.246036, 3, 99],
},
{
name: "湖州",
value: [120.086881, 30.894178, 3, 50],
},
{
name: "嘉兴",
value: [120.755623, 30.746814, 3, 70],
},
{
name: "绍兴",
value: [120.583305, 30.051136, 2, 60],
},
{
name: "宁波",
value: [121.62454, 29.860258, 2, 55],
},
{
name: "舟山",
value: [122.207395, 29.985578, 1, 45],
},
{
name: "衢州",
value: [118.859307, 28.970229, 0, 66],
},
{
name: "金华",
value: [119.647265, 29.079195, 0, 77],
},
{
name: "台州",
value: [121.42079, 28.655716, 0, 69],
},
{
name: "丽水",
value: [119.923249, 28.467694, 0, 54],
},
{
name: "温州",
value: [120.699279, 27.993849, 0, 28],
},
],
杭州市: [{
name: "余杭区",
value: [120.3060892965, 30.4244838332, 1],
},
{
name: "西湖区",
value: [120.1371565592, 30.2651970958, 0],
},
{
name: "拱墅区",
value: [120.1484873743, 30.324906244, 0],
},
{
name: "上城区",
value: [120.2040848844, 30.2328603996, 0],
},
{
name: "下城区",
value: [120.1876141702, 30.28673585, 0],
},
{
name: "江干区",
value: [120.2114310483, 30.2628716672, 0],
},
{
name: "滨江区",
value: [120.2184566077, 30.2143928485, 0],
},
{
name: "萧山区",
value: [120.2708053894, 30.1895246409, 0],
},
{
name: "临安区",
value: [119.7313212674, 30.239743139, 0],
},
{
name: "富阳区",
value: [119.9671985789, 30.0539026103, 0],
},
{
name: "桐庐区",
value: [119.6981058619, 29.7988325149, 0],
},
{
name: "建德区",
value: [119.287548962, 29.4813766767, 0],
},
{
name: "淳安区",
value: [119.0484695874, 29.6152091789, 0],
},
],
上城区: [{
name: "33011003",
value: [120.18915669224, 30.237287162543, 0],
},
{
name: "33015057",
value: [120.19922034051, 30.235133348706, 0],
},
],
下城区: [{
name: "33010127",
value: [120.1671967765, 30.266743852496, 0],
},
{
name: "33019028",
value: [120.19384385251, 30.342224566937, 0],
},
],
江干区: [{
name: "33010164",
value: [120.197120989581, 30.2722505771474, 0],
},
{
name: "33015265",
value: [120.26602565373, 30.3175431482886, 0],
},
],
拱墅区: [{
name: "33010487",
value: [120.151508870388, 30.2850301964867, 0],
},
{
name: "33014148",
value: [120.173834955998, 30.3708542283502, 0],
},
{
name: "33010164",
value: [120.197120989581, 30.2722505771474, 0],
},
{
name: "33015265",
value: [120.26602565373, 30.3175431482886, 0],
},
],
西湖区: [{
name: "33010216",
value: [120.14096678401, 30.273505030871, 0],
},
{
name: "33014161",
value: [120.10112323964, 30.29794196665, 0],
},
{
name: "33011003",
value: [120.18915669224, 30.237287162543, 0],
},
{
name: "33015057",
value: [120.19922034051, 30.235133348706, 0],
},
],
滨江区: [{
name: "33011065",
value: [120.2151700964, 30.199560551644, 0],
},
{
name: "33019249",
value: [120.13585717584, 30.16852739334, 0],
},
],
萧山区: [{
name: "33017388",
value: [120.24728418493, 30.180294169914, 0],
},
{
name: "33015378",
value: [119.033746561182, 29.6055595157275, 0],
},
],
余杭区: [{
name: "33015501",
value: [120.29494435694, 30.412715702058, 0],
},
{
name: "33014521",
value: [120.29659123326, 30.501453905111, 0],
},
],
富阳区: [{
name: "33011406",
value: [119.94520844126, 30.053833453656, 0],
},
{
name: "33015403",
value: [119.66472313905, 29.985457240343, 0],
},
],
淳安县: [{
name: "33011922",
value: [119.043620031871, 29.6058306092139, 0],
},
{
name: "33019919",
value: [119.046607704754, 29.6038488141601, 0],
},
],
临安区: [{
name: "33011601",
value: [119.70560939215, 30.229842691419, 0],
},
{
name: "33019608",
value: [119.7051829209, 30.231791316266, 0],
},
],
}
},
{
2016: {
浙江省: [{
name: "杭州",
value: [120.210896, 30.246036, 1, 40],
},
{
name: "湖州",
value: [120.086881, 30.894178, 0, 50],
},
{
name: "嘉兴",
value: [120.755623, 30.746814, 0, 70],
},
{
name: "绍兴",
value: [120.583305, 30.051136, 0, 60],
},
{
name: "宁波",
value: [121.62454, 29.860258, 0, 55],
},
{
name: "舟山",
value: [122.207395, 29.985578, 0, 45],
},
{
name: "衢州",
value: [118.859307, 28.970229, 0, 66],
},
{
name: "金华",
value: [119.647265, 29.079195, 0, 77],
},
{
name: "台州",
value: [121.42079, 28.655716, 0, 69],
},
{
name: "丽水",
value: [119.923249, 28.467694, 0, 54],
},
{
name: "温州",
value: [120.699279, 27.993849, 0, 28],
},
],
杭州市: [{
name: "余杭区",
value: [120.3060892965, 30.4244838332, 1],
},
{
name: "西湖区",
value: [120.1371565592, 30.2651970958, 0],
},
{
name: "拱墅区",
value: [120.1484873743, 30.324906244, 0],
},
{
name: "上城区",
value: [120.2040848844, 30.2328603996, 0],
},
{
name: "下城区",
value: [120.1876141702, 30.28673585, 0],
},
{
name: "江干区",
value: [120.2114310483, 30.2628716672, 0],
},
{
name: "滨江区",
value: [120.2184566077, 30.2143928485, 0],
},
{
name: "萧山区",
value: [120.2708053894, 30.1895246409, 0],
},
{
name: "临安区",
value: [119.7313212674, 30.239743139, 0],
},
{
name: "富阳区",
value: [119.9671985789, 30.0539026103, 0],
},
{
name: "桐庐区",
value: [119.6981058619, 29.7988325149, 0],
},
{
name: "建德区",
value: [119.287548962, 29.4813766767, 0],
},
{
name: "淳安区",
value: [119.0484695874, 29.6152091789, 0],
},
],
上城区: [{
name: "33011003",
value: [120.18915669224, 30.237287162543, 0],
},
{
name: "33015057",
value: [120.19922034051, 30.235133348706, 0],
},
],
下城区: [{
name: "33010127",
value: [120.1671967765, 30.266743852496, 0],
},
{
name: "33019028",
value: [120.19384385251, 30.342224566937, 0],
},
],
江干区: [{
name: "33010164",
value: [120.197120989581, 30.2722505771474, 0],
},
{
name: "33015265",
value: [120.26602565373, 30.3175431482886, 0],
},
],
拱墅区: [{
name: "33010487",
value: [120.151508870388, 30.2850301964867, 0],
},
{
name: "33014148",
value: [120.173834955998, 30.3708542283502, 0],
},
{
name: "33010164",
value: [120.197120989581, 30.2722505771474, 0],
},
{
name: "33015265",
value: [120.26602565373, 30.3175431482886, 0],
},
],
西湖区: [{
name: "33010216",
value: [120.14096678401, 30.273505030871, 0],
},
{
name: "33014161",
value: [120.10112323964, 30.29794196665, 0],
},
{
name: "33011003",
value: [120.18915669224, 30.237287162543, 0],
},
{
name: "33015057",
value: [120.19922034051, 30.235133348706, 0],
},
],
滨江区: [{
name: "33011065",
value: [120.2151700964, 30.199560551644, 0],
},
{
name: "33019249",
value: [120.13585717584, 30.16852739334, 0],
},
],
萧山区: [{
name: "33017388",
value: [120.24728418493, 30.180294169914, 0],
},
{
name: "33015378",
value: [119.033746561182, 29.6055595157275, 0],
},
],
余杭区: [{
name: "33015501",
value: [120.29494435694, 30.412715702058, 0],
},
{
name: "33014521",
value: [120.29659123326, 30.501453905111, 0],
},
],
富阳区: [{
name: "33011406",
value: [119.94520844126, 30.053833453656, 0],
},
{
name: "33015403",
value: [119.66472313905, 29.985457240343, 0],
},
],
淳安县: [{
name: "33011922",
value: [119.043620031871, 29.6058306092139, 0],
},
{
name: "33019919",
value: [119.046607704754, 29.6038488141601, 0],
},
],
临安区: [{
name: "33011601",
value: [119.70560939215, 30.229842691419, 0],
},
{
name: "33019608",
value: [119.7051829209, 30.231791316266, 0],
},
],
}
},
{
2017: {
浙江省: [{
name: "杭州",
value: [120.210896, 30.246036, 1, 40],
},
{
name: "湖州",
value: [120.086881, 30.894178, 0, 50],
},
{
name: "嘉兴",
value: [120.755623, 30.746814, 0, 70],
},
{
name: "绍兴",
value: [120.583305, 30.051136, 0, 60],
},
{
name: "宁波",
value: [121.62454, 29.860258, 0, 55],
},
{
name: "舟山",
value: [122.207395, 29.985578, 0, 45],
},
{
name: "衢州",
value: [118.859307, 28.970229, 0, 66],
},
{
name: "金华",
value: [119.647265, 29.079195, 0, 77],
},
{
name: "台州",
value: [121.42079, 28.655716, 0, 69],
},
{
name: "丽水",
value: [119.923249, 28.467694, 0, 54],
},
{
name: "温州",
value: [120.699279, 27.993849, 0, 28],
},
],
杭州市: [{
name: "余杭区",
value: [120.3060892965, 30.4244838332, 1],
},
{
name: "西湖区",
value: [120.1371565592, 30.2651970958, 0],
},
{
name: "拱墅区",
value: [120.1484873743, 30.324906244, 0],
},
{
name: "上城区",
value: [120.2040848844, 30.2328603996, 0],
},
{
name: "下城区",
value: [120.1876141702, 30.28673585, 0],
},
{
name: "江干区",
value: [120.2114310483, 30.2628716672, 0],
},
{
name: "滨江区",
value: [120.2184566077, 30.2143928485, 0],
},
{
name: "萧山区",
value: [120.2708053894, 30.1895246409, 0],
},
{
name: "临安区",
value: [119.7313212674, 30.239743139, 0],
},
{
name: "富阳区",
value: [119.9671985789, 30.0539026103, 0],
},
{
name: "桐庐区",
value: [119.6981058619, 29.7988325149, 0],
},
{
name: "建德区",
value: [119.287548962, 29.4813766767, 0],
},
{
name: "淳安区",
value: [119.0484695874, 29.6152091789, 0],
},
],
上城区: [{
name: "33011003",
value: [120.18915669224, 30.237287162543, 0],
},
{
name: "33015057",
value: [120.19922034051, 30.235133348706, 0],
},
],
下城区: [{
name: "33010127",
value: [120.1671967765, 30.266743852496, 0],
},
{
name: "33019028",
value: [120.19384385251, 30.342224566937, 0],
},
],
江干区: [{
name: "33010164",
value: [120.197120989581, 30.2722505771474, 0],
},
{
name: "33015265",
value: [120.26602565373, 30.3175431482886, 0],
},
],
拱墅区: [{
name: "33010487",
value: [120.151508870388, 30.2850301964867, 0],
},
{
name: "33014148",
value: [120.173834955998, 30.3708542283502, 0],
},
{
name: "33010164",
value: [120.197120989581, 30.2722505771474, 0],
},
{
name: "33015265",
value: [120.26602565373, 30.3175431482886, 0],
},
],
西湖区: [{
name: "33010216",
value: [120.14096678401, 30.273505030871, 0],
},
{
name: "33014161",
value: [120.10112323964, 30.29794196665, 0],
},
{
name: "33011003",
value: [120.18915669224, 30.237287162543, 0],
},
{
name: "33015057",
value: [120.19922034051, 30.235133348706, 0],
},
],
滨江区: [{
name: "33011065",
value: [120.2151700964, 30.199560551644, 0],
},
{
name: "33019249",
value: [120.13585717584, 30.16852739334, 0],
},
],
萧山区: [{
name: "33017388",
value: [120.24728418493, 30.180294169914, 0],
},
{
name: "33015378",
value: [119.033746561182, 29.6055595157275, 0],
},
],
余杭区: [{
name: "33015501",
value: [120.29494435694, 30.412715702058, 0],
},
{
name: "33014521",
value: [120.29659123326, 30.501453905111, 0],
},
],
富阳区: [{
name: "33011406",
value: [119.94520844126, 30.053833453656, 0],
},
{
name: "33015403",
value: [119.66472313905, 29.985457240343, 0],
},
],
淳安县: [{
name: "33011922",
value: [119.043620031871, 29.6058306092139, 0],
},
{
name: "33019919",
value: [119.046607704754, 29.6038488141601, 0],
},
],
临安区: [{
name: "33011601",
value: [119.70560939215, 30.229842691419, 0],
},
{
name: "33019608",
value: [119.7051829209, 30.231791316266, 0],
},
],
}
},
{
2018: {
浙江省: [{
name: "杭州",
value: [120.210896, 30.246036, 1, 40],
},
{
name: "湖州",
value: [120.086881, 30.894178, 0, 50],
},
{
name: "嘉兴",
value: [120.755623, 30.746814, 0, 70],
},
{
name: "绍兴",
value: [120.583305, 30.051136, 0, 60],
},
{
name: "宁波",
value: [121.62454, 29.860258, 0, 55],
},
{
name: "舟山",
value: [122.207395, 29.985578, 0, 45],
},
{
name: "衢州",
value: [118.859307, 28.970229, 0, 66],
},
{
name: "金华",
value: [119.647265, 29.079195, 0, 77],
},
{
name: "台州",
value: [121.42079, 28.655716, 0, 69],
},
{
name: "丽水",
value: [119.923249, 28.467694, 0, 54],
},
{
name: "温州",
value: [120.699279, 27.993849, 0, 28],
},
],
杭州市: [{
name: "余杭区",
value: [120.3060892965, 30.4244838332, 1],
},
{
name: "西湖区",
value: [120.1371565592, 30.2651970958, 0],
},
{
name: "拱墅区",
value: [120.1484873743, 30.324906244, 0],
},
{
name: "上城区",
value: [120.2040848844, 30.2328603996, 0],
},
{
name: "下城区",
value: [120.1876141702, 30.28673585, 0],
},
{
name: "江干区",
value: [120.2114310483, 30.2628716672, 0],
},
{
name: "滨江区",
value: [120.2184566077, 30.2143928485, 0],
},
{
name: "萧山区",
value: [120.2708053894, 30.1895246409, 0],
},
{
name: "临安区",
value: [119.7313212674, 30.239743139, 0],
},
{
name: "富阳区",
value: [119.9671985789, 30.0539026103, 0],
},
{
name: "桐庐区",
value: [119.6981058619, 29.7988325149, 0],
},
{
name: "建德区",
value: [119.287548962, 29.4813766767, 0],
},
{
name: "淳安区",
value: [119.0484695874, 29.6152091789, 0],
},
],
上城区: [{
name: "33011003",
value: [120.18915669224, 30.237287162543, 0],
},
{
name: "33015057",
value: [120.19922034051, 30.235133348706, 0],
},
],
下城区: [{
name: "33010127",
value: [120.1671967765, 30.266743852496, 0],
},
{
name: "33019028",
value: [120.19384385251, 30.342224566937, 0],
},
],
江干区: [{
name: "33010164",
value: [120.197120989581, 30.2722505771474, 0],
},
{
name: "33015265",
value: [120.26602565373, 30.3175431482886, 0],
},
],
拱墅区: [{
name: "33010487",
value: [120.151508870388, 30.2850301964867, 0],
},
{
name: "33014148",
value: [120.173834955998, 30.3708542283502, 0],
},
{
name: "33010164",
value: [120.197120989581, 30.2722505771474, 0],
},
{
name: "33015265",
value: [120.26602565373, 30.3175431482886, 0],
},
],
西湖区: [{
name: "33010216",
value: [120.14096678401, 30.273505030871, 0],
},
{
name: "33014161",
value: [120.10112323964, 30.29794196665, 0],
},
{
name: "33011003",
value: [120.18915669224, 30.237287162543, 0],
},
{
name: "33015057",
value: [120.19922034051, 30.235133348706, 0],
},
],
滨江区: [{
name: "33011065",
value: [120.2151700964, 30.199560551644, 0],
},
{
name: "33019249",
value: [120.13585717584, 30.16852739334, 0],
},
],
萧山区: [{
name: "33017388",
value: [120.24728418493, 30.180294169914, 0],
},
{
name: "33015378",
value: [119.033746561182, 29.6055595157275, 0],
},
],
余杭区: [{
name: "33015501",
value: [120.29494435694, 30.412715702058, 0],
},
{
name: "33014521",
value: [120.29659123326, 30.501453905111, 0],
},
],
富阳区: [{
name: "33011406",
value: [119.94520844126, 30.053833453656, 0],
},
{
name: "33015403",
value: [119.66472313905, 29.985457240343, 0],
},
],
淳安县: [{
name: "33011922",
value: [119.043620031871, 29.6058306092139, 0],
},
{
name: "33019919",
value: [119.046607704754, 29.6038488141601, 0],
},
],
临安区: [{
name: "33011601",
value: [119.70560939215, 30.229842691419, 0],
},
{
name: "33019608",
value: [119.7051829209, 30.231791316266, 0],
},
],
}
},
{
2019: {
浙江省: [{
name: "杭州",
value: [120.210896, 30.246036, 1, 40],
},
{
name: "湖州",
value: [120.086881, 30.894178, 0, 50],
},
{
name: "嘉兴",
value: [120.755623, 30.746814, 0, 70],
},
{
name: "绍兴",
value: [120.583305, 30.051136, 0, 60],
},
{
name: "宁波",
value: [121.62454, 29.860258, 0, 55],
},
{
name: "舟山",
value: [122.207395, 29.985578, 0, 45],
},
{
name: "衢州",
value: [118.859307, 28.970229, 0, 66],
},
{
name: "金华",
value: [119.647265, 29.079195, 0, 77],
},
{
name: "台州",
value: [121.42079, 28.655716, 0, 69],
},
{
name: "丽水",
value: [119.923249, 28.467694, 0, 54],
},
{
name: "温州",
value: [120.699279, 27.993849, 0, 28],
},
],
杭州市: [{
name: "余杭区",
value: [120.3060892965, 30.4244838332, 1],
},
{
name: "西湖区",
value: [120.1371565592, 30.2651970958, 0],
},
{
name: "拱墅区",
value: [120.1484873743, 30.324906244, 0],
},
{
name: "上城区",
value: [120.2040848844, 30.2328603996, 0],
},
{
name: "下城区",
value: [120.1876141702, 30.28673585, 0],
},
{
name: "江干区",
value: [120.2114310483, 30.2628716672, 0],
},
{
name: "滨江区",
value: [120.2184566077, 30.2143928485, 0],
},
{
name: "萧山区",
value: [120.2708053894, 30.1895246409, 0],
},
{
name: "临安区",
value: [119.7313212674, 30.239743139, 0],
},
{
name: "富阳区",
value: [119.9671985789, 30.0539026103, 0],
},
{
name: "桐庐区",
value: [119.6981058619, 29.7988325149, 0],
},
{
name: "建德区",
value: [119.287548962, 29.4813766767, 0],
},
{
name: "淳安区",
value: [119.0484695874, 29.6152091789, 0],
},
],
上城区: [{
name: "33011003",
value: [120.18915669224, 30.237287162543, 0],
},
{
name: "33015057",
value: [120.19922034051, 30.235133348706, 0],
},
],
下城区: [{
name: "33010127",
value: [120.1671967765, 30.266743852496, 0],
},
{
name: "33019028",
value: [120.19384385251, 30.342224566937, 0],
},
],
江干区: [{
name: "33010164",
value: [120.197120989581, 30.2722505771474, 0],
},
{
name: "33015265",
value: [120.26602565373, 30.3175431482886, 0],
},
],
拱墅区: [{
name: "33010487",
value: [120.151508870388, 30.2850301964867, 0],
},
{
name: "33014148",
value: [120.173834955998, 30.3708542283502, 0],
},
{
name: "33010164",
value: [120.197120989581, 30.2722505771474, 0],
},
{
name: "33015265",
value: [120.26602565373, 30.3175431482886, 0],
},
],
西湖区: [{
name: "33010216",
value: [120.14096678401, 30.273505030871, 0],
},
{
name: "33014161",
value: [120.10112323964, 30.29794196665, 0],
},
{
name: "33011003",
value: [120.18915669224, 30.237287162543, 0],
},
{
name: "33015057",
value: [120.19922034051, 30.235133348706, 0],
},
],
滨江区: [{
name: "33011065",
value: [120.2151700964, 30.199560551644, 0],
},
{
name: "33019249",
value: [120.13585717584, 30.16852739334, 0],
},
],
萧山区: [{
name: "33017388",
value: [120.24728418493, 30.180294169914, 0],
},
{
name: "33015378",
value: [119.033746561182, 29.6055595157275, 0],
},
],
余杭区: [{
name: "33015501",
value: [120.29494435694, 30.412715702058, 0],
},
{
name: "33014521",
value: [120.29659123326, 30.501453905111, 0],
},
],
富阳区: [{
name: "33011406",
value: [119.94520844126, 30.053833453656, 0],
},
{
name: "33015403",
value: [119.66472313905, 29.985457240343, 0],
},
],
淳安县: [{
name: "33011922",
value: [119.043620031871, 29.6058306092139, 0],
},
{
name: "33019919",
value: [119.046607704754, 29.6038488141601, 0],
},
],
临安区: [{
name: "33011601",
value: [119.70560939215, 30.229842691419, 0],
},
{
name: "33019608",
value: [119.7051829209, 30.231791316266, 0],
},
],
}
}
];
// console.log(mapArrDate[0][2014]['浙江省'][0].value[3])
for (var years = 0; years < mapArrDate.length; years++) {
// console.log(mapArrDate[0][2014]['浙江省'][0].value[3])
for(var cityNum=0;cityNum<mapArrDate[years];cityNum++){
console.log(mapArrDate[years][0])
}
console.log(mapArrDate[years])
}
// 模拟动态修改点级别
// 修改浙江-杭州/湖州/嘉兴
let arrZj = mapArrDate[0][2014]['浙江省'];
arrZj.forEach(function(item, index, arrZj) {
arrZj[0].value[2] = 2;
arrZj[1].value[2] = 3;
arrZj[2].value[2] = 3;
})
//修改杭州-余杭区/拱墅区/西湖区
let arrHz = mapArrDate[0][2014]['杭州市'];
arrHz.forEach(function(item, index, arrHz) {
arrHz[0].value[2] = 2;
arrHz[1].value[2] = 3;
arrHz[2].value[2] = 2;
})
var dateName=[];//名称
var dataValue=[]; //数值
var dataLevel=[];// 等级
//for循环chartsJSON
for (var i = 0; i < mapArr['杭州市'].length; i++) {
dateName.push(mapArr['杭州市'][i].name);
dataValue.push(mapArr['杭州市'][i].value[3]);
dataLevel.push(mapArr['杭州市'][i].value[2]);
};
console.log(dataValue)
echarts.extendsMap = function(id, opt) {
// 实例
var chart = this.init(document.getElementById(id));
var curGeoJson = {};
var cityMap = {
杭州市: hangzhou,
舟山市: zhoushan,
嘉兴市: jiaxin,
宁波市: ningbo,
台州市: taizhou,
温州市: wenzhou,
丽水市: lishui,
湖州市: huzhou,
衢州市: quzhou,
金华市: jinhua,
绍兴市: shaoxing,
};
var quyMap = {
余杭区: yuhang,
西湖区: xihu,
上城区: shangcheng,
下城区: xiacheng,
滨江区: binjiang,
桐庐县: tonglu,
富阳区: fuyang,
建德市: jiande,
萧山区: xiaoshan,
拱墅区: gongshu,
临安区: linan,
江干区: jianggan,
淳安县: chunan,
};
var geoCoordMap = {
杭州: [120.210896, 30.246036],
湖州: [120.086881, 30.894178],
嘉兴: [120.755623, 30.746814],
绍兴: [120.583305, 30.051136],
宁波: [121.62454, 29.860258],
舟山: [122.207395, 29.985578],
衢州: [118.859307, 28.970229],
金华: [119.647265, 29.079195],
台州: [121.42079, 28.655716],
丽水: [119.923249, 28.467694],
温州: [120.699279, 27.993849],
};
var levelColorMap = {
"0": "#fff",
"1": "#26cff3)",
"2": "#f0fb30",
"3": "#d11864",
};
var colors = [
["red", "pink", "yellow", "blue", "green", "purple"],
];
var colorIndex = 0;
var year = ["2014", "2015", "2016", "2017", "2020", "2021"];
var mapData = [
[],
[],
[],
[],
[],
[]
];
/*柱子Y名称*/
var categoryData = [];
var barData = [];
for (var key in geoCoordMap) {
categoryData.push(key);
mapData[0].push({
"year": year[0],
"name": key,
"value": randomNum(100, 500)
});
mapData[1].push({
"year": year[1],
"name": key,
"value": randomNum(100, 300)
});
mapData[2].push({
"year": year[2],
"name": key,
"value": randomNum(100, 300)
});
mapData[3].push({
"year": year[3],
"name": key,
"value": randomNum(100, 300)
});
mapData[4].push({
"year": year[4],
"name": key,
"value": randomNum(100, 300)
});
mapData[5].push({
"year": year[5],
"name": key,
"value": randomNum(100, 300)
});
}
for (var i = 0; i < mapData.length; i++) {
barData.push([]);
for (var j = 0; j < mapData[i].length; j++) {
barData[i].push(mapData[i][j].value)
}
}
var defaultOpt = {
mapName: "zhejiang", // 地图展示
goDown: false, // 是否下钻
activeArea: [], // 区域高亮,同echarts配置项
data: [],
// 下钻回调(点击的地图名、实例对象option、实例对象)
callback: function(name, option, instance) {},
};
if (opt) opt = this.util.extend(defaultOpt, opt);
// 层级索引
var name = [opt.mapName];
var idx = 0;
var pos = {
leftPlus: 115,
leftCur: 150,
left: 198,
top: 50,
};
var line = [
[0, 0],
[8, 8],
[0, 16],
];
// style
var style = {
font: '14px "Microsoft YaHei", sans-serif',
textColor: "#0ab7ff",
lineColor: "rgba(147, 235, 248, 0.5)",
};
var handleEvents = {
/**
* i 实例对象
* o option
* n 地图名
**/
resetOption: function(i, o, n) {
var breadcrumb = this.createBreadcrumb(n);
var j = name.indexOf(n);
var l = o.baseOption.graphic.length;
if (j < 0) {
o.baseOption.graphic.push(breadcrumb);
o.baseOption.graphic[0].children[0].shape.x2 = 140;
o.baseOption.graphic[0].children[1].shape.x2 = 140;
o.baseOption.series[0].data = mapArrDate[0][2014]['杭州市'];
name.push(n);
idx++;
}
else {
o.graphic.splice(j + 2, l);
if (o.graphic.length <= 2) {
o.graphic[0].children[0].shape.x2 = 50;
o.graphic[0].children[1].shape.x2 = 50;
o.series[0].data = arr;
}
name.splice(j + 1, l);
idx = j;
pos.leftCur -= pos.leftPlus * (l - j - 1);
}
o.baseOption.geo.map = n;
// o.baseOption.geo.zoom = 0.4;
i.clear();
i.setOption(o);
opt.callback(n, o, i);
},
/**
* name 地图名
**/
createBreadcrumb: function(name) {
var cityToPinyin = {
杭州市: "hangzhou",
舟山市: "zhoushan",
嘉兴市: "jiaxing",
温州市: "wenzhou",
衢州市: "quzhou",
丽水市: "lishui",
金华市: "jinhua",
台州市: "taizhou",
宁波市: "ningbo",
绍兴市: "shaoxing",
湖州市: "huzhou",
};
var nameText = "";
if (
name == "临安区" ||
name == "余杭区" ||
name == "上城区" ||
name == "下城区" ||
name == "江干区" ||
name == "滨江区" ||
name == "西湖区" ||
name == "拱墅区" ||
name == "萧山区" ||
name == "桐庐县" ||
name == "建德市" ||
name == "富阳区" ||
name == "淳安县"
) {
nameText = "杭州市";
} else {
nameText = name;
}
var breadcrumb = {
//标题市级样式
type: "group",
id: name,
left: 80,
top: 30,
children: [{
type: "polyline",
left: -90,
top: 0,
shape: {
points: line,
},
style: {
stroke: "#0ab7ff",
key: name,
// lineWidth: 2,
},
onclick: function() {
var name = this.style.key;
handleEvents.resetOption(chart, optionProv, name);
},
},
{
type: "text",
left: -68,
top: 0,
style: {
text: nameText,
textAlign: "center",
fill: style.textColor,
font: '12px "Microsoft YaHei", sans-serif',
},
onclick: function() {
var name = this.style.text;
handleEvents.resetOption(chart, optionCity, name);
},
},
{
// 标题市级拼音
type: "text",
left: -68,
top: 15,
style: {
name: name,
text: cityToPinyin[name] ? cityToPinyin[name].toUpperCase() : "",
textAlign: "center",
fill: style.textColor,
font: '10px "Microsoft YaHei", sans-serif',
},
onclick: function() {
// console.log(this.style);
var name = this.style.name;
handleEvents.resetOption(chart, optionDist, name);
},
},
],
};
pos.leftCur += pos.leftPlus;
return breadcrumb;
},
// 设置effectscatter
initSeriesData: function(data) {
var temp = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
temp.push({
name: data[i].name,
value: geoCoord.concat(data[i].value, data[i].level),
});
}
}
return temp;
},
};
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
// debugger;
return res;
};
var convertToLineData = function(data, gps) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem.name];
//debugger;
var toCoord = gps; //郑州
// var toCoord = geoGps[Math.random()*3];
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem.value
}, {
coord: toCoord,
}]);
}
}
return res;
};
// 省级配置
var optionProv = {
timeline: {
data: year,
axisType: 'category',
autoPlay: true, //时间轴自动播放
playInterval: 3000,
left: '10%',
right: '10%',
bottom: '2%',
width: '80%',
// height: null,
label: {
normal: {
textStyle: {
color: '#ddd'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
symbolSize: 10,
lineStyle: {
color: '#555'
},
checkpointStyle: {
borderColor: '#777',
borderWidth: 2
},
controlStyle: {
showNextBtn: true,
showPrevBtn: true,
normal: {
color: '#666',
borderColor: '#666'
},
emphasis: {
color: '#aaa',
borderColor: '#aaa'
}
},
},
baseOption: {
backgroundColor: "#336699",
animation: true,
animationDuration: 1000,
animationEasing: 'cubicInOut',
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut',
grid: {
right: '10%',
top: '18%',
bottom: '10%',
width: '20%'
},
tooltip: {
trigger: 'axis', // hover触发器
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
shadowStyle: {
color: 'rgba(150,150,150,0.1)' //hover颜色
}
}
},
graphic: [{
//标题的线
type: "group",
left: 15,
top: 20,
children: [{
type: "line",
left: 0,
top: -20,
shape: {
x1: 0,
y1: 0,
x2: 50,
y2: 0,
},
style: {
stroke: style.lineColor,
},
},
{
type: "line",
left: 0,
top: 20,
shape: {
x1: 0,
y1: 0,
x2: 50,
y2: 0,
},
style: {
stroke: style.lineColor,
},
},
],
},
{
//省级标题样式
id: name[idx],
type: "group",
left: 20,
top: 30,
children: [{
type: "polyline",
left: 90,
top: 0,
shape: {
points: line,
},
style: {
stroke: "transparent",
key: name[0],
},
onclick: function() {
var name = this.style.key;
handleEvents.resetOption(chart, option, name);
},
},
{
type: "text",
left: 0,
top: 0,
style: {
text: name[0] === "浙江" ? "浙江省" : name[0],
textAlign: "center",
fill: style.textColor,
font: '12px "Microsoft YaHei", sans-serif',
},
onclick: function() {
handleEvents.resetOption(chart, option, "浙江");
},
},
{
//省份拼音
type: "text",
left: 0,
top: 15,
style: {
text: "ZHEJIANG",
textAlign: "center",
fill: style.textColor,
font: '10px "Microsoft YaHei", sans-serif',
},
onclick: function() {
handleEvents.resetOption(chart, option, "浙江");
},
},
],
},
],
geo: {
map: opt.mapName,
right: '35%',
left: '5%',
// roam: true, 是否缩放--在移动端无效
zoom: 1,
// selectedMode:true, //多选地图区域
label: {
normal: {
//地图名字
show: true,
textStyle: {
color: "#fff",
fontSize: 10,
},
},
emphasis: {
//选中后颜色
textStyle: {
color: "#fff",
},
},
},
itemStyle: {
//地图颜色配置
normal: {
borderColor: "rgba(147, 235, 248, 1)",
borderWidth: 1,
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
shadowColor: "rgba(128, 217, 248, 1)",
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10,
},
emphasis: {
areaColor: "#389BB7", //选中地图颜色
borderWidth: 0,
},
},
regions: opt.activeArea.map(function(item) {
if (typeof item !== "string") {
return {
name: item.name,
itemStyle: {
normal: {
areaColor: item.areaColor || "#389BB7",
},
},
label: {
normal: {
show: item.showLabel,
textStyle: {
color: "#fff",
},
},
},
};
} else {
return {
name: item,
itemStyle: {
normal: {
borderColor: "#91e6ff",
areaColor: "#389BB7",
},
},
};
}
}),
},
series: [{
type: "effectScatter", //涟漪特效
coordinateSystem: "geo",
// symbol: 'diamond',
symbolSize: 5, //标记的大小
showEffectOn: "render",
rippleEffect: {
//涟漪特效相关配置。
period: 5, //动画的周期，秒数。
scale: 8, //波纹的最大缩放比例。
brushType: "stroke", //波纹的绘制方式，可选 'stroke' 和 'fill'。
},
hoverAnimation: true,
itemStyle: {
normal: {
color: function(params) {
return levelColorMap[params.value[2]];
},
shadowBlur: 5,
shadowColor: "#333",
},
},
// data: handleEvents.initSeriesData(opt.data),
data: mapArrDate[0][2014]['杭州市'],
}, ],
},
options: []
};
for (var n = 0; n < year.length; n++) {
optionProv.options.push({
title: [{
id: 'statistic',
text: year[n] + "省级内容",
left: '70%',
top: '5%',
textStyle: {
color: '#fff',
fontSize: 24
}
}],
xAxis: {
type: 'value',
scale: true,
position: 'top',
min: 0,
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 2,
textStyle: {
color: '#aaa'
}
},
},
yAxis: {
type: 'category',
// name: 'TOP 20',
nameGap: 16,
axisLine: {
show: true,
lineStyle: {
color: '#ddd'
}
},
axisTick: {
show: false,
lineStyle: {
color: '#ddd'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#ddd'
}
},
data: categoryData
},
series: [
//未知作用
{
//文字和标志
name: 'light',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(mapData[n]),
symbol: 'pin', //气泡
symbolSize: function(val) {
return 40;
},
label: {
normal: {
formatter: '{@[2]}',
// position: 'right',
color: '#fff',
fontSize: 9,
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F62157'
// color: colors[colorIndex][n]
}
}
},
//地图？
{
type: 'map',
map: 'zhejiang',
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#FFFFFF',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: mapData
},
//地图点的动画效果
{
// name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(mapData[n].sort(function(a, b) {
return b.value - a.value;
}).slice(0, 20)),
symbolSize: function(val) {
return 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: colors[colorIndex][n],
shadowBlur: 10,
shadowColor: colors[colorIndex][n]
}
},
zlevel: 1
},
// {
// name: '数据点',
// type: 'scatter',
// coordinateSystem: 'geo',
// symbol: 'pin', //气泡
// symbolSize: function(val) {
// return 32;
// },
// label: {
// normal: {
// show: true,
// textStyle: {
// formatter: '{@value}',
// color: '#fff',
// fontSize: 9,
// }
// }
// },
// itemStyle: {
// normal: {
// color: '#F62157', //标志颜色
// }
// },
// zlevel: 6,
// data: convertData(mapData[n]),
// },
//柱状图
{
zlevel: 1.5,
type: 'bar',
barWidth: 20,
symbol: 'none',
itemStyle: {
normal: {
color: colors[colorIndex][n]
}
},
data: barData[n]
}
]
})
}
chart.setOption(optionProv);
// 添加事件
chart.on("click", function(params) {
var _self = this;
console.log(params.name)
if (opt.goDown && params.name !== name[idx]) {
// 市级配置
if (cityMap[params.name]) {
var url = cityMap[params.name];
$.get(url, function(response) {
curGeoJson = response;
echarts.registerMap(params.name, response);
// 市级内容设置
var optionCity = {
timeline: {
data: year,
axisType: 'category',
autoPlay: true, //时间轴自动播放
playInterval: 3000,
left: '10%',
right: '10%',
bottom: '2%',
width: '80%',
// height: null,
label: {
normal: {
textStyle: {
color: '#ddd'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
symbolSize: 10,
lineStyle: {
color: '#555'
},
checkpointStyle: {
borderColor: '#777',
borderWidth: 2
},
controlStyle: {
showNextBtn: true,
showPrevBtn: true,
normal: {
color: '#666',
borderColor: '#666'
},
emphasis: {
color: '#aaa',
borderColor: '#aaa'
}
},
},
baseOption: {
backgroundColor: "#336699",
animation: true,
animationDuration: 1000,
animationEasing: 'cubicInOut',
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut',
grid: {
right: '10%',
top: '18%',
bottom: '10%',
width: '20%'
},
tooltip: {
trigger: 'axis', // hover触发器
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
shadowStyle: {
color: 'rgba(150,150,150,0.1)' //hover颜色
}
}
},
graphic: [{
//标题的线
type: "group",
left: 15,
top: 20,
children: [{
type: "line",
left: 0,
top: -20,
shape: {
x1: 0,
y1: 0,
x2: 50,
y2: 0,
},
style: {
stroke: style.lineColor,
},
},
{
type: "line",
left: 0,
top: 20,
shape: {
x1: 0,
y1: 0,
x2: 50,
y2: 0,
},
style: {
stroke: style.lineColor,
},
},
],
},
{
//省级标题样式
id: name[idx],
type: "group",
left: 20,
top: 30,
children: [{
type: "polyline",
left: 90,
top: 0,
shape: {
points: line,
},
style: {
stroke: "transparent",
key: name[0],
},
onclick: function() {
var name = this.style.key;
handleEvents.resetOption(chart, option, name);
},
},
{
type: "text",
left: 0,
top: 0,
style: {
text: name[0] === "浙江" ? "浙江省" : name[0],
textAlign: "center",
fill: style.textColor,
font: '12px "Microsoft YaHei", sans-serif',
},
onclick: function() {
handleEvents.resetOption(chart, option, "浙江");
},
},
{
//省份拼音
type: "text",
left: 0,
top: 15,
style: {
text: "ZHEJIANG",
textAlign: "center",
fill: style.textColor,
font: '10px "Microsoft YaHei", sans-serif',
},
onclick: function() {
handleEvents.resetOption(chart, option, "浙江");
},
},
],
},
],
geo: {
map: opt.mapName,
right: '35%',
left: '5%',
// roam: true, 是否缩放--在移动端无效
zoom: 1,
// selectedMode:true, //多选地图区域
label: {
normal: {
//地图名字
show: true,
textStyle: {
color: "#fff",
fontSize: 10,
},
},
emphasis: {
//选中后颜色
textStyle: {
color: "#fff",
},
},
},
itemStyle: {
//地图颜色配置
normal: {
borderColor: "rgba(147, 235, 248, 1)",
borderWidth: 1,
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
shadowColor: "rgba(128, 217, 248, 1)",
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10,
},
emphasis: {
areaColor: "#389BB7", //选中地图颜色
borderWidth: 0,
},
},
regions: opt.activeArea.map(function(item) {
if (typeof item !== "string") {
return {
name: item.name,
itemStyle: {
normal: {
areaColor: item.areaColor || "#389BB7",
},
},
label: {
normal: {
show: item.showLabel,
textStyle: {
color: "#fff",
},
},
},
};
} else {
return {
name: item,
itemStyle: {
normal: {
borderColor: "#91e6ff",
areaColor: "#389BB7",
},
},
};
}
}),
},
series: [{
type: "effectScatter", //涟漪特效
coordinateSystem: "geo",
},
],
},
options: []
};
for (var n = 0; n < year.length; n++) {
optionCity.options.push({
title: [{
id: 'statistic',
text: year[n] + "市级内容",
left: '70%',
top: '5%',
textStyle: {
color: 'red',
fontSize: 24
}
}],
xAxis: {
type: 'value',
scale: true,
position: 'top',
min: 0,
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 2,
textStyle: {
color: '#aaa'
}
},
},
yAxis: {
type: 'category',
// name: 'TOP 20',
nameGap: 16,
axisLine: {
show: true,
lineStyle: {
color: '#ddd'
}
},
axisTick: {
show: false,
lineStyle: {
color: '#ddd'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#ddd'
}
},
// data: categoryData
data:dateName
// data: ["余杭区", "西湖区", "上城区", "下城区", "江干区", "拱墅区","滨江区", "临安区","桐庐县","淳安县","建德市","萧山区","富阳区",]
},
series: [
//地图点的动画效果
{
// name: 'Top 5',
type: "effectScatter", //涟漪特效
coordinateSystem: "geo",
data: mapArrDate[0][2014]['杭州市'],
symbolSize: 6,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: function(params) {
return levelColorMap[params.value[2]];
},
shadowBlur: 5,
shadowColor: "#333",
},
},
zlevel: 1
},
//柱状图
{
zlevel: 1.5,
type: 'bar',
barWidth: 30,
symbol: 'none',
itemStyle: {
normal: {
// color: function(params) {
// return levelColorMap[params.value[1]];
// },
color: colors[colorIndex][n]
}
},
data: dataValue
}
]
})
}
handleEvents.resetOption(_self, optionCity, params.name);
});
}
// 区县配置
if (quyMap[params.name]) {
var url = quyMap[params.name];
$.get(url, function(response) {
curGeoJson = response;
// 区县内容设置
var optionDist = {
timeline: {
data: year,
axisType: 'category',
autoPlay: true, //时间轴自动播放
playInterval: 3000,
left: '10%',
right: '10%',
bottom: '2%',
width: '80%',
// height: null,
label: {
normal: {
textStyle: {
color: '#ddd'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
symbolSize: 10,
lineStyle: {
color: '#555'
},
checkpointStyle: {
borderColor: '#777',
borderWidth: 2
},
controlStyle: {
showNextBtn: true,
showPrevBtn: true,
normal: {
color: '#666',
borderColor: '#666'
},
emphasis: {
color: '#aaa',
borderColor: '#aaa'
}
},
},
baseOption: {
backgroundColor: "#336699",
animation: true,
animationDuration: 1000,
animationEasing: 'cubicInOut',
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut',
grid: {
right: '10%',
top: '18%',
bottom: '10%',
width: '20%'
},
tooltip: {
trigger: 'axis', // hover触发器
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
shadowStyle: {
color: 'rgba(150,150,150,0.1)' //hover颜色
}
}
},
graphic: [{
//标题的线
type: "group",
left: 15,
top: 20,
children: [{
type: "line",
left: 0,
top: -20,
shape: {
x1: 0,
y1: 0,
x2: 50,
y2: 0,
},
style: {
stroke: style.lineColor,
},
},
{
type: "line",
left: 0,
top: 20,
shape: {
x1: 0,
y1: 0,
x2: 50,
y2: 0,
},
style: {
stroke: style.lineColor,
},
},
],
},
{
//省级标题样式
id: name[idx],
type: "group",
left: 20,
top: 30,
children: [{
type: "polyline",
left: 90,
top: 0,
shape: {
points: line,
},
style: {
stroke: "transparent",
key: name[0],
},
onclick: function() {
var name = this.style.key;
handleEvents.resetOption(chart, option, name);
},
},
{
type: "text",
left: 0,
top: 0,
style: {
text: name[0] === "浙江" ? "浙江省" : name[0],
textAlign: "center",
fill: style.textColor,
font: '12px "Microsoft YaHei", sans-serif',
},
onclick: function() {
handleEvents.resetOption(chart, option, "浙江");
},
},
{
//省份拼音
type: "text",
left: 0,
top: 15,
style: {
text: "ZHEJIANG",
textAlign: "center",
fill: style.textColor,
font: '10px "Microsoft YaHei", sans-serif',
},
onclick: function() {
handleEvents.resetOption(chart, option, "浙江");
},
},
],
},
],
geo: {
map: opt.mapName,
right: '35%',
left: '5%',
// roam: true, 是否缩放--在移动端无效
zoom: 1,
// selectedMode:true, //多选地图区域
label: {
normal: {
//地图名字
show: true,
textStyle: {
color: "#fff",
fontSize: 10,
},
},
emphasis: {
//选中后颜色
textStyle: {
color: "#fff",
},
},
},
itemStyle: {
//地图颜色配置
normal: {
borderColor: "rgba(147, 235, 248, 1)",
borderWidth: 1,
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
shadowColor: "rgba(128, 217, 248, 1)",
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10,
},
emphasis: {
areaColor: "#389BB7", //选中地图颜色
borderWidth: 0,
},
},
regions: opt.activeArea.map(function(item) {
if (typeof item !== "string") {
return {
name: item.name,
itemStyle: {
normal: {
areaColor: item.areaColor || "#389BB7",
},
},
label: {
normal: {
show: item.showLabel,
textStyle: {
color: "#fff",
},
},
},
};
} else {
return {
name: item,
itemStyle: {
normal: {
borderColor: "#91e6ff",
areaColor: "#389BB7",
},
},
};
}
}),
},
series: [{
type: "effectScatter", //涟漪特效
coordinateSystem: "geo",
},
],
},
options: []
};
for (var n = 0; n < year.length; n++) {
optionDist.options.push({
title: [{
id: 'statistic',
text: year[n] + "区县内容",
left: '70%',
top: '5%',
textStyle: {
color: 'red',
fontSize: 24
}
}],
xAxis: {
type: 'value',
scale: true,
position: 'top',
min: 0,
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 2,
textStyle: {
color: '#aaa'
}
},
},
yAxis: {
type: 'category',
// name: 'TOP 20',
nameGap: 16,
axisLine: {
show: true,
lineStyle: {
color: '#ddd'
}
},
axisTick: {
show: false,
lineStyle: {
color: '#ddd'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#ddd'
}
},
data: categoryData
// data: ["余杭区", "西湖区", "上城区", "下城区", "江干区", "拱墅区","滨江区", "临安区","桐庐县","淳安县","建德市","萧山区","富阳区",]
},
series: [
//地图点的动画效果
{
// name: 'Top 5',
type: "effectScatter", //涟漪特效
coordinateSystem: "geo",
data: mapArrDate[0][2014]['杭州市'],
symbolSize: 6,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: function(params) {
return levelColorMap[params.value[2]];
},
shadowBlur: 5,
shadowColor: "#333",
},
},
zlevel: 1
},
//柱状图
{
zlevel: 1.5,
type: 'bar',
barWidth: 30,
symbol: 'none',
itemStyle: {
normal: {
// color: function(params) {
// return levelColorMap[params.value[1]];
// },
color: colors[colorIndex][n]
}
},
data: [30,40,50,60,70,50,40,55,54,34,46,24,36]
}
]
})
}
echarts.registerMap(params.name, response);
handleEvents.resetOption(_self, optionDist, params.name);
});
}
}
});
chart.on("mouseover", function(params) {});
chart.on("mouseout", function(params) {});
return chart;
};
function randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
}
$.getJSON(zhejiang, function(geoJson) {
echarts.registerMap("浙江", geoJson);
var myChart = echarts.extendsMap("chart-panel", {
mapName: "浙江", // 地图名
goDown: true, // 是否下钻
// 下钻回调
callback: function(name, option, instance) {
// console.log(name, option, instance);
},
// 数据展示
data: arrZj,
});
});
截图如下
