echartMap.zip_echartmap_其他下载-pudn.com

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script src="./js/echart/echarts.min.js"></script> <script src="./js/jquery-3.4.1.min.js"></script> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; } #main { display: flex; height: 100%; border: 1px solid rebeccapurple; } </style> <body> <div id="main"> </div> </body> <script> var myChart = echarts.init(document.getElementById('main')); myChart.showLoading(); window.onresize = myChart.resize; var geoJson = ""; var baseOption = { grid: { left: 10, right: 10 }, title: { left: 'center', text: '湖北省地图', link: 'javascript:map_select("湖北省");', target: 'self', textStyle: { fontSize: 32, }, subtext: "湖北省", sublink: 'javascript:map_select(lastName);', subtarget: 'self', subtextStyle: { fontSize: 26, } }, tooltip: { trigger: 'item', formatter: '{b}<br/>{c}' }, toolbox: { show: true, orient: 'vertical', //工具栏 icon 的布局朝向。 left: 'right', top: 'center', feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {}, // magicType: { // type: ['line', 'bar', 'stack', 'tiled'] // } } }, visualMap: { min: 1, max: 1000, text: ['高风险', '低风险'], realtime: false, calculable: true, inRange: { color: 'white', color: ['yellow', 'orangered'], } }, series: [ { name: '湖北省', type: 'map', // roam:'scale',//如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启 //center: [115.97, 29.71] //当前视角的中心点，用经纬度表示 mapType: 'hb', // 自定义扩展图表类型 label: { show: true }, itemStyle: { areaColor: 'white', borderColor: 'black', borderWidth: 1, borderType: 'solid', // 'solid', 'dashed', 'dotted'。 // shadowBlur: 10, //shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 // shadowColor: 'black', // shadowOffsetX: 2, // shadowOffsetY: 2, // opacity: 1 }, emphasis: { itemStyle: { areaColor: '#6fc5e9', borderColor: 'black', borderWidth: 1, borderType: 'solid', // 'solid', 'dashed', 'dotted'。 shadowBlur: 10, //shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 shadowColor: 'black', shadowOffsetX: 2, shadowOffsetY: 2, opacity: 1 }, }, data: [ { name: '武汉市', value: 2 }, { name: '襄阳市', value: 1 }, ], markPoint: { symbol: 'pin',//提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' symbolSize: [20, 10], } } ] }; $.get('map_json/湖北省.json', function (json) { geoJson = json; myChart.hideLoading(); echarts.registerMap('hb', geoJson); myChart.setOption( baseOption ) }) myChart.on("click", function (param) { debugger map_select(param.name) }) var lastName = '湖北省'; var nowName = '湖北省'; var resName = ''; function map_select(name) { if (nowName == name) { return; } nowName = name; $.get('map_json/' + name + '.json', function (json) { baseOption.series = [ { name: name, type: 'map', mapType: 'WH', // 自定义扩展图表类型 label: { show: true }, data: [ { name: '武汉市', value: 2 }, { name: '襄阳市', value: 1 }, ], } ]; baseOption.title = { text: '湖北省地图', subtext: name }; geoJson = json; myChart.hideLoading(); echarts.registerMap('WH', geoJson); myChart.setOption( baseOption ) }) } </script> </html>