echarts3 實現中國地圖
阿新 • • 發佈：2019-01-31
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入 echarts--> <script src="assets/plugins/echarts3/echarts3.min.js"></script> <!--引入 china.js echarts3不在支援內建地圖檔案，需要另外引入--> <script src="assets/plugins/echarts3/js/china.js"></script> </head> <body> <div id="chinaMap" style="width: 500px;height: 500px;"></div> </body> <script> /** * 基於準備好的dom，初始化echarts例項 * */ var myChart = echarts.init(document.getElementById("chinaMap")); /** * 指定圖表的配置項和資料 * */ var option= { backgroundColor: '#ccc', //設定背景顏色 title: { show:true, text: '中國地圖', subtext: '', x:'center' }, tooltip : { trigger: 'item' }, //左側小導航圖示 visualMap: { show : true, x: 'left', y: 'bottom', splitList: [ {start: 10, end:20}, {start: 6, end: 10}, {start: 0, end: 6}, ], color: ['#a5ad00', '#8bdd00', '#2cd493'] }, //配置屬性 series: [{ name: '數量', type: 'map', mapType: 'china', roam: false, zoom:1.2, label: { normal: { show: true , }, emphasis: { show: false } }, data:[{name: '北京',value:randomData() },{name: '天津',value: randomData() }, {name: '上海',value: randomData() },{name: '重慶',value: randomData() }, {name: '河北',value: randomData() },{name: '河南',value: randomData() }, {name: '雲南',value: randomData() },{name: '遼寧',value: randomData() }, {name: '黑龍江',value: randomData() },{name: '湖南',value: randomData() }, {name: '安徽',value: randomData() },{name: '山東',value: randomData() }, {name: '新疆',value: randomData() },{name: '江蘇',value: randomData() }, {name: '浙江',value: randomData() },{name: '江西',value: randomData() }, {name: '湖北',value: randomData() },{name: '廣西',value: randomData() }, {name: '甘肅',value: randomData() },{name: '山西',value: randomData() }, {name: '內蒙古',value: randomData() },{name: '陝西',value: randomData() }, {name: '吉林',value: randomData() },{name: '福建',value: randomData() }, {name: '貴州',value: randomData() },{name: '廣東',value: randomData() }, {name: '青海',value: randomData() },{name: '西藏',value: randomData() }, {name: '四川',value: randomData() },{name: '寧夏',value: randomData() }, {name: '海南',value: randomData() },{name: '臺灣',value: randomData() }, {name: '香港',value: randomData() },{name: '澳門',value: randomData() }] }] }; /** * 使用剛指定的配置項和資料顯示圖表。 * */ myChart.setOption(option); //獲取隨機數 function randomData() { return Math.round(Math.random()*(12-1)+1) } </script> </html>
效果圖
