echarts 地图实现轮播（二）
生活随笔
收集整理的這篇文章主要介紹了
echarts 地图实现轮播（二）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!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準(zhǔn)備一個(gè)具備大小（寬高）的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'));option = {title: {x: 'left',y: 'top',text: '',subtext:""},tooltip: {trigger: 'item',//formatter: '{b}<br/>{c} (人)'//pointFormat: '{series.name}: <b>{point.y:.0f} ({point.percentage:.1f}%)</b>'formatter:function(value){return value.name+" "+value.value+"人";}},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:'人口數(shù)量',type:'map',map:'北京',mapLocation:{y:100},itemSytle:{normal:{label:{show:true}},emphasis:{label:{show:false}}},label: {normal: {show: true},emphasis: {show: true},},data:[{name:'利通區(qū)',value:401178},{name:'青銅峽市',value:281953},{name:'鹽池縣',value:170259},{name:'紅寺堡區(qū)',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 = 11; // series.data.lengthvar count = 1;var count1 = 0;function autoTip() {setInterval(function() {var curr = count % total;//console.info("curr:"+curr);chart.dispatchAction({type: 'mapSelect',seriesIndex: 0, // 因?yàn)橹挥幸唤M數(shù)據(jù)，所以此處應(yīng)為0dataIndex: curr});count += 1;}, 1000);setInterval(function() {var curr1 = count1 % total;// console.info("curr1:"+curr1);chart.dispatchAction({type: 'mapUnSelect',seriesIndex: 0, // 因?yàn)橹挥幸唤M數(shù)據(jù)，所以此處應(yīng)為0dataIndex: curr1});count1 += 1;}, 1000); }//autoTip();autohover();function autohover(data){
var count = 0;
var timeTicket = null;
var dataLength = 11;//此處設(shè)置的是需要輪播的次數(shù)
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() {chart.dispatchAction({type: 'downplay',seriesIndex: 0,});chart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: (count) % dataLength});chart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: (count) % dataLength});count++;
}, 1000);chart.on('mouseover', function(params) {clearInterval(timeTicket);chart.dispatchAction({type: 'downplay',seriesIndex: 0});chart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: params.dataIndex});chart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: params.dataIndex,});
});
chart.on('mouseout', function(params) {timeTicket && clearInterval(timeTicket);timeTicket = setInterval(function() {chart.dispatchAction({type: 'downplay',seriesIndex: 0,});chart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: (count) % dataLength});chart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: (count) % dataLength});count++;}, 1000);
});} });</script>
</html>
?
總結(jié)
以上是生活随笔為你收集整理的echarts 地图实现轮播（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 王者荣耀狼狗是什么 《王者》在线观看
- 下一篇： echarts地图 编辑颜色