js 通過地圖展示某省或市的某些資訊指標
阿新 • • 發佈:2018-11-26
1. 引入相應地圖的 .json檔案,放入到專案下(WEB-INF/views/js/lib/mapJson/xian.json),可根據情況自己選擇存放目錄。
2. 在jsp檔案中定義一個div 用來容納地圖:
<div style="width: 500px;height: 500px" id="studentOrSchoolAreaDistribution">
</div>
3. 在js中引入該檔案(需要提前到echart官網下載並引入 echarts.min.js檔案):
//展示**市的學校數量分佈 function showEachCountyDetailMap(result, minVal, maxVal) { $('#studentOrSchoolAreaDistribution').empty(); var titleText = '**學校數量分佈'; var chart = echarts.init(document.getElementById('studentOrSchoolAreaDistribution')); chart.showLoading(); $.get('/js/lib/mapJson/xian.json', function (geoJson) { chart.hideLoading(); echarts.registerMap('xian', geoJson); var option = { title: { left: 'center', text: titleText, x: 'center', textStyle: { fontWeight: 'normal', fontSize: 16, color: "#A4BBCE" }, }, tooltip: { trigger: 'item', formatter: '{b}: {c}' }, grid: { left: '3%', right: '3%', bottom: '3%', containLabel: true }, //visualMap 可以根據情況是否引用 visualMap: { show: true, min: minVal, max: maxVal, align: 'left', left: '2%', top: '5%', text: ['高', '低'], realtime: false, calculable: true, inRange: { color: ['#8FCDFF', '#72BAF4', '#56A6E6', '#1C89E2', '#1579CD', '#0C62B0'] } }, series: [{ // name: '', type: 'map', mapType: 'xian', top: '3%', left: '3%', right: '3%', bottom: '5%', label: { normal: { color: '#EEF7FF', fontWeight: 'bolder', fontFamily: 'Microsoft YaHei', formatter: '{b}', position: 'top', show: true }, emphasis: { color: '#EEF7FF', fontWeight: 'bolder', fontFamily: 'Microsoft YaHei', show: true } }, itemStyle: { normal: { borderColor: '#389BB7', areaColor: '#fff', }, emphasis: { areaColor: '#389BB7', borderWidth: 0 } }, animation: false, data: result // result 格式:[{name:'',value:''},{}...] }], }; chart.setOption(option); }); }