echarts實(shí)現(xiàn)地圖定時(shí)切換散點(diǎn)與多圖表級(jí)聯(lián)聯(lián)動(dòng)詳解

發(fā)布時(shí)間：2020-10-07 20:54:02 來(lái)源：腳本之家閱讀：490 作者：鄭州-在路上欄目：web開(kāi)發(fā)

1. 摘要

最近做項(xiàng)目遇到個(gè)統(tǒng)計(jì)相關(guān)需求，一個(gè)頁(yè)面中大概四個(gè)或更多圖形統(tǒng)計(jì)，百度地圖、餅圖、柱狀圖、線型圖。百度地圖上顯示所有店面在全國(guó)各地大概位置，目前暫定每省一個(gè)，在地圖上顯示散點(diǎn)。如默認(rèn)顯示鄭州散點(diǎn)閃動(dòng)，其他圖形顯示鄭州相關(guān)數(shù)據(jù)；5秒切換下一個(gè)區(qū)域點(diǎn)，其他的圖表數(shù)據(jù)對(duì)應(yīng)改變。先上個(gè)圖，各位有需要的可以再接著往下

2. 引入ECharts以及地圖相關(guān)json

ECharts 3 開(kāi)始不再?gòu)?qiáng)制使用 AMD 的方式按需引入，代碼里也不再內(nèi)置 AMD 加載器。因此引入方式簡(jiǎn)單了很多，只需要像普通的 JavaScript 庫(kù)一樣用 script 標(biāo)簽引入。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <!-- 引入 ECharts 文件 -->
<script src="echarts/jquery-1.11.2.min.js"></script>
<script src="echarts/echarts.min.js"></script>
<script src="echarts/china.js"></script>
</head>
</html>

3. 界面布局

一個(gè)頁(yè)面中布局多個(gè)圖表有幾個(gè)形式可以參考處理。

　　第一種：在網(wǎng)頁(yè)創(chuàng)建多個(gè)div用定位的方式，多個(gè)畫(huà)布。此方法聲明多個(gè)echarts對(duì)象，不再過(guò)多介紹，除非特別個(gè)性需求，不推薦使用。

　　第二種：一個(gè)div一個(gè)畫(huà)布，一個(gè)option，多個(gè)series，調(diào)整圖形x/y的百分百來(lái)定位圖形顯示到界面上的位置。本文用這個(gè)方法。

　　第三種：與第二種基本一樣，最大的不同是每個(gè)圖標(biāo)上都可以有一個(gè)標(biāo)題,多個(gè)optioins；也是多個(gè)畫(huà)布，但推薦這種。網(wǎng)址參考：http://gallery.echartsjs.com/editor.html?c=xBkXgRwejM

echarts實(shí)現(xiàn)地圖定時(shí)切換散點(diǎn)與多圖表級(jí)聯(lián)聯(lián)動(dòng)詳解

options = [
 // 第一個(gè)graph
{
 backgroundColor:'#FFFFFF',
 title: {
 text: 'Sales Revenue of CAN-LAX 2016-2017',
 textStyle:{
  fontSize:14
 }
 },
 
 tooltip: {    // 提示框組件
 trigger: 'axis',
 axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
  type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
 }
 },
 legend: {
 data: ['2016', '2017','Growing Rate'],
 top:'18'
 },
 grid: {
 left: '3%',
 right: '5%',
 bottom: '3%',
 containLabel: true,
 show: false   // 網(wǎng)格邊框是否顯示，上和右邊框 
 },
 toolbox: { 
 feature: {
  dataView: {show: false, readOnly: false}, // 數(shù)據(jù)試圖是否在控件中顯示
  //magicType: {show: true, type: ['stack', 'tiled']},
  //restore: {show: true},
  saveAsImage: {show: true}
 }
 },
 xAxis: {
 type: 'category',
 boundaryGap: true,  // 坐標(biāo)軸兩邊留白
 splitLine: {  // 網(wǎng)格線 x軸對(duì)應(yīng)的是否顯示
  show: false
 },
 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
 },
 
 yAxis: [    // 雙y坐標(biāo)軸
 {
 name: 'Revenue(10k)',
 type: 'value',
 splitLine: {  // 網(wǎng)格線 y軸對(duì)應(yīng)的是否顯示
  show: false
 },
 axisLabel: {
  formatter: '{value}'
 }
 },
 {
  name: 'Growing\nRate (%)',
  //nameLocation: 'start',
  splitLine: {  // 網(wǎng)格線 y軸對(duì)應(yīng)的是否顯示
  show: false
  },
  min:0,
  max: 300,   // growing rate upper limit
  type: 'value',
  //top:10,
  inverse: false,
  axisLine: {
  lineStyle: {
   color: '#2f4554'
  }
 }
 }],
 
 series: [
 {
  name:'2016',
  type:'bar',
  color:'#00BFFF',
  //stack: '總量',
  markPoint : {
  data : [
   {type : 'max', name : '最大值'},
   {type : 'min', name : '最小值'}
  ]
  },
  markLine : {
  data : [
   {type : 'average', name : '平均值'}
  ]
  },
  data:[1741.9, 977, 1742.2, 1431.1, 1636.2, 1447, 1711.7, 1921.2, 2609.6, 3332.6, 3647.3, 2498.1]
 },
 {
  name:'2017',
  type:'bar',
  color: '#DC143C',
  //stack: '總量',
  markPoint : {
  data : [
   {type : 'max', name : '最大值'},
   {type : 'min', name : '最小值'}
  ]
  },
  markLine : {
  data : [
   {type : 'average', name : '平均值'}
  ]
  },
  data:[2609, 1162.9, 2942.9, 5174.6, 5114.4, 5065.8, 3956.1, 3691.1, 4637.6, 4603.8, 6401.1, 4988.4]
 },
 {
  name:'Growing Rate',
  type:'line',
  yAxisIndex: 1,  // yAxisIndex 1 表示第二個(gè)y軸，默認(rèn)為0
  color: '#FFD700',
  //stack: '總量',
  markPoint : {
  data : [
   {type : 'max', name : '最大值'},
   //{type : 'min', name : '最小值'}
  ]
  },
  data:[49.8, 19, 68.9, 261.6, 212.6, 250.1, 131.1, 92.1, 77.7, 38.1, 75.5, 99.7]
 }
 ]
},

 // visualMap: {    # 旁邊會(huì)有 視覺(jué)映射組件
 // type: 'continuous',
 // dimension: 1,
 // text: ['High', 'Low'],
// inverse: true,
 // itemHeight: 200,
 // calculable: true,
 // min: -2,
// max: 6,
// top: 60,
 // left: 10,
 // inRange: {
 // colorLightness: [0.4, 0.8]
 //},
// outOfRange: {
 //  color: '#bbb'
 // },
 // controller: {
 // inRange: {
  // color: '#01949B'
  //}
 // }
 //},

 //第2個(gè)graph
{
 backgroundColor:'#FFFFFF',   // 背景色
 title: {
 text: 'Cargo Load Factor-2016/2017',
 textStyle:{
  fontSize:14,
 }
 },
 tooltip: {
 trigger: 'axis'
 },
 legend: {
 data:['CLF-2016','CLF-2017'],
 top:'18'  // 距離容器頂端的距離
 },
 grid: {
 left: '3%',
 right: '4%',
 bottom: '3%',
 containLabel: true
 },
 toolbox: {
 feature: {
  dataView: {show: false, readOnly: false}, // 數(shù)據(jù)試圖是否在控件中顯示
  saveAsImage: {show:true}
 }
 },
 
 xAxis: {
 type: 'category',
 boundaryGap: false,  // 坐標(biāo)軸兩邊留白策略
 splitLine: {  // 網(wǎng)格線 x軸對(duì)應(yīng)的是否顯示
  show: false
 },
 data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
 },
 
 yAxis: {
 type: 'value',
 name: 'CLF(%)',
 min: 70,
 max: 100,
 interval: 10,
 splitLine: {  // 網(wǎng)格線 y軸對(duì)應(yīng)的是否顯示
  show: false
 }
 },
 
 series: [
  {
  name:'CLF-2016',
  type:'line',
  data:[88.29, 83.68, 89.64, 90.47, 90.21, 93.63, 94.07, 90.85, 90.32, 90.56, 86.69, 81.77]
  
 },
 {
  name:'CLF-2017',
  type:'line',
  data:[90.36, 86.21, 92.04, 89.91, 90.15, 90.38, 88.03, 88.99, 88.35, 87.18, 86.29, 81.23]
  
 }
 ]
},
 
 //第3個(gè)graph
{
 backgroundColor:'#FFFFFF',
 title: {
 text: 'Sales Strcture of CAN-LAX in 2016',
 //left:'center',  // title位置
 textStyle:{
  fontSize:14,
 }
 },
 tooltip: {
 trigger: 'axis',
 axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
  type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
 }
 },
 toolbox: {
 feature: {
  dataView: {show: false, readOnly: false}, // 數(shù)據(jù)試圖是否在控件中顯示
  //magicType: {show: true, type: ['stack', 'tiled']},
  //restore: {show: true},
  saveAsImage: {show: true}
 }
 },
 legend: {
 data: ['直達(dá)', '中轉(zhuǎn)', '聯(lián)程', '郵件'],
 top:'18'
 },
 grid: {
 left: '2%',
 right: '9%',
 bottom: '3%',
 containLabel: true,
 show: false   // 網(wǎng)格邊框是否顯示，上和右邊框 
 },
 
 xAxis: [{
 type: 'category',
 splitLine: {  // 網(wǎng)格線 x軸對(duì)應(yīng)的是否顯示
  show: false
 },
  data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
 }],
 
 yAxis: [{
 name: 'Revenue(10k)',
 type: 'value',
 splitLine: {  // 網(wǎng)格線 y軸對(duì)應(yīng)的是否顯示
  show: false
 },
 axisLabel: {
  formatter: '{value}'
 },
 }],
 

 series: [{
 name: '直達(dá)',
 type: 'bar',
 itemStyle:{
  normal:{color:'#01949B'},
 },
 
 //markPoint : {
  //data : [
   //{type : 'max', name : '最大值'},
   //{type : 'min', name : '最小值'}
  //]
  //},
  
 markLine : {
  data : [
  {type : 'average', name : '平均值'}
  ]
 },
  
 data: [919, 455.7, 1074.8, 911.7, 1006.8, 1075.6, 1106.1, 1274.5, 1755.6, 2562.7, 2056.1, 1227.9]
 }, 
 {
 name: '中轉(zhuǎn)',
 type: 'bar',
 itemStyle:{
  normal:{color:'#EBA954'},
 },
 //markPoint : {
  //data : [
   //{type : 'max', name : '最大值'},
   //{type : 'min', name : '最小值'}
  //]
  //},
  markLine : {
  data : [
   {type : 'average', name : '平均值'}
  ]
  },
 data: [567.1, 261.4, 456.8, 387, 419.2, 227, 417, 413.1, 564, 583, 915.9, 666.3]
 }, {
 name: '聯(lián)程',
 type: 'bar',
 itemStyle:{
  normal:{color:'#C23531'},
 },
 //markPoint : {
  //data : [
  //{type : 'max', name : '最大值'},
   //{type : 'min', name : '最小值'}
  //]
 //},
 markLine : {
  data : [
  {type : 'average', name : '平均值'}
  ]
 },
 data: [255.9, 259.8, 210.5, 118.2, 196.5, 140.6, 188.6, 204.4, 290, 186.9, 661.3, 468.2]
 },{
 name: '郵件',
 type: 'bar',
 itemStyle:{
  normal:{color:'#6495ED'},
 },
 //markPoint : {
  //data : [
  //{type : 'max', name : '最大值'},
   //{type : 'min', name : '最小值'}
  //]
 //},
 markLine : {
  data : [
  {type : 'average', name : '平均值'}
  ]
 },
 data: [0, 0, 0, 14.2, 13.7, 3.8, 0, 29.2, 0, 0, 14, 135.8]
 }]
},


 //第4個(gè)graph
{
 backgroundColor:'#FFFFFF',
 title: {
 text: 'Cargo Structure Percentage',
 subtext: '2016',
 left: 'center',
 subtextStyle:{
  fontSize:18
 }
 },
 toolbox: { 
 feature: {
  dataView: {show: false, readOnly: false}, // 數(shù)據(jù)試圖是否在控件中顯示
  //magicType: {show: true, type: ['stack', 'tiled']},
  //restore: {show: true},
  saveAsImage: {show: true}
 }
 },
 tooltip : {
 trigger: 'item',
 formatter: "{a} <br/> : {c} (usd66ga%)"
 },
 legend: {
 // orient: 'vertical',
 // top: 'middle',
 bottom: 20,
 left: 'center',
 data: ['直達(dá)', '中轉(zhuǎn)', '聯(lián)程', '郵件'],
 show:false   // legend 不顯示
 },
 series : [
 {
  name:'Cargo Source',
  type: 'pie',
  avoidLabelOverlap: false,
  radius : '50%',
  center: ['50%', '58%'],
  selectedMode: 'single',
  label: {
  normal: {
   show: true,
   textStyle:{
   fontSize: '10',
   //fontWeight: 'bold'
   },
   formatter: ' : 2vl1p26%',
   position: 'outer'
  },
  emphasis: {
   show: true,
   textStyle: {
   fontSize: '30',
   fontWeight: 'bold'
   }
  }
  },
  labelLine: {
  normal: {
   show: true
  }
  },
  data:[
  {name: '直達(dá)', value: 61.8},
  {name: '聯(lián)程', value: 13.2},
  {name: '中轉(zhuǎn)', value: 24.2},
  {name: '郵件', value: 0.8}
  ],
  itemStyle: {
  emphasis: {
   shadowBlur: 10,
   shadowOffsetX: 0,
   shadowColor: 'rgba(0, 0, 0, 0.5)'
  }
  }
 }
 ]
},
 
 // 第5個(gè)graph
{
 backgroundColor:'#FFFFFF',
 title: {
 text: 'Sales Strcture of CAN-LAX in 2017',
 //left:'center',  // title位置
 textStyle:{
  fontSize:14,
 }
 },
 tooltip: {
 trigger: 'axis',
 axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
  type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
 }
 },
 toolbox: {
 feature: {
  dataView: {show: false, readOnly: false}, // 數(shù)據(jù)試圖是否在控件中顯示
  //magicType: {show: true, type: ['stack', 'tiled']},
  //restore: {show: true},
  saveAsImage: {show: true}
 }
 },
 legend: {
 data: ['直達(dá)', '中轉(zhuǎn)', '聯(lián)程', '郵件'],
 top:'18'
 },
 grid: {
 left: '2%',
 right: '9%',
 bottom: '3%',
 containLabel: true,
 show: false   // 網(wǎng)格邊框是否顯示，上和右邊框 
 },
 
 xAxis: [{
 type: 'category',
 splitLine: {  // 網(wǎng)格線 x軸對(duì)應(yīng)的是否顯示
  show: false
 },
  data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
 }],
 
 yAxis: [{
 name: 'Revenue(10k)',
 type: 'value',
 splitLine: {  // 網(wǎng)格線 y軸對(duì)應(yīng)的是否顯示
  show: false
 },
 axisLabel: {
  formatter: '{value}'
 },
 }],
 

 series: [{
 name: '直達(dá)',
 type: 'bar',
 itemStyle:{
  normal:{color:'#01949B'},
 },
 
 //markPoint : {
  //data : [
   //{type : 'max', name : '最大值'},
   //{type : 'min', name : '最小值'}
  //]
  //},
  
 markLine : {
  data : [
  {type : 'average', name : '平均值'}
  ]
 },
  
 data: [1504.2, 622.8, 2132, 3668.6, 3797.3, 3632.8, 2716, 2320.6, 3288.1, 3220, 3911.4, 2942]
 }, 
 {
 name: '中轉(zhuǎn)',
 type: 'bar',
 itemStyle:{
  normal:{color:'#EBA954'},
 },
 //markPoint : {
  //data : [
   //{type : 'max', name : '最大值'},
   //{type : 'min', name : '最小值'}
  //]
  //},
  markLine : {
  data : [
   {type : 'average', name : '平均值'}
  ]
  },
 data: [861.7, 196.6, 600.7, 836.2, 757.8, 804.2, 766.3, 797, 677.5, 734.2, 1363.5, 977.3]
 }, {
 name: '聯(lián)程',
 type: 'bar',
 itemStyle:{
  normal:{color:'#C23531'},
 },
 //markPoint : {
  //data : [
  //{type : 'max', name : '最大值'},
   //{type : 'min', name : '最小值'}
  //]
 //},
 markLine : {
  data : [
  {type : 'average', name : '平均值'}
  ]
 },
 data: [240.6, 294.4, 202.6, 476.9, 308.3, 376.4, 334.7, 401, 514, 506.2, 766.2, 794.4]
 },{
 name: '郵件',
 type: 'bar',
 itemStyle:{
  normal:{color:'#6495ED'},
 },
 //markPoint : {
  //data : [
  //{type : 'max', name : '最大值'},
   //{type : 'min', name : '最小值'}
  //]
 //},
 markLine : {
  data : [
  {type : 'average', name : '平均值'}
  ]
 },
 data: [2.5, 49.1, 7.6, 192.9, 251, 252.3, 139.1, 172.5, 157.9, 143.4, 359.9, 274.7]
 }]
},

 //第6個(gè)graph
{
 backgroundColor:'#FFFFFF',
 title: {
 text: 'Cargo Structure Percentage',
 subtext: '2017',
 left: 'center',
 subtextStyle:{
  fontSize:18
 }
 },
 toolbox: { 
 feature: {
  dataView: {show: false, readOnly: false}, // 數(shù)據(jù)試圖是否在控件中顯示
  //magicType: {show: true, type: ['stack', 'tiled']},
  //restore: {show: true},
  saveAsImage: {show: true}
 }
 },
 tooltip : {
 trigger: 'item',
 formatter: "{a} <br/> : {c} (c11ha0w%)"
 },
 legend: {
 // orient: 'vertical',
 // top: 'middle',
 bottom: 20,
 left: 'center',
 data: ['直達(dá)', '中轉(zhuǎn)', '聯(lián)程', '郵件'],
 show:false   // legend 不顯示
 },
 series : [
 {
  name:'Cargo Source',
  type: 'pie',
  avoidLabelOverlap: false,
  radius : '50%',
  center: ['50%', '58%'],
  selectedMode: 'single',
  label: {
  normal: {
   show: true,
   textStyle:{
   fontSize: '10',
   //fontWeight: 'bold'
   },
   formatter: ' : w2sjiga%',
   position: 'outer'
  },
  emphasis: {
   show: true,
   textStyle: {
   fontSize: '30',
   fontWeight: 'bold'
   }
  }
  },
  labelLine: {
  normal: {
   show: true
  }
  },
  data:[
  {name: '直達(dá)', value: 66.1},
  {name: '聯(lián)程', value: 11.1},
  {name: '中轉(zhuǎn)', value: 19.1},
  {name: '郵件', value: 3.7}
  ],
  itemStyle: {
  emphasis: {
   shadowBlur: 10,
   shadowOffsetX: 0,
   shadowColor: 'rgba(0, 0, 0, 0.5)'
  }
  }
 }
 ]
}

];

因?yàn)?，剛開(kāi)始做沒(méi)有發(fā)現(xiàn)第三種方式，所以暫時(shí)用的第二種方式，不太好控制位置和增減圖表。如果再讓我做我會(huì)選擇第三種，感覺(jué)更靈活一些。以上是我做整合的時(shí)候發(fā)現(xiàn)在的一個(gè)頁(yè)面多個(gè)圖表幾個(gè)實(shí)現(xiàn)方式，可能還有更好的，期待你的留言。

頁(yè)面靜態(tài)代碼很簡(jiǎn)單，下面來(lái)看網(wǎng)頁(yè)代碼布局：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>綜合統(tǒng)計(jì) - 大屏</title>
 <link rel="stylesheet" type="text/css" href="skin/icon/iconfont.css" />
 <link rel="stylesheet" type="text/css" href="skin/default/style.css" />
 <script src="../scripts/jquery/jquery-1.11.2.min.js"></script>
 <script src="js/common.js"></script>
 <script src="../scripts/echart/echarts.min.js"></script>
 <script src="../scripts/echart/china.js"></script>
 <style>
 #btnSet{padding:0;background-color:#020933;box-sizing:border-box;position:absolute;left:30px;top:24px;z-index:9999}
 .btnPlay{height:20px;border-style:solid;border-width:10px 0 10px 20px;border-color:transparent transparent transparent #fff;transition:all .5s ease}
 .btnPause{width:20px;height:20px;border-style:double;border-width:0 0 0 20px;border-color:#fff}
 </style>
</head>
<body class="">
 <form id="form1" runat="server">
 <input type="hidden" id="start" name="start" value="0" />
 <input type="button" id="btnSet" class="btnPause" title="點(diǎn)擊停止" />
 <div id="mapContainer" class="mapContainer" ></div>
 </form>
</body>
</html>

4. js實(shí)現(xiàn)圖形布局

<script>
 /**
地圖級(jí)聯(lián)
*/
 var mapContainer = document.getElementById('mapContainer');
 //用于使chart自適應(yīng)高度和寬度,通過(guò)窗體高寬計(jì)算容器高寬
 var resizeWorldMapContainer = function () {
 $("#mapContainer").width($(window).width());
 $("#mapContainer").height($(window).height());
 //$("#mapContainer").css("width", $(window).width()+"px");
 //$("#mapContainer").css("height", $(window).height()+"px");
 };
 // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
 var myChart = echarts.init(mapContainer);

 var geoCoordMap = { '河南省': [113.664496, 34.817821], '河南': [113.75783, 34.502434], '北京市': [116.403694, 39.915378], '天津市': [117.216837, 39.142415], '上海市': [121.479662, 31.234329], '河北省': [114.494585, 38.129532], '山西省': [112.569095, 37.908919], '遼寧省': [123.445046, 41.806913], '吉林省': [126.582519, 43.86473], '新疆': [87.559985, 43.879367], '西藏': [91.160816, 29.653148], '內(nèi)蒙古': [111.771822, 40.93481], '四川省': [106.492302, 29.601285], '青海省': [101.73138, 36.627027], '廣東省': [113.254301, 23.129454], '湖南省': [112.953187, 28.265007] };
 var data = [{ name: '河南省', value: 3 }, { name: '河南', value: 1 }, { name: '北京市', value: 1 }, { name: '天津市', value: 1 }, { name: '上海市', value: 2 }, { name: '河北省', value: 1 }, { name: '山西省', value: 1 }, { name: '遼寧省', value: 0 }, { name: '吉林省', value: 1 }, { name: '新疆', value: 0 }, { name: '西藏', value: 1 }, { name: '內(nèi)蒙古', value: 0 }, { name: '四川省', value: 0 }, { name: '青海省', value: 0 }, { name: '廣東省', value: 0 }, { name: '湖南省', value: 0 }];
 var convertData = function (data) {
 var res = [];
 for (var i = 0; i < data.length; i++) {
  var geoCoord = geoCoordMap[data[i].name];
  if (geoCoord) {
  res.push({
   name: data[i].name,
   value: geoCoord.concat(data[i].value)
  });
  }
 }
 return res;
 };
 var uploadedDataURL = "../scripts/echart/china.json";
 myChart.showLoading();
 $.getJSON(uploadedDataURL, function (geoJson) {
 echarts.registerMap('zhengzhou', geoJson);
 myChart.hideLoading();

 option = {
  backgroundColor: '#020933',
  title: {
  top: 20,
  left: 190,
  text: '大屏統(tǒng)計(jì)總覽',
  subtext: '',
  x: 'left',
  textStyle: {
   color: '#ccc'
  }
  },
  tooltip: {
  trigger: 'axis',
  axisPointer: {  // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
   type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
  },
  formatter: function (params) {
   if (typeof (params.value)[2] == "undefined") {
   //return params.name + ' : ' + params.value;
   } else {//只有數(shù)據(jù)不為空才顯示
   return params.name + ' : ' + params.value[2];
   }
  }
  },
  visualMap: {
  show: false,
  min: 0,
  max: 500,
  left: 'left',
  top: 'bottom',
  text: ['高', '低'], // 文本，默認(rèn)為數(shù)值文本
  calculable: true,
  seriesIndex: [1],
  inRange: {
  },
  dimension: 0
  },
  //布局s
  grid: [
  { x: '57%', y: '5%', width: '40%', height: '60%' },
  { x: '57%', y: '70%', width: '40%', height: '25%' }
  ],
  xAxis: [{
  title: "asdf",
  gridIndex: 0,
  type: 'value',
  max: 10,//x軸刻度
  axisLabel: {
   show: true,
  },
  splitLine: {
   show: true
  }
  }, {
  gridIndex: 1,
  type: 'category',
  axisLabel: {
   show: true,
  },
  splitLine: {
   show: true
  },   data: ['2018-07-30', '2018-07-31', '2018-08-01', '2018-08-02', '2018-08-03', '2018-08-04', '2018-08-05', '2018-08-06'] 
  }],
  yAxis: [{
  gridIndex: 0,
  type: 'category',
  axisLabel: {
   show: true,
   textStyle: {
   color: '#ddd'
   }
  }
  }, {
  gridIndex: 1,
  type: 'value',
  axisLabel: {
   show: true,
   textStyle: {
   color: '#ddd'
   }
  }
  }],
  //布局e
  geo: {
  show: true,
  map: 'zhengzhou',
  label: {
   normal: {
   show: false
   },
   emphasis: {
   show: false,
   }
  },
  roam: false,//是否開(kāi)啟鼠標(biāo)縮放和平移漫游
  itemStyle: {
   normal: {
   areaColor: 'transparent',
   borderColor: '#3fdaff',
   borderWidth: 2,
   shadowColor: 'rgba(63, 218, 255, 0.5)',
   shadowBlur: 30
   },
   emphasis: {
   areaColor: '#2B91B7',
   }
  }
  },
  //調(diào)整顯示級(jí)別
  layoutCenter: ['32%', '52%'],
  layoutSize: 900,

  series: [
  {
   name: '地圖臺(tái)站',
   type: 'effectScatter',
   coordinateSystem: 'geo',
   data: convertData(data.sort(function (a, b) {
   return b.value - a.value;
   }).slice(0, 5)),
   symbolSize: function (val) {
   //return val[2] / 10;//地圖閃動(dòng)
   return 20;
   },
   showEffectOn: 'render',
   rippleEffect: {
   brushType: 'stroke'
   },
   hoverAnimation: true,
   label: {
   normal: {
    formatter: '',
    position: 'right',
    show: true
   }
   },
   itemStyle: {
   normal: {
    color: '#F4E925',
    shadowBlur: 10,
    shadowColor: '#05C3F9'
   }
   },
   zlevel: 1
  }, {
   name: '政治面貌',
   type: 'pie',
   z: 2,
   color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
   selectedMode: 'single',
   radius: [0, '15%'],
   center: ['20%', '80%'],
   label: {
   normal: {
    position: 'inner'
   }
   },
   labelLine: {
   normal: {
    show: false
   }
   },
   //顯示series中信息，提示框組件
   tooltip: {
   trigger: 'item',
   formatter: "{a} <br/> : {c} (21w6r6r%)"
   },
   data: [{ value: 2, name: '無(wú)黨派人士' }, { value: 4, name: '黨員', selected: true }, { value: 5, name: '團(tuán)員' }, { value: 1, name: '其它' }]
  },
  {
   name: '年齡占比',
   type: 'pie',
   z: 2,
   // 全局調(diào)色盤(pán)。
   color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
   radius: ['20%', '30%'],
   center: ['20%', '80%'],
   label: { formatter: "占66aof5d%" },
   itemStyle: { //itemStyle有正常顯示：normal，有鼠標(biāo)hover的高亮顯示：emphasis
   emphasis: { //normal顯示陰影,與shadow有關(guān)的都是陰影的設(shè)置
    shadowBlur: 10, //陰影大小
    shadowOffsetX: 0, //陰影水平方向上的偏移
    shadowColor: 'rgba(0, 0, 0, 0.5)' //陰影顏色
   }
   },
   //顯示series中信息，提示框組件
   tooltip: {
   trigger: 'item',
   formatter: "{a} <br/> : {c} (1af1v61%)"
   },
   data: [{ value: 2, name: '18-25' }, { value: 8, name: '26-30' }, { value: 2, name: '31-40' }, { value: 0, name: '41-55' }, { value: 12, name: '55以上' }]
  }
  , {
   id: 'bar',
   name: '臺(tái)站排名',
   type: 'bar',
   xAxisIndex: 0,
   yAxisIndex: 0,
   label: {
   normal: {
    show: true,
    position: ["100%", "40%"],
    color: "#ffffff",
    formatter: " : {c}"

   }
   },
   tooltip: {
   trigger: 'item',
   formatter: " : {c}"
   },
   itemStyle: {
   //每個(gè)柱子的顏色即為colorList數(shù)組里的每一項(xiàng)，如果柱子數(shù)目多于colorList的長(zhǎng)度，則柱子顏色循環(huán)使用該數(shù)組
   color: function (params) {
    var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
    return colorList[params.dataIndex];
   }
   },
   z: 2,
   data: [{ value: 3, name: '河南省' }, { value: 1, name: '河南' }, { value: 1, name: '北京市' }, { value: 1, name: '天津市' }, { value: 2, name: '上海市' }, { value: 1, name: '河北省' }, { value: 1, name: '山西省' }, { value: 0, name: '遼寧省' }, { value: 1, name: '吉林省' }, { value: 0, name: '新疆' }, { value: 1, name: '西藏' }, { value: 0, name: '內(nèi)蒙古' }, { value: 0, name: '四川省' }, { value: 0, name: '青海省' }, { value: 0, name: '廣東省' }, { value: 0, name: '湖南省' }]
  },
  {
   name: '請(qǐng)假',
   type: 'bar',
   xAxisIndex: 1,
   yAxisIndex: 1,
   tooltip: {
   trigger: 'item',
   formatter: "{a} : {c}"
   },
   data: [1, 3, 2, 4, 1, 4, 3]
  },
  {
   name: '遲到',
   type: 'bar',
   xAxisIndex: 1,
   yAxisIndex: 1,
   tooltip: {
   trigger: 'item',
   formatter: "{a} : {c}"
   },
   data: [1, 2, 3, 4, 3, 2, 2]
  },
  {
   name: '早退',
   type: 'bar',
   xAxisIndex: 1,
   yAxisIndex: 1,
   tooltip: {
   trigger: 'item',
   formatter: "{a} : {c}"
   },
   data: [1, 2, 3, 4, 3, 2, 4]
  },
  {
   name: '調(diào)休',
   type: 'bar',
   xAxisIndex: 1,
   yAxisIndex: 1,
   tooltip: {
   trigger: 'item',
   formatter: "{a} : {c}"
   },
   data: [1, 3, 2, 4, 1, 4, 2]
  },
  {
   name: '加班',
   type: 'bar',
   xAxisIndex: 1,
   yAxisIndex: 1,
   tooltip: {
   trigger: 'item',
   formatter: "{a} : {c}"
   },
   data: [1, 3, 2, 4, 1, 4, 2]
  },
  {
   name: '曠工',
   type: 'bar',
   xAxisIndex: 1,
   yAxisIndex: 1,
   tooltip: {
   trigger: 'item',
   formatter: "{a} : {c}"
   },
   data: [1, 3, 2, 4, 1, 4, 2]
  }




  ]
 };
 myChart.setOption(option);

 //重置容器高寬
 resizeWorldMapContainer();
 myChart.resize();
 redoMethod();

 //用于使chart自適應(yīng)高度和寬度
 window.onresize = function () {
  //重置容器高寬
  resizeWorldMapContainer();
  myChart.resize();
 };
 //循環(huán)做某些事情
 myChart.on('click', function (params) {
  if (params.data) {
  //var index = JSON.stringify(data).indexOf(params.data.name);//結(jié)果：index=1
  //if (index >= 0) {//只對(duì)地圖點(diǎn)擊事件做判斷
  //點(diǎn)擊某某臺(tái)，考勤自動(dòng)變更
  //1.點(diǎn)擊地圖變更2.點(diǎn)擊排行變更
  if (params.seriesIndex == 0 || params.seriesIndex == 3) {
   if ($("#btnSet").attr("title") == "點(diǎn)擊停止") {
   $("#btnSet").trigger('click');
   }
   redoMethod(params.data.name);
  }
  //if (params.seriesIndex==3) {
  // alert(params.data.name);
  // //if ($("#btnSet").attr("title") == "點(diǎn)擊停止") {
  // // $("#btnSet").trigger('click');
  // //}
  // //redoMethod(params.data.name);
  //}
  }
 });
 });

</script>

5. 定時(shí)循環(huán)jquery實(shí)現(xiàn)

地圖上的散點(diǎn)閃動(dòng)5秒切換一次，所有地圖信息參與輪詢。具體js代碼如下：

<script>
 /**
* 調(diào)用本地的ashx
* @file 文件名
* @param get參數(shù) (a=1&b=2&c=3)
* @fn 回調(diào)函數(shù) ： 服務(wù)端返回 result=xxx; 回調(diào)函數(shù)直接處理result變量。
*/
$.ashx = function (file, param, fn, er) {
 var sUrl = file;
 $.ajax({
 type: "GET",
 contentType: "application/json",
 cache: false,
 url: sUrl,
 data: param,
 dataType: "json",
 success: fn,
 error: er
 });
};
 var globalIndex = 0;
 //地圖點(diǎn)擊時(shí)間
 function redoMethod(deptname) {

 if (!deptname) {
  deptname = data[globalIndex].name;
  globalIndex++;
  if (globalIndex == data.length) {
  globalIndex = 0;
  }
 }
 //alert(name);
 $.ashx("ajax的url地址", "action=xx&deptname=" + deptname, function (result) {
  if (result) {
  if (result.results == "") {
   return;
  }
  //debugger;
  //alert(result.results.politcal);
  var option = myChart.getOption();
  //動(dòng)態(tài)改變圖形
  option.series[0].data = convertData(data);//地圖
  option.series[0].symbolSize = function (val, params) {//標(biāo)記的大小
   //alert(name.name);
   if (deptname == params.name) {
   return 35;//地圖閃動(dòng)
   } else {
   return 20;
   }
  };
  option.series[0].itemStyle.color = function (params) {
   if (deptname == params.name) {
   return "rgba(245, 214, 251, 1)";
   } else {
   return "#F4E925";
   }
  };
  option.series[1].data = result.results[0].politcal;//政治面貌
  option.series[2].data = result.results[1].ageScale;//年齡占比
  option.series[3].itemStyle.color = function (params) {
   if (deptname == params.name) {
   return "rgba(245, 214, 251, 1)";
   } else {
   var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
   return colorList[params.dataIndex];
   }
  }

  option.series[4].data = [2, 7, 12, 6, 4, 6, 6, 3];//請(qǐng)假
  option.series[5].data = [11, 5, 21, 3, 5, 10, 8, 5];//遲到
  option.series[6].data = [6, 1, 11, 1, 7, 4, 3, 13];//早退
  option.series[7].data = [7, 2, 22, 14, 4, 4, 6, 9];//調(diào)休
  option.series[8].data = [20, 7, 23, 11, 8, 4, 4, 7];//加班
  option.series[9].data = [33, 4, 24, 9, 6, 4, 1, 1];//曠工

  myChart.setOption(option);
  }
 }, function (er) {
  //alert("請(qǐng)求失敗");
 });
 }
 $(function () {
 //定時(shí)循環(huán)
 var interval = setInterval("redoMethod()", 5000);//每隔一秒執(zhí)行一次redoMethod()
 //假如有兩個(gè)按鈕：繼續(xù)、暫停
 $("#btnSet").click(function () {//點(diǎn)擊暫停按鈕
  if (interval) {
  clearInterval(interval);
  interval = null;
  }
  if ($(this).attr("title") == "點(diǎn)擊停止") {
  $(this).attr("title", "點(diǎn)擊開(kāi)始");
  $(this).attr("class", "btnPlay");
  } else {
  $(this).attr("title", "點(diǎn)擊停止");
  $(this).attr("class", "btnPause");
  interval = setInterval("redoMethod()", 5000);
  }

 });
 });
</script>

6. 總結(jié)

以上就是我在處理同頁(yè)面多圖形統(tǒng)計(jì)且有級(jí)聯(lián)關(guān)系處理時(shí)的思路及采坑代碼，文中代碼均是從項(xiàng)目中復(fù)制出來(lái)的，完整率99.99%，代碼略亂，開(kāi)發(fā)中整理的思路注釋什么的未處理，見(jiàn)諒。

好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

echarts實(shí)現(xiàn)地圖定時(shí)切換散點(diǎn)與多圖表級(jí)聯(lián)聯(lián)動(dòng)詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽