echarts中国地图按照华中、华北、华东等设置
echarts中国地图按照华中、华北、华东等设置，完整代码附上
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="china.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
function randomData() {
return Math.round(Math.random()*1000);
}
option = {
title: {
text: '',
subtext: '',
left: 'left'
},
//鼠标移动提示框
// tooltip: {
// trigger: 'item',
// },
legend: {
orient: 'vertical',
left: 'left',
data:['']
},
visualMap: {
min: 0,
max: 2500,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本，默认为数值文本
calculable: true
},
dataRange: {
x: '-1000px',//图例横轴位置
y: '-1000px',//图例纵轴位置
orient: 'horizontal',
min: 0,
max: 55000,
text: ['高', '低'], // 文本，默认为数值文本
splitList: [
{start: 1, end: 1, color: '#038ccc'},
{start: 2, end: 2, color: '#54c3f0'},
{start: 3, end: 3, color: '#637c85'},
{start: 4, end: 4, color: '#b2b7bb'},
{start: 5, end: 5, color: '#fefefe'},
{start: 6, end: 6, color: '#fefefe'},
{start: 7, end: 7, color: '#116fb8'},
{start: 8, end: 8, color: '#f9f9f9'},
{start: 11, end: 11, color: '#fff'},
],
splitNumber: 0
},
backgroundColor: 'rgba(0,0,0,.02)',//画布背景颜色
geo: {
show: true,
map: 'china',
label: {
show: false
},
roam: false,
itemStyle: {
normal: {
color: 'rgb(7,60,141)',
borderColor: '#a5a0a0',
borderWidth: 2,
shadowBlur: 5,
shadowColor: 'rgba(0,0,0,0.01)',
shadowOffsetX: 1,
shadowOffsetY: 1,
},
emphasis: {
areaColor: '#fff',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
borderWidth: 1,
shadowColor: 'rgba(200, 200, 200, 0.01)',
}
}
},
series: [
{
name: '医院',
type: 'map',
mapType: 'china',
showLegendSymbol : false,
roam: false,
label: {
normal: {
show: true
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderWidth: 1, //设置外层边框
lineStyle: { type: 'solid', color:'#666',background:'red', },
borderColor: '#bccace',
shadowBlur: 10,
shadowColor: 'rgba(0,0,0,.5)',
shadowOffsetX: 1,
shadowOffsetY: 1,
label: {
fontSize:16,
lineHeght:16,
height:16,
color:'#000',
show: true,
formatter:function(params){
if(params.name == '台湾' || params.name == '澳门' || params.name == '香港' || params.name == '南海诸岛' || params.name == '西北' || params.name == '西南'){
return '';
}
params.name = params.name.substring(0,2);
return params.name+""+params.data.percent//+"\r\n"+params.data.val+"\r\n"+"Top"+params.value;
},
}
}
},
emphasis: {
label: {
show: true
}
},
data:[
{name: '华东',value: 1,val:561,percent:'5' },
{name: '华北',value: 2,val:306,percent:'3' },
{name: '华南',value: 3,val:274,percent:'1' },
{name: '华中',value: 4,val:241,percent:'4' },
{name: '西南',value: 5,val:108,percent:'' },
{name: '西北',value: 6,val:53,percent:''},
{name: '东北',value: 7,val:19,percent:'4' },
{name: '台湾', value: 8,percent:'' },
{name: '香港', value: 9,percent:'' },
{name: '澳门', value: 10,percent:'' },
{name: '南海诸岛', value: 11,percent:'' },
]
}
]
};;
myChart.on('mouseover', function (params) {
var areaName=params.name;
console.log(areaName);
});
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
浙公网安备 33010602011771号