<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./assets/js/jquery-1.9.1.min.js"></script>
<script src="./assets/dist/echarts.js"></script>
<style>
.k{
color: #A3E00B;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; overflow: auto; overflow: hidden;"></div>
<script>
$("#map").height($(window).height()-20);
$(window).resize(function(){
$("#map").height($(window).height()-20);
});
require.config({
paths:{echarts:"./assets/dist"}
});
require(
['echarts',
'echarts/theme/macarons',
'echarts/chart/map',
],
function(ec,theme){
var myChart = ec.init(document.getElementById('map'),theme);
option =
{
title:{text:'订单量',subtext:'',x:'center'},
tooltip:{trigger:'item'},
legend:{orient:'vertical',x:'left',data:['订单量']},
dataRange:
{
x:'left',y:'bottom',
splitList:
[
{start:500},
{start:900,end:1500},
{start:310,end:1000},
{start:200,end:300},
{start:10,end:200,label:'10到200'},
{start:5,end:5,label:'5',color:'black'},
{end:10}
],
color:['#E0022B','#E09107','#A3E00B']
},
show:
{
show:true, orient:'vertical',x:'right',y:'center',feature:{
mark:
{
show:true
},
dataView:{dhoe:true,readOnly:false},
restore:{show:true},
savaAsImage:{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}
}
},
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)},
]
}]
};
myChart.setOption(option);
}
)
</script>
</body>
</html>