<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="js/jquery-2.0.0.js" ></script>
<script type="text/javascript" src="js/echarts.min.js" ></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:500px;"></div>
</body>
<script type="text/javascript">
$.get('jspro/wuzhong.json', function (gansuJson){
echarts.registerMap('吴忠', gansuJson);
var chart = echarts.init(document.getElementById('main'));
var dataMap = [{ name: '利通区' }, { name: '青铜峡市' }, { name: '盐池县' },{ name: '红寺堡区' },{ name: '同心县' },{ name: '上海' }];
option = {
title: {
x: 'left',
y: 'top',
text: '2015吴忠市人口数量',
subtext:"人口密度数据来自吴忠市统计局年鉴"
},
tooltip: {
//trigger: 'item',
//formatter: '{b}<br/>{c} (人)'
//pointFormat: '{series.name}: <b>{point.y:.0f} ({point.percentage:.1f}%)</b>'
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
// visualMap: {
// min: 170259,
// max: 401178,
// text:['max','min'],
// realtime: false,
// calculable: true,
// inRange: {
// color: ['lightskyblue','yellow', 'orangered']
// }
// },
series:[
{
name:'人口数量',
type:'map',
map:'吴忠',
mapLocation:{
y:100
},
itemSytle:{
normal:{label:{show:true}},
emphasis:{label:{show:false}}
},
label: {
normal: {show: true},
emphasis: {show: true},
},
data:[
{name:'利通区',value:401178},
{name:'青铜峡市',value:281953},
{name:'盐池县',value:170259},
{name:'红寺堡区',value:171110},
{name:'同心县',value:371027},
],
}
],
};
chart.setOption(option);
//悬浮事件后获取name和value的值
chart.on("mouseover",function(params){
var name=params.name;
var value=params.value;
console.info(name+"\n"+value);
})
var timer = null;
total = 5; // series.data.length
var count = 1;
var count1 = 0;
function autoTip() {
setInterval(function() {
playState: false;
var curr = count % total;
console.info("curr:"+curr);
chart.dispatchAction({
type: 'mapSelect',
seriesIndex: 0, // 因为只有一组数据,所以此处应为0
dataIndex: curr
});
count += 1;
}, 1000);
setInterval(function() {
var curr1 = count1 % total;
console.info("curr1:"+curr1);
chart.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0, // 因为只有一组数据,所以此处应为0
dataIndex: curr1
});
count1 += 1;
}, 1000);
}
autoTip();
// var a=$("canvas");
// var b=a[0].getContext('2d');
//
// console.info("a:"+a);
// console.info("b:"+b);
//
//
// for(var i in b){//通过定义一个局部变量i遍历获取map里面的所有key值
// console.info(b[i]); //通过获取key对应的value值
// }
});
</script>
</html>