<html>
<body>
<div id="cbar" style=" 100%; height: 360px"></div>
<script src="${ctxStatic}/echarts3/echarts.min.js"></script>
<script src="${ctxStatic}/mapjs/guangdong.js"></script>
<script type="text/javascript">
$(function(){
//使用echarts.init()方法初始化一个Echarts实例，在init方法中传入echarts map的容器 dom对象
var mapChart5 = echarts.init(document.getElementById('cbar'));
// mapChart的配置
var option5 = {
title:{
text: '广东XX分布',
left:'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} (个)'
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
visualMap: {
min: 0,
max: 2000,
text:['高','低'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue','yellow', 'orangered']
}
},
series:[
{
name: '广东各市',
type: 'map',//type必须声明为 map 说明该图标为echarts 中map类型
map: '广东', //这里需要特别注意。如果是中国地图，map值为china，如果为各省市则为中文
layoutCenter:['50%','50%'],
aspectScale: 1, //长宽比. default: 0.75
zoom: 0,
//roam: true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: [
{name:'广州市', value: 1800},
{name:'佛山市', value: 1700},
{name:'珠海市', value: 1600},
{name:'深圳市', value: 1400},
{name:'东莞市', value: 1200},
{name:'湛江市', value: 1000},
{name:'揭阳市', value: 800},
{name:'清远市', value: 600},
{name:'阳江市', value: 400},
{name:'云浮市', value: 200},
{name:'梅州市', value: 100},
{name:'肇庆市', value: 300},
{name:'江门市', value: 500},
{name:'惠州市', value: 700},
{name:'茂名市', value: 900},
{name:'汕头市', value: 1100},
{name:'韶关市', value: 223},
{name:'河源市', value: 458},
{name:'潮州市', value: 556},
{name:'汕尾市', value: 120},
{name:'中山市', value: 875}
]
}
]
};
//设置图表的配置项
mapChart5.setOption(option5);
})
</script>
</body>
</html>
地图JSON和JS : https://download.csdn.net/download/yccmelody/10380590