echarts3 實現中國地圖
china.js下載地址（及各省市） https://download.csdn.net/download/super__code/10676410
效果圖
直接貼代碼
<!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>
總結
以上是生活随笔為你收集整理的echarts3 实现中国地图的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
