服务器在线状态ECharts Gallery

20:11:45图表已生成
代码
var chinaGeoCoordMap = {
        '上海': [121.4648, 31.2891],
        '浙江': [119.5313, 29.8773],
        "江苏": [118.8062, 31.9208],
        
        '北京': [116.4551, 40.2539],
        "天津": [117.4219, 39.4189],
        "河南": [113.4668, 34.6234],
        "甘肃": [103.5901, 36.3043],
        
        "贵州": [106.6992, 26.7682],
        "广西": [108.479, 23.1152],
        "江西": [116.0046, 28.6633]
        
		
	};
	
   	var SHData = [
   	     [{name:'上海'}, {name:'上海'}],
	    [{name:'上海'}, {name:'浙江',type:"mt"}],
	    [{name:'上海'}, {name:'江苏',type:"mt"}]
	];

	var BJData = [
	     [{name:'北京'}, {name:'北京'}],
	    [{name:'北京'}, {name:'天津'}],
	    [{name:'北京'}, {name:'河南',type:"mt"}],
	    [{name:'北京'}, {name:'甘肃',type:"mt"}]
	];

	var GZData = [
	     [{name:'贵州',alert:true}, {name:'贵州',alert:true}],
	    [{name:'贵州',alert:true}, {name:'广西'}],
	    [{name:'广西'}, {name:'江西',type:"mt"}]
	   
	];
	

	
	var convertData = function (data) {
	    var res = [];
	    for (var i = 0; i < data.length; i++) {
	        var dataItem = data[i];
	        var fromCoord = chinaGeoCoordMap[dataItem[0].name];
	        var toCoord = chinaGeoCoordMap[dataItem[1].name];
	        if (fromCoord && toCoord) {
	            var obj = {
	                fromName: dataItem[0].name,
	                toName: dataItem[1].name,
	                coords: [fromCoord, toCoord],
	                //value: dataItem[1].value,
	            }
	            console.log(dataItem[1])
	            if(dataItem[0].alert){
	                obj.lineStyle = {normal:{color:"orange"}}
	                obj.effect =  {
    	                color:"red",
    	                symbolSize:0
	                }
	            }
	            
	            console.log(obj)
	            
	            res.push(obj);
	        }
	    }
	    console.log("-------")
	    return res;
	   	
	};
	
	var mtPath = "path://M752.151 866.527H579.133v-47.486c173.631-32.436 304.931-184.675 304.931-367.785 0-153.623-92.46-285.338-224.778-342.977-0.023 0.032-0.047 0.062-0.069 0.094-45.734-20.009-96.17-31.258-149.294-31.258s-103.559 11.249-149.292 31.257l-0.069-0.093c-132.32 57.64-224.78 189.355-224.78 342.977 0 183.11 131.3 335.349 304.93 367.785v47.486H267.694c-33.178 0-34.62 34.589-34.62 34.589v69.215h553.699v-69.215c0-19.054-15.533-34.589-34.622-34.589zM634.962 135.969c-32.767 30.62-76.618 49.472-125.039 49.472-48.422 0-92.272-18.851-125.038-49.473 38.734-15.516 80.86-24.269 125.038-24.269s86.304 8.752 125.039 24.27z m-308.89 315.286c0-101.556 82.229-183.82 183.85-183.82 101.554 0 183.851 82.264 183.851 183.82 0 101.585-82.297 183.849-183.851 183.849-101.62 0-183.85-82.264-183.85-183.849z m281.179 0c0-53.781-43.547-97.296-97.328-97.296-18.52 0-35.629 5.436-50.359 14.393 4.596-1.442 9.363-2.381 14.395-2.381 27.274 0 49.348 22.075 49.348 49.351 0 27.245-22.073 49.317-49.348 49.317-27.277 0-49.318-22.073-49.318-49.317 0-5.064 0.972-9.831 2.384-14.428-8.994 14.732-14.428 31.841-14.428 50.361 0 53.81 43.511 97.324 97.325 97.324 53.782 0.001 97.329-43.514 97.329-97.324z"
	var serverPath = "path://M960 320H64c-35.346 0-64-28.654-64-64V128c0-35.346 28.654-64 64-64h896c35.346 0 64 28.654 64 64v128c0 35.346-28.654 64-64 64z m-96-176c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z m-128 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z m224 496H64c-35.346 0-64-28.654-64-64v-128c0-35.346 28.654-64 64-64h896c35.346 0 64 28.654 64 64v128c0 35.346-28.654 64-64 64z m-96-176c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z m-128 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z m224 496H64c-35.346 0-64-28.654-64-64v-128c0-35.346 28.654-64 64-64h896c35.346 0 64 28.654 64 64v128c0 35.346-28.654 64-64 64z m-96-176c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z m-128 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z";
	var color = ['#a6c84c', '#ffa022', '#46bee9'];//航线的颜色
	var series = [];
	
	[['上海', SHData], ['北京', BJData], ['贵州', GZData]].forEach(function (item, i) {
	
	     series.push(
	         {
    	        type: 'lines',
    	        zlevel: 1,
    	        effect: {
    	            show: true,
    	            period: 1.5,
    	            trailLength: 0.7,
    	            color: color[i],   //arrow箭头的颜色
    	            symbolSize: 3
    	        },
    	        lineStyle: {
    	            normal: {
    	                color: "#22AC38",
    	                width: 0,
    	                curveness: 0.2
    	            }
    	        },
    	        data: convertData(item[1])
    	    },{
    	        type: 'lines',
    	        zlevel: 2,
    	        symbol: ['none'],
    	        symbolSize: 10,
    	        effect: {
    	            show: false
    	        },
    	        lineStyle: {
    	            normal: {
    	                color: color[i],
    	                width: 2,
    	                opacity: 0.6,
    	                curveness: 0.2
    	            }
    	        },
    	        data: convertData(item[1])
    	    },{
    	        type: 'graph',
    	        coordinateSystem: 'geo',
    	        zlevel: 2,
    	        rippleEffect: {
    	            brushType: 'stroke'
    	        },
    	        label: {
    	            normal: {
    	                show: true,
    	                position: 'right',
    	                formatter: '{b}'
    	            }
    	        },
    	        
    	        symbolSize: 18,
    	        itemStyle: {
    	        	normal: {
    	        		color: color[i],
		            },
		            emphasis: {
		                areaColor: '#2B91B7'
		            }
    	        },
    	        data: item[1].map(function (dataItem) {
    	            return {
    	                symbol: (dataItem[1].type=="mt")?mtPath:serverPath,
    	                
    	                itemStyle:{
    	                    normal:{color:dataItem[1].alert?"red": color[i]}
                        },
    	                name: dataItem[1].name,
    	                value: chinaGeoCoordMap[dataItem[1].name].concat([dataItem[1].value])
    	            };
    	        })
    	    }
    	  
    	  )
	})
	
	console.log(series)


	option = {
	     title : {
    	        text: '模拟UCD数据',
    	        subtext: 'kongchun',
    	        left: 'center',
    	        textStyle : {
    	            color: '#fff'
    	        }
    	},
		tooltip: {
			trigger: 'item',
			backgroundColor: 'rgba(166, 200, 76, 0.82)',
			borderColor: '#FFFFCC',
			showDelay: 0,
			hideDelay: 0,
			enterable: true,
			transitionDuration: 0,
			extraCssText: 'z-index:100',
// 			formatter: function(params, ticket, callback) {
// 				//根据业务自己拓展要显示的内容
// 				// var res = "";
// 				// var name = params.name;
// 				// var value = params.value;
// 				// res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
// 				//return res;
// 			}
		},
		backgroundColor:"#2b2b2b",
		geo: {
			map: 'china',
			zoom: 1.2,
			label: {
				emphasis: {
					show: false
				}
			},
			roam: true, //是否允许缩放
			itemStyle: {
				normal: {
					color: 'rgba(51, 69, 89, .5)', //地图背景色
					borderColor: '#516a89', //省市边界线00fcff 516a89
					borderWidth: 1
				},
				emphasis: {
					color: 'rgba(37, 43, 61, .5)' //悬浮背景
				}
			}
		},
		series: series
	};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
