Echarts 官網地址:https://echarts.baidu.com/
?
繪制中國地圖? 注意加載兩個js庫
?
//封裝一個地圖方法
??? function china_map(data){
??????? //初始化echarts
??????? var chart = echarts.init(document.getElementById('main'));
??????? //地圖配置文件
??????? var option = {
??????????? //懸停提示
??????????? tooltip:{
??????????????? trigger:'item'
??????????? },
??????????? //圖例地圖
??????????? visualMap:{
?????????????????? ?//顯示與否
??????????????????? show:true,
??????????????????? //橫坐標
??????????????????? x:'left',
??????????????????? //縱坐標
??????????????????? y:'bottom',
??????????????????? //顏色縱深
??????????????????? splitList:[{start:500,end:600},{start:400,end:500},{start:300,end:400},{start:100,end:200},{start:0,end:100}]
??????????? },
??????????? //載入數據
??????????? series:[{name:'問題數量',type:'map',mapType:'china',data:data}]
??????? };
?
??????? //將配置文件載入實例
??????? chart.setOption(option);
??? }
?
??? //調用地圖
?
??? //通過發送ajax請求,將接口數據獲取
??? $.getJSON('/detail/problem_map',function(data){
??????? //調用繪圖方法
??????? china_map(data);
?
??? });
?