話不多說,直接上代碼
以下是完整示例代碼:
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script type="text/javascript" src="echarts.min.js"></script><script src="china.js"></script><style>#china-map {width:1000px; height: 1000px;margin: auto;}</style>
</head>
<body><div id="china-map"></div>
<script type="text/javascript">var option = {// title : {// text: '訂單量',// subtext: '純屬虛構',// x:'center'// },tooltip : {//提示框組件。trigger: 'item'//數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。},legend: {orient: 'horizontal',//圖例的排列方向x:'left',//圖例的位置data:['訂單量']},visualMap: {//顏色的設置 dataRangex: 'left',y: 'center',splitList: [{start: 1500},{start: 900, end: 1500},{start: 310, end: 1000},{start: 200, end: 300},{start: 10, end: 200, label: '10 到 200（自定義label）'},{start: 5, end: 5, label: '5（自定義特殊顏色）', color: 'black'},{end: 10}],
// min: 0,
// max: 2500,
// calculable : true,//顏色呈條狀text:['高','低'],// 文本，默認為數值文本color: ['#E0022B', '#E09107', '#A3E00B']},toolbox: {//工具欄show: true,orient : 'vertical',//工具欄 icon 的布局朝向x: 'right',y: 'center',feature : {//各工具配置項。mark : {show: true},dataView : {show: true, readOnly: false},//數據視圖工具，可以展現當前圖表所用的數據，編輯后可以動態更新。restore : {show: true},//配置項還原。saveAsImage : {show: true}//保存為圖片。}},roamController: {//控制地圖的上下左右放大縮小 圖上沒有顯示show: true,x: 'right',mapTypeControl: {'china': true}},series : [{name: '訂單量',type: 'map',mapType: 'china',roam: false,//是否開啟鼠標縮放和平移漫游itemStyle:{//地圖區域的多邊形 圖形樣式normal:{//是圖形在默認狀態下的樣式label:{show:true,//是否顯示標簽textStyle: {color: "rgb(249, 249, 249)"}}},emphasis:{//是圖形在高亮狀態下的樣式,比如在鼠標懸浮或者圖例聯動高亮時label:{show:true}}},top:"3%",//組件距離容器的距離data:[{name: '北京',value: Math.round(Math.random()*2000)},{name: '天津',value: Math.round(Math.random()*2000)},{name: '上海',value: Math.round(Math.random()*2000)},{name: '重慶',value: Math.round(Math.random()*2000)},{name: '河北',value: 0},{name: '河南',value: Math.round(Math.random()*2000)},{name: '云南',value: 5},{name: '遼寧',value: 305},{name: '黑龍江',value: Math.round(Math.random()*2000)},{name: '湖南',value: 200},{name: '安徽',value: Math.round(Math.random()*2000)},{name: '山東',value: Math.round(Math.random()*2000)},{name: '新疆',value: Math.round(Math.random()*2000)},{name: '江蘇',value: Math.round(Math.random()*2000)},{name: '浙江',value: Math.round(Math.random()*2000)},{name: '江西',value: Math.round(Math.random()*2000)},{name: '湖北',value: Math.round(Math.random()*2000)},{name: '廣西',value: Math.round(Math.random()*2000)},{name: '甘肅',value: Math.round(Math.random()*2000)},{name: '山西',value: Math.round(Math.random()*2000)},{name: '內蒙古',value: Math.round(Math.random()*2000)},{name: '陜西',value: Math.round(Math.random()*2000)},{name: '吉林',value: Math.round(Math.random()*2000)},{name: '福建',value: Math.round(Math.random()*2000)},{name: '貴州',value: Math.round(Math.random()*2000)},{name: '廣東',value: Math.round(Math.random()*2000)},{name: '青海',value: Math.round(Math.random()*2000)},{name: '西藏',value: Math.round(Math.random()*2000)},{name: '四川',value: Math.round(Math.random()*2000)},{name: '寧夏',value: Math.round(Math.random()*2000)},{name: '海南',value: Math.round(Math.random()*2000)},{name: '臺灣',value: Math.round(Math.random()*2000)},{name: '香港',value: Math.round(Math.random()*2000)},{name: '澳門',value: Math.round(Math.random()*2000)}]}]};var myChart = echarts.init(document.getElementById('china-map'));myChart.setOption(option);
</script>
</body>
</html>
以下是效果圖:
很多人都說china.js文件不好找 ;
整個demo直接奉上地址,自行下載
鏈接：https://pan.baidu.com/s/1t9M33qdvMy1yc3pUn66VHw
提取碼：vv53
總結
以上是生活随笔為你收集整理的Echarts中国地图的显示的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
