1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105 |
- //定义图表对象
- var myChart1 = null;
- var myChart2 = null;
- var myChart3 = null;
- var myChart4 = null;
- var myChart5 = null;
- var myChart6 = null;
- var myChart7 = null;
- $(function(){
- industryBar();
- changeChart();
- ageTrendPie();
- skillAcquisitionChart();
- playCounts();
- roseChart();
- moveMapChart();
- clocknum(2060,'requiredPeoples'); //执行
- clocknum(6990,'supplyPeoples');
- /* $(".digits").numScroll({
- time:5000
- });*/
-
- });
- /**
- * 柱形图
- */
- function industryBar(){
- var xAxisData = ['美术学院', '音乐学院', '影视学院', '电商学院', '旅游学院'];
- var yAxisData = [200, 300, 300, 900, 1500];
-
- myChart1 = echarts.init(document.getElementById('industryBar')); // 基于准备好的dom,初始化echarts实例
- var option = {
- title: {
- text: '院系报到数据',
- left: 'center',
- textStyle:{color:'#fff'},
- top:'4%',
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 坐标轴指示器,坐标轴触发有效
- type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
- }
- },
- grid: {
- left: '2%',
- right: '4%',
- top:'20%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- data: xAxisData,
- axisTick: {
- alignWithLabel: true
- },
- axisLabel: { //x轴文字颜色
- color: '#fff'
- },
- axisLine: { //x轴线的颜色
- lineStyle:{
- color: ['#fff'],
- width: 1,
- type: 'solid',
- opacity: 0.1
- }
- }
- }
- ],
- yAxis: [
- {
- type: 'value',
- axisLabel: { //y轴文字颜色
- color: '#fff'
- },
- axisLine: { //y轴线的颜色
- lineStyle:{
- color: ['#fff'],
- width: 1,
- type: 'solid',
- opacity: 0.1
- }
- },
- splitLine: { //网格样式
- show: true,
- lineStyle:{
- color: 'rgba(255,255,255,0.3)',
- width: 1,
- type: 'dashed'
- }
- }
- }
- ],
- series: [
- {
- // name: '直接访问',
- type: 'bar',
- barWidth: '50%',
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: '#248ff7'
- }, {
- offset: 1,
- color: '#6851f1'
- }]),
- barBorderRadius: 11,
- }
- },
- data:yAxisData
- }
- ]
- };
- myChart1.setOption(option,true); // 使用刚指定的配置项和数据显示图表。
- var app = {
- currentIndex: -1,
-
- };
- setInterval(function () {
- var dataLen = option.series[0].data.length;
- // 取消之前高亮的图形
- myChart1.dispatchAction({
- type: 'downplay',
- seriesIndex: 0,
- dataIndex: app.currentIndex
- });
- app.currentIndex = (app.currentIndex + 1) % dataLen;
- //console.log(app.currentIndex);
- // 高亮当前图形
- myChart1.dispatchAction({
- type: 'highlight',
- seriesIndex: 0,
- dataIndex: app.currentIndex,
- });
- // 显示 tooltip
- myChart1.dispatchAction({
- type: 'showTip',
- seriesIndex: 0,
- dataIndex: app.currentIndex
- });
- }, 3000);
- $(document).ready(function(){
- myChart1.resize();
- })
- window.addEventListener("resize", function () {
- myChart1.resize();
- });
- }
- /**
- *折线图
- */
- function changeChart(){
- myChart2 = echarts.init(document.getElementById('changeLine'));
- var option = {
- title: {
- text: '男女比例',
- left: 'center',
- textStyle: {color: '#fff'},
- top:'4%',
- },
- grid: {
- left: '2%',
- right: '4%',
- top:'25%',
- bottom: '3%',
- containLabel: true
- },
- legend: {
- data: ['男', '女'],
- textStyle: {color: '#fff'},
- right: '4%',
- top:'3%',
- bottom: '5%',
- },
- xAxis: {
- type: 'category',
- data: ['美术学院', '音乐学院', '影视学院', '电商学院', '旅游学院'],
- axisLabel: { //x轴文字颜色
- color: '#fff'
- },
- axisLine: { //x轴线的颜色
- lineStyle:{
- color: ['#fff'],
- width: 1,
- type: 'solid',
- opacity: 0.1
- }
- }
- },
- yAxis: {
- type: 'value',
- axisLabel: { //x轴文字颜色
- color: '#fff'
- },
- axisLine: { //x轴线的颜色
- lineStyle:{
- color: ['#fff'],
- width: 1,
- type: 'solid',
- opacity: 0.1
- }
- },
- splitLine: { //网格样式
- show: true,
- lineStyle:{
- color: 'rgba(255,255,255,0.1)',
- width: 1,
- type: 'dashed'
- }
- }
- },
- color:['#01dee1',"#ed3f35"], //曲线颜色
- series: [ {
- name: '男',
- type: 'line',
- data: [47, 50,100, 140, 95, 220, 201,240,230,125,245,202,125],
- smooth: true,//平滑曲线
- markPoint: {
- data: [
- {type: 'max', name: '最大值'},
- {type: 'min', name: '最小值'}
- ]
- }
- },{
- name: '女',
- type: 'line',
- data: [149, 138, 160, 130, 180, 28, 90,60,49,54,28,45],
- smooth: true, //平滑曲线
- markPoint: {
- data: [
- {type: 'max', name: '最大值'},
- {type: 'min', name: '最小值'}
- ]
- }
- }]
- };
- myChart2.setOption(option,true); // 使用刚指定的配置项和数据显示图表。
- $(document).ready(function(){
- myChart2.resize();
- })
- window.addEventListener("resize", function () {
- myChart2.resize();
- });
- }
- /**
- *饼形图
- */
- function ageTrendPie(){
- myChart3 = echarts.init(document.getElementById('agePie'));
- var option = {
- title: {
- text: '年龄分析',
- left: 'center',
- textStyle: {color: '#fff'},
- top:'4%',
- },
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b}: {c} ({d}%)'
- },
- grid: {
- left: '3%',
- right: '4%',
- top:'35%',
- bottom: '3%'
- },
- legend: {
- orient: 'vertical',
- left: 10,
- data: ['16岁', '17岁','18岁','19岁','20岁','21岁以上'],
- textStyle: {
- color: '#fff'
- }
- },
- series: [
- {
- name: '年龄占比',
- type: 'pie',
- radius: ['50%', '70%'],
- avoidLabelOverlap: true,
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: '30',
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: false
- },
- itemStyle: {
- normal: {
- label:{
- show: true,
- formatter: '{b} \n ({d}%)'
- }
- }
- },
- color:['#10606b','#0696ab','#06a0ab','#86c9f4','#4da8ec','#3a91d2','#005fa6','#315f97'],
- data: [
- {value: 999, name: '16岁'},
- {value: 2000, name: '17岁'},
- {value: 1548, name: '18岁'},
- {value: 1548, name: '19岁'},
- {value: 1548, name: '20岁'},
- {value: 1548, name: '21岁以上'}
- ]
- }
- ]
- };
- myChart3.setOption(option,true); // 使用刚指定的配置项和数据显示图表。
- $(document).ready(function(){
- myChart3.resize();
- })
- window.addEventListener("resize", function () {
- myChart3.resize();
- });
- }
-
- /**
- *柱形图
- */
- function skillAcquisitionChart(){
- var cost = [69, 78, 60,34, 70]//本期比上期(大于1按1处理)
- var totalCost = [ 100,100, 100, 100,100]//比例综合
- var visits = [ 664,793, 610, 350,"39/702"]//本期占总的百分比*100
- var grade = ['医务室','保卫处', '组织部','学工部','公寓' ]
- var myColor = ['#21BF57','#56D0E3', '#1089E7', '#F8B448','#F57474', ];
- var data = {
- grade: grade,
- cost: cost,
- totalCost: totalCost,
- visits: visits
- };
- var option = {
- title: {
- top: '4%',
- left: 'center',
- text: '节点报到数据',
- textStyle: {
- align: 'center',
- color:'#fff'
- }
- },
- grid: {
- left: '130',
- right: '100',
- bottom: '20'
- },
- xAxis: {
- show: false,
- },
- yAxis: {
- type: 'category',
- axisLabel: {
- margin:30,
- show: true,
- color: '#4DCEF8',
- fontSize: 14
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- data: data.grade
- },
- series: [{//外层边框
- type: 'bar',
- barGap: '-65%',
- label: {
- normal: {
- show: true,
- position: 'right',
- color: '#fff',
- fontSize: 14,
- formatter:
- function(param) {
- return data.visits[param.dataIndex];
- },
- }
- },
- barWidth: '30%',
- itemStyle: {
- normal: {
- borderColor: '#4DCEF8',
- borderWidth: 2,
- barBorderRadius: 15,
- color: 'rgba(102, 102, 102,0)'
- },
- },
- z: 1,
- data: data.totalCost,
- // data: da
- }, {//柱形图占比
- type: 'bar',
- barGap: '-85%',
- barWidth: '21%',
- itemStyle: {
- normal: {
- barBorderRadius: 16,
- color: function(params) {
- var num = myColor.length;
- return myColor[params.dataIndex % num]
- },
- }
- },
- max: 1,
- label: {
- normal: {
- show: true,
- position: 'inside',
- formatter: '{c}%'
- }
- },
- labelLine: {
- show: true,
- },
- z: 2,
- data: data.cost,
- }]
- }
- myChart4 = echarts.init(document.getElementById('skillAcquisitionBar'));
- myChart4.setOption(option,true);
- $(document).ready(function(){
- myChart4.resize();
- })
- window.addEventListener("resize", function () {
- myChart4.resize();
- });
- }
- /**
- *折线图
- */
- function playCounts(){
- let bgColor = "#fff";
- let color = [
- "#0090FF",
- "#36CE9E",
- "#FFC005",
- "#FF515A",
- "#8B5CFF",
- "#00CA69"
- ];
- let echartData = [{
- name: "1",
- value1: 100,
- value2: 233
- },
- {
- name: "2",
- value1: 138,
- value2: 233
- },
- {
- name: "3",
- value1: 280,
- value2: 200
- },
- {
- name: "4",
- value1: 173,
- value2: 180
- },
- {
- name: "5",
- value1: 180,
- value2: 199
- },
- {
- name: "6",
- value1: 180,
- value2: 133
- },
- {
- name: "7",
- value1: 180,
- value2: 210
- },
- {
- name: "8",
- value1: 190,
- value2: 150
- },
- {
- name: "9",
- value1: 160,
- value2: 180
- },
- {
- name: "10",
- value1: 230,
- value2: 180
- },
- {
- name: "11",
- value1: 130,
- value2: 100
- },
- {
- name: "12",
- value1: 80,
- value2: 180
- },
- ];
- let xAxisData = echartData.map(v => v.name);
- // ["1", "2", "3", "4", "5", "6", "7", "8"]
- let yAxisData1 = echartData.map(v => v.value1);
- // [100, 138, 350, 173, 180, 150, 180, 230]
- let yAxisData2 = echartData.map(v => v.value2);
- // [233, 233, 200, 180, 199, 233, 210, 180]
- const hexToRgba = (hex, opacity) => {
- let rgbaColor = "";
- let reg = /^#[\da-f]{6}$/i;
- if (reg.test(hex)) {
- rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
- "0x" + hex.slice(3, 5)
- )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
- }
- return rgbaColor;
- }
- /////////////////////
- var option = {
- title: {
- top: '4%',
- left: 'center',
- text: '图 ',
- textStyle: {
- align: 'center',
- color:'#fff'
- }
- },
- legend: {
- right: 10,
- top: 10,
- textStyle: {
- color: "#fff"
- }
- },
- tooltip: {
- trigger: "axis",
- formatter: function(params) {
- let html = '';
- params.forEach(v => {
- console.log(v)
- html += `<div style="color: #666;font-size: 14px;line-height: 24px">
- <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
- ${v.seriesName}.${v.name}
- <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
- 万元`;
- })
- return html
- },
- extraCssText: 'border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
- axisPointer: {
- type: 'shadow',
- shadowStyle: {
- color: '#ffffff',
- shadowColor: 'rgba(225,225,225,1)',
- shadowBlur: 5
- }
- }
- },
- grid: {
- top: 70,
- bottom:10,
- containLabel: true
- },
- xAxis: [{
- type: "category",
- boundaryGap: false,
- axisLabel: {
- formatter: '{value}月',
- textStyle: {
- color: "#fff",
- opacity: 1
- }
- },
- axisLine: {
- lineStyle: {
- color: "#D9D9D9"
- }
- },
- data: xAxisData
- }],
- yAxis: [{
- type: "value",
- //name: '单位:人 ',
- axisLabel: {
- textStyle: {
- color: "#fff"
- }
- },
- nameTextStyle: {
- color: "#fff",
- fontSize: 12,
- lineHeight: 40
- },
- splitLine: { //网格样式
- show: true,
- lineStyle:{
- color: 'rgba(255,255,255,0.1)',
- width: 1,
- type: 'dashed'
- }
- },
-
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- }
- }],
- series: [{
- name: "硕士",
- type: "line",
- smooth: true,
- // showSymbol: false,/
- symbolSize: 8,
- zlevel: 3,
- lineStyle: {
- normal: {
- color: color[0],
- shadowBlur: 3,
- shadowColor: hexToRgba(color[0], 0.5),
- shadowOffsetY: 8
- }
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [{
- offset: 0,
- color: hexToRgba(color[0], 0.3)
- },
- {
- offset: 1,
- color: hexToRgba(color[0], 0.1)
- }
- ],
- false
- ),
- shadowColor: hexToRgba(color[0], 0.1),
- shadowBlur: 10
- }
- },
- data: yAxisData1
- }, {
- name: "博士",
- type: "line",
- smooth: true,
- // showSymbol: false,
- symbolSize: 8,
- zlevel: 3,
- lineStyle: {
- normal: {
- color: color[1],
- shadowBlur: 3,
- shadowColor: hexToRgba(color[1], 0.5),
- shadowOffsetY: 8
- }
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [{
- offset: 0,
- color: hexToRgba(color[1], 0.3)
- },
- {
- offset: 1,
- color: hexToRgba(color[1], 0.1)
- }
- ],
- false
- ),
- shadowColor: hexToRgba(color[1], 0.1),
- shadowBlur: 10
- }
- },
- data: yAxisData2
- }]
- };
- myChart5 = echarts.init(document.getElementById('playCounts'));
- myChart5.setOption(option,true);
- $(document).ready(function(){
- myChart5.resize();
- })
- window.addEventListener("resize", function () {
- myChart5.resize();
- });
- }
- /**
- * 玫瑰图-地区分布
- */
- function roseChart(){
- var option = {
- color:['#1d9dff','#006cff','#60cda0','#ed8884','#8b78f6','#3a91d2','#06a0ab','#86c9f4'],
- title: {
- text: '地区分布',
- left: 'center',
- top:'4%',
- textStyle: {
- color: '#fff'
- }
- },
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b} : {c} ({d}%)'
- },
- legend: {
- left: 'center',
- top: 'bottom',
- data: ['北京', '天津', '上海', '深圳', '广州', '厦门', '珠海', '西安'],
- textStyle: {
- color: '#fff'
- }
- },
- toolbox: {
- show: true,
- feature: {
- mark: {show: true},
- dataView: {show: true, readOnly: false},
- magicType: {
- show: true,
- type: ['pie', 'funnel']
- },
- restore: {show: true},
- saveAsImage: {show: true}
- }
- },
- series: [
- {
- name: '半径模式',
- type: 'pie',
- radius: [15, 90],
- center: ['50%', '50%'],
- roseType: 'radius',
- label: {
- show: true
- },
- emphasis: {
- label: {
- show: true
- }
- },
- data: [
- {value: 10, name: '北京'},
- {value: 15, name: '天津'},
- {value: 15, name: '上海'},
- {value: 25, name: '深圳'},
- {value: 20, name: '广州'},
- {value: 35, name: '厦门'},
- {value: 30, name: '珠海'},
- {value: 40, name: '西安'}
- ]
- }
- ]
- };
- myChart6 = echarts.init(document.getElementById('roseChart'));
- myChart6.setOption(option);
- $(document).ready(function(){
- myChart6.resize();
- })
- window.addEventListener("resize", function () {
- myChart6.resize();
- });
- }
- /**
- * 迁徙图
- */
- function moveMapChart(){
- var geoCoordMap = {
- '上海': [121.4648,31.2891],
- '东莞': [113.8953,22.901],
- '东营': [118.7073,37.5513],
- '中山': [113.4229,22.478],
- '临汾': [111.4783,36.1615],
- '临沂': [118.3118,35.2936],
- '丹东': [124.541,40.4242],
- '丽水': [119.5642,28.1854],
- '乌鲁木齐': [87.9236,43.5883],
- '佛山': [112.8955,23.1097],
- '保定': [115.0488,39.0948],
- '兰州': [103.5901,36.3043],
- '包头': [110.3467,41.4899],
- '北京': [116.4551,40.2539],
- '北海': [109.314,21.6211],
- '南京': [118.8062,31.9208],
- '南宁': [108.479,23.1152],
- '南昌': [116.0046,28.6633],
- '南通': [121.1023,32.1625],
- '厦门': [118.1689,24.6478],
- '台州': [121.1353,28.6688],
- '合肥': [117.29,32.0581],
- '呼和浩特': [111.4124,40.4901],
- '咸阳': [108.4131,34.8706],
- '哈尔滨': [127.9688,45.368],
- '唐山': [118.4766,39.6826],
- '嘉兴': [120.9155,30.6354],
- '大同': [113.7854,39.8035],
- '大连': [122.2229,39.4409],
- '天津': [117.4219,39.4189],
- '太原': [112.3352,37.9413],
- '威海': [121.9482,37.1393],
- '宁波': [121.5967,29.6466],
- '宝鸡': [107.1826,34.3433],
- '宿迁': [118.5535,33.7775],
- '常州': [119.4543,31.5582],
- '广州': [113.5107,23.2196],
- '廊坊': [116.521,39.0509],
- '延安': [109.1052,36.4252],
- '张家口': [115.1477,40.8527],
- '徐州': [117.5208,34.3268],
- '德州': [116.6858,37.2107],
- '惠州': [114.6204,23.1647],
- '成都': [103.9526,30.7617],
- '扬州': [119.4653,32.8162],
- '承德': [117.5757,41.4075],
- '拉萨': [91.1865,30.1465],
- '无锡': [120.3442,31.5527],
- '日照': [119.2786,35.5023],
- '昆明': [102.9199,25.4663],
- '杭州': [119.5313,29.8773],
- '枣庄': [117.323,34.8926],
- '柳州': [109.3799,24.9774],
- '株洲': [113.5327,27.0319],
- '武汉': [114.3896,30.6628],
- '汕头': [117.1692,23.3405],
- '江门': [112.6318,22.1484],
- '沈阳': [123.1238,42.1216],
- '沧州': [116.8286,38.2104],
- '河源': [114.917,23.9722],
- '泉州': [118.3228,25.1147],
- '泰安': [117.0264,36.0516],
- '泰州': [120.0586,32.5525],
- '济南': [117.1582,36.8701],
- '济宁': [116.8286,35.3375],
- '海口': [110.3893,19.8516],
- '淄博': [118.0371,36.6064],
- '淮安': [118.927,33.4039],
- '深圳': [114.5435,22.5439],
- '清远': [112.9175,24.3292],
- '温州': [120.498,27.8119],
- '渭南': [109.7864,35.0299],
- '湖州': [119.8608,30.7782],
- '湘潭': [112.5439,27.7075],
- '滨州': [117.8174,37.4963],
- '潍坊': [119.0918,36.524],
- '烟台': [120.7397,37.5128],
- '玉溪': [101.9312,23.8898],
- '珠海': [113.7305,22.1155],
- '盐城': [120.2234,33.5577],
- '盘锦': [121.9482,41.0449],
- '石家庄': [114.4995,38.1006],
- '福州': [119.4543,25.9222],
- '秦皇岛': [119.2126,40.0232],
- '绍兴': [120.564,29.7565],
- '聊城': [115.9167,36.4032],
- '肇庆': [112.1265,23.5822],
- '舟山': [122.2559,30.2234],
- '苏州': [120.6519,31.3989],
- '莱芜': [117.6526,36.2714],
- '菏泽': [115.6201,35.2057],
- '营口': [122.4316,40.4297],
- '葫芦岛': [120.1575,40.578],
- '衡水': [115.8838,37.7161],
- '衢州': [118.6853,28.8666],
- '西宁': [101.4038,36.8207],
- '西安': [109.1162,34.2004],
- '贵阳': [106.6992,26.7682],
- '连云港': [119.1248,34.552],
- '邢台': [114.8071,37.2821],
- '邯郸': [114.4775,36.535],
- '郑州': [113.4668,34.6234],
- '鄂尔多斯': [108.9734,39.2487],
- '重庆': [107.7539,30.1904],
- '金华': [120.0037,29.1028],
- '铜川': [109.0393,35.1947],
- '银川': [106.3586,38.1775],
- '镇江': [119.4763,31.9702],
- '长春': [125.8154,44.2584],
- '长沙': [113.0823,28.2568],
- '长治': [112.8625,36.4746],
- '阳泉': [113.4778,38.0951],
- '青岛': [120.4651,36.3373],
- '韶关': [113.7964,24.7028]
- };
- var BJData = [
- [{name:'北京'}, {name:'上海',value:95}],
- [{name:'北京'}, {name:'广州',value:90}],
- [{name:'北京'}, {name:'大连',value:80}],
- [{name:'北京'}, {name:'南宁',value:70}],
- [{name:'北京'}, {name:'南昌',value:60}],
- [{name:'北京'}, {name:'拉萨',value:50}],
- [{name:'北京'}, {name:'长春',value:40}],
- [{name:'北京'}, {name:'包头',value:30}],
- [{name:'北京'}, {name:'重庆',value:20}],
- [{name:'北京'}, {name:'常州',value:10}],
- [{name:'北京'}, {name:'北京',value:120}]
- ];
-
- var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
- var convertData = function (data) {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var dataItem = data[i];
- var fromCoord = geoCoordMap[dataItem[0].name];
- var toCoord = geoCoordMap[dataItem[1].name];
- if (fromCoord && toCoord) {
- res.push([{
- coord: toCoord
- }, {
- coord: fromCoord
- }]);
- }
- }
- return res;
- };
- var color = ['#a6c84c', '#00eaff', '#ffde00'];
- var series = [];
- [['北京', BJData]].forEach(function (item, i) {
- series.push({
- name: item[0] + ' ',
- type: 'lines',
- zlevel: 1,
- effect: {//波纹点样式
- show: true,
- period: 6,
- trailLength: 0.7,
- color: '#fff',
- symbolSize: 5
- },
- lineStyle: {
- normal: {
- color: color[i],
- width: 0,
- curveness: 0.2
- }
- },
- data: convertData(item[1])
- },
- {
- name: item[0] + ' ',
- type: 'lines',
- zlevel: 2,
- effect: {
- show: true,
- period: 6,
- trailLength: 0,
- symbol: planePath,
- symbolSize: 15
- },
- lineStyle: {
- normal: {
- color: color[i],
- width: 1,
- opacity: 0.4,
- curveness: 0.2
- }
- },
- data: convertData(item[1])
- },
- {
- name: item[0] + ' ',
- type: 'effectScatter',
- coordinateSystem: 'geo',
- zlevel: 2,
- rippleEffect: {
- brushType: 'stroke'
- },
- label: {
- normal: {
- show: true,
- position: 'right',
- formatter: '{b}'
- }
- },
- symbolSize: function (val) {
- return val[2] / 8;
- },
- itemStyle: {
- normal: {
- color: color[i]
- }
- },
- data: item[1].map(function (dataItem) {
- return {
- name: dataItem[1].name,
- value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
- };
- })
- });
- });
- var option = {
- tooltip : {
- trigger: 'item'
- },
-
- geo: {
- map: 'china',
- zoom:1.9,
- label: {
- emphasis: {
- show: true,
- color:'#fff'
- }
- },
- roam: true,
- itemStyle: {
- normal: {
- borderWidth: 1,
- areaColor:'rgba(7,16,44, 0.7)',
- borderColor: 'rgba(147, 235, 248, 1)'
- },
- emphasis: {
- areaColor: '#1d83e1'
- }
- }
- },
- series: series
- };
- myChart7 = echarts.init(document.getElementById('moveMapChart'));
- myChart7.setOption(option,true);
- $(document).ready(function(){
- myChart7.resize();
- })
- window.addEventListener("resize", function () {
- myChart7.resize();
- });
- }
- /**
- *LED液晶屏数字字符效果
- */
- function showLEDNumber(value,id){
- var htmlArr = [];
- var len = value.length;
- for(var i=0;i<len;i++){
- var number = value.charAt(i);
- htmlArr.push('<div class="clock c'+number+'" >');
- htmlArr.push('<div class="v n1"><div class="u"></div><div class="d"></div></div>');
- htmlArr.push('<div class="v n2"><div class="u"></div><div class="d"></div></div>');
- htmlArr.push('<div class="h n3"><div class="l"></div><div class="r"></div></div>');
- htmlArr.push('<div class="v n4"><div class="u"></div><div class="d"></div></div>');
- htmlArr.push('<div class="v n5"><div class="u"></div><div class="d"></div></div>');
- htmlArr.push('<div class="h n6"><div class="l"></div><div class="r"></div></div>');
- htmlArr.push('<div class="h n7"><div class="l"></div><div class="r"></div></div>');
- htmlArr.push('</div>');
- }
- $("#"+id).html(htmlArr.join(""));
- }
- function clocknum(num,id) {
- $('#'+id).empty();
- var html = '';
- var strarr = num.toString().split('');
- var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');
- for(var i=0; i<strarr.length; i++){
- if(strarr[i] == '.'){
- html += '<div class="dot"></div>'
- } else {
- var clasname = digit_to_name[strarr[i]];
- html += '<div class="'+clasname+'">' +
- '<span class="d1"></span>' +
- '<span class="d2"></span>' +
- '<span class="d3"></span>' +
- '<span class="d4"></span>' +
- '<span class="d5"></span>' +
- '<span class="d6"></span>' +
- '<span class="d7"></span>' +
- '</div>';
- }
- }
- $('#'+id).append(html);
- }
|