echarts传感器布设平面图效果，房间温度传感器
使用echarts插件之前需要引入百度的echarts插件js
var uploadedDataURL = "/asset/get/s/data-1585799654003-46R-3f-c3.json"; //线条聚点 var geoGpsMap = { '1': [116.415, 39.915], '2': [116.448, 39.935], '3': [116.455, 39.915], '4': [116.435, 39.925], '基站1': [116.415, 39.915], '基站2': [116.448, 39.935], '基站3': [116.455, 39.915], '控制中心': [116.435, 39.925], }; var l1 = { "主卧": [116.409, 39.928] }; var l2 = { "书房控制": [116.428, 39.939] }; var l3 = { "卫生间控制": [116.448, 39.939] }; var l4 = { "客厅控制": [116.426, 39.918] }; var l5 = { "次卧控制": [116.448, 39.920] }; var l6 = { "楼梯控制": [116.443, 39.911] }; var l7 = { "厨房控制": [116.448, 39.905] }; var zhuwo = { "主卧控制": [116.409, 39.928] }; //geoCoordMap把所有可能出现的传感器加到数组里面 var geoCoordMap = { "客厅1": [116.41, 39.9036], "客厅2": [116.43, 39.918], '主卧1': [116.409, 39.921], "主卧2": [116.409, 39.935], '书房': [116.432, 39.939], "卫生间": [116.4516, 39.939], "客厅3": [116.4516, 39.9306], '次卧': [116.4516, 39.920], "楼梯": [116.447, 39.911], "厨房": [116.4516, 39.905], }; var geoCoordMap001 = { "客厅1": [116.41, 39.9036], "客厅2": [116.43, 39.918], '主卧1': [116.409, 39.921], "主卧2": [116.409, 39.935], }; var geoCoordMap002 = { '书房': [116.432, 39.939], "卫生间": [116.4516, 39.939], "客厅3": [116.4516, 39.9306], }; var geoCoordMap003 = { '次卧': [116.4516, 39.920], "楼梯": [116.447, 39.911], "厨房": [116.4516, 39.905], }; var geoCoordMap004 = { '基站1': [116.415, 39.915], '基站2': [116.448, 39.935], '基站3': [116.455, 39.915], }; //温度 var d1 = { "客厅1": 20, "客厅2": 25, '主卧1': 17, "主卧2": 19, '书房': 13, "卫生间": 22, "客厅3": 11, '次卧': 9, "楼梯": 29, "厨房": 38, "基站1": 40, "基站2": 45, '基站3': 37, }; //湿度 var d2 = { "客厅1": 40, "客厅2": 45, '主卧1': 37, "主卧2": 39, '书房': 23, "卫生间": 80, "客厅3": 56, '次卧': 39, "楼梯": 29, "厨房": 68, }; //振动 var d3 = { //"客厅1": 4, "客厅2": 5, //'主卧1': 3, "主卧2": 3, '书房': 2, "卫生间": 0, "客厅3": 0, '次卧': 3, "楼梯": 2, "厨房": 0, }; //烟雾 var d4 = { "客厅1": 40, "客厅2": 45, '主卧1': 37, "主卧2": 39, '书房': 53, "卫生间": 60, "客厅3": 56, '次卧': 39, "楼梯": 29, "厨房": 68, }; //光线 var d5 = { "客厅1": 40, "客厅2": 45, '主卧1': 37, "主卧2": 39, '书房': 23, "卫生间": 80, "客厅3": 56, '次卧': 39, "楼梯": 29, "厨房": 68, }; // // var d6 = { // "客厅1": 40, // "客厅2": 45, // '主卧1': 37, // "主卧2": 39, // '书房': 23, // "卫生间": 80, // "客厅3": 56, // '次卧': 39, // "楼梯": 29, // "厨房": 68, // }; // // var d7 = { // "客厅1": 40, // "客厅2": 45, // '主卧1': 37, // "主卧2": 39, // '书房': 23, // "卫生间": 80, // "客厅3": 56, // '次卧': 39, // "楼梯": 29, // "厨房": 68, // }; var database = [{ name: "基站1", value: 0 }, { name: "基站2", value: 0 }, { name: "基站3", value: 0 }, { name: "控制中心", value: 0 }, ]; var da1 = [{ name: "主卧", value: 0 }]; var da2 = [{ name: "书房控制", value: 0 }]; var da3 = [{ name: "卫生间控制", value: 0 }]; var da4 = [{ name: "客厅控制", value: 0 }]; var da5 = [{ name: "次卧控制", value: 0 }]; var da6 = [{ name: "楼梯控制", value: 0 }]; var da7 = [{ name: "厨房控制", value: 0 }]; var colors = [ ["#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"], ["#37A2DA", "#67E0E3", "#32C5E9", "#9FE6B8", "#FFDB5C", "#FF9F7F", "#FB7293", "#E062AE", "#E690D1", "#E7BCF3", "#9D96F5", "#8378EA", "#8378EA"], ["#DD6B66", "#759AA0", "#E69D87", "#8DC1A9", "#EA7E53", "#EEDD78", "#73A373", "#73B9BC", "#7289AB", "#91CA8C", "#F49F42"], ]; var colorIndex = 0; $(function() { var year = ["温度（℃）", "湿度（%）", "振动(g)", "烟雾（百ppm）", "光线（百lx）"]; var year1 = ["空调调温", "加湿器/窗户协调", "门锁锁定", "紧急消防", "照明系统"]; var mapData = [ [], [], [], [], [] ]; /*柱子Y名称*/ var categoryData = []; var fei = []; var rong = []; var barData = []; var lineData1=[ [10,12,13,12,14,14,16,17,18,20,22,26,27,26,23,20,18,18,16,16,14,13,12,10], [68,67,66,63,61,55,53,48,46,44,42,42,36,34,36,37,38,42,46,44,58,62,66,68], [1,1,1,1,1,1,1,2,3,2,1,1,1,1,1,1,3,3,1,3,3,1,1,1], [56,59,60,62,56,50,40,42,38,38,39,38,40,42,38,37,34,35,38,44,46,50,54,56], [1,1,2,1,5,10,20,24,30,32,32,34,38,40,40,38,32,25,32,32,5,1,1,1] ]; var lineData2=[ [11,12,14,12,15,13,16,16,16,21,22,24,22,24,23,21,19,18,15,14,15,13,12,11], [62,64,66,65,62,58,54,49,45,44,41,40,32,36,36,39,38,40,46,48,52,60,63,61], [1,1,1,2,1,1,1,2,1,2,1,1,3,1,1,1,3,2,1,1,3,1,2,1], [58,59,62,62,54,50,44,42,34,33,35,38,40,44,38,35,32,35,33,40,46,53,56,54], [1,1,1,1,6,12,20,22,30,33,32,35,38,42,40,37,34,28,32,33,10,1,1,1] ]; var tian = [ [], [], [], [], [] ]; var line1 = []; var line2 = []; var line3 = []; var line4 = []; for (var key in geoCoordMap001) { line1.push({ "year": '温度', "name": key, "value": d1[key], }); }; for (var key in geoCoordMap002) { line2.push({ "year": '温度', "name": key, "value": d1[key], }); }; for (var key in geoCoordMap003) { line3.push({ "year": '温度', "name": key, "value": d1[key], }); }; for (var key in geoCoordMap004) { line4.push({ "year": '温度', "name": key, "value": d1[key], }); }; for (var key in geoCoordMap) { mapData[0].push({ "year": '温度', "name": key, "value": d1[key], }); mapData[1].push({ "year": '湿度', "name": key, "value": d2[key], }); mapData[2].push({ "year": '振动', "name": key, "value": d3[key], }); mapData[3].push({ "year": '烟雾', "name": key, "value": d4[key], }); mapData[4].push({ "year": '光线', "name": key, "value": d5[key], }); } var jian = []; var count = []; var datamax = []; var datamin = []; //visualMap的max正常值设定 var zhu = [45, 80, 10, 80, 50, ] //visualMap的min正常值设定 var li = [-5, 15, 0, 20, 0,] //var count2=[]; var count3 = []; for (var i = 0; i < mapData.length; i++) { mapData[i].sort(function sortNumber(a, b) { return a.value - b.value }); barData.push([]); categoryData.push([]); fei.push([]); rong.push([]); tian.push([]); jian[i] = 0; count[i] = 0; count3[i] = 0; datamax[i] = 0; datamin[i] = 1000; for (var j = 0; j < mapData[i].length; j++) { if (mapData[i][j].name == '主卧1') { tian[i][0] = mapData[i][j].value; } else if (mapData[i][j].name == '主卧2') { tian[i][1] = mapData[i][j].value; } else if (mapData[i][j].name == '书房') { tian[i][2] = mapData[i][j].value; } else if (mapData[i][j].name == '卫生间') { tian[i][3] = mapData[i][j].value; } else if (mapData[i][j].name == '客厅1') { tian[i][4] = mapData[i][j].value; } else if (mapData[i][j].name == '客厅2') { tian[i][5] = mapData[i][j].value; } else if (mapData[i][j].name == '客厅3') { tian[i][6] = mapData[i][j].value; } else if (mapData[i][j].name == '次卧') { tian[i][7] = mapData[i][j].value; } else if (mapData[i][j].name == '楼梯') { tian[i][8] = mapData[i][j].value; } else if (mapData[i][j].name == '厨房') { tian[i][9] = mapData[i][j].value; } if (mapData[i][j].value >= -100) { jian[i] += mapData[i][j].value; count[i]++; //平均计数 } else { fei[i].push(mapData[i][j].name) } if (mapData[i][j].value >= datamax[i]) { datamax[i] = mapData[i][j].value; } if (mapData[i][j].value <= datamin[i]) { datamin[i] = mapData[i][j].value; } //count2[i]=mapData[i].length-count[i]; if (mapData[i][j].value < li[i] || mapData[i][j].value > zhu[i]) { count3[i]++; rong[i].push(mapData[i][j].name); } barData[i].push(mapData[i][j].value); categoryData[i].push(mapData[i][j].name); } } $.getJSON(uploadedDataURL, function(geoJson) { echarts.registerMap('home', geoJson); 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 convertData1 = function(database) { var res = []; for (var i = 0; i < database.length; i++) { var geoCoord1 = geoGpsMap[database[i].name]; if (geoCoord1) { res.push({ name: database[i].name, value: geoCoord1.concat(database[i].value) }); } } return res; }; var convertedData1 = [ convertData1(database), convertData1(database.sort(function(a, b) { return b.value - a.value; }).slice(0, 6)) ]; //主卧控制开关legend var c1 = function(da1) { var res = []; for (var i = 0; i < da1.length; i++) { var g1 = l1[da1[i].name]; if (g1) { res.push({ name: da1[i].name, value: g1.concat(da1[i].value) }); } } return res; }; var cc1 = [ c1(da1), c1(da1.sort(function(a, b) { return b.value - a.value; }).slice(0, 6)) ]; //书房控制开关legend var c2 = function(da2) { var res = []; for (var i = 0; i < da2.length; i++) { var g2 = l2[da2[i].name]; if (g2) { res.push({ name: da2[i].name, value: g2.concat(da2[i].value) }); } } return res; }; var cc2 = [ c2(da2), c2(da2.sort(function(a, b) { return b.value - a.value; }).slice(0, 6)) ]; //卫生间控制开关legend var c3 = function(da3) { var res = []; for (var i = 0; i < da3.length; i++) { var g3 = l3[da3[i].name]; if (g3) { res.push({ name: da3[i].name, value: g3.concat(da3[i].value) }); } } return res; }; var cc3 = [ c3(da3), c3(da3.sort(function(a, b) { return b.value - a.value; }).slice(0, 6)) ]; //客厅控制开关legend var c4 = function(da4) { var res = []; for (var i = 0; i < da4.length; i++) { var g4 = l4[da4[i].name]; if (g4) { res.push({ name: da4[i].name, value: g4.concat(da4[i].value) }); } } return res; }; var cc4 = [ c4(da4), c4(da4.sort(function(a, b) { return b.value - a.value; }).slice(0, 6)) ]; //次卧控制开关legend var c5 = function(da5) { var res = []; for (var i = 0; i < da5.length; i++) { var g5 = l5[da5[i].name]; if (g5) { res.push({ name: da5[i].name, value: g5.concat(da5[i].value) }); } } return res; }; var cc5 = [ c5(da5), c5(da5.sort(function(a, b) { return b.value - a.value; }).slice(0, 6)) ]; //楼梯控制开关legend var c6 = function(da6) { var res = []; for (var i = 0; i < da6.length; i++) { var g6 = l6[da6[i].name]; if (g6) { res.push({ name: da6[i].name, value: g6.concat(da6[i].value) }); } } return res; }; var cc6 = [ c6(da6), c6(da6.sort(function(a, b) { return b.value - a.value; }).slice(0, 6)) ]; //厨房控制开关legend var c7 = function(da7) { var res = []; for (var i = 0; i < da7.length; i++) { var g7 = l7[da7[i].name]; if (g7) { res.push({ name: da7[i].name, value: g7.concat(da7[i].value) }); } } return res; }; var cc7 = [ c7(da7), c7(da7.sort(function(a, b) { return b.value - a.value; }).slice(0, 6)) ]; // //聚点随机程序 var convertToLineData = function(data, gps) { var res = []; for (var i = 0; i < data.length; i++) { var dataItem = data[i]; var fromCoord = geoCoordMap[dataItem.name]; debugger; var toCoord = gps; //郑州 // var toCoord = geoGps[Math.random()*3]; if (fromCoord && toCoord) { res.push([{ coord: fromCoord, value: dataItem.value }, { coord: toCoord, }]); } } return res; }; var convertToLineData001 = function(data, gps) { var res = []; for (var i = 0; i < data.length; i++) { var dataItem = data[i]; var fromCoord = geoCoordMap004[dataItem.name]; debugger; var toCoord = gps; //郑州 // var toCoord = geoGps[Math.random()*3]; if (fromCoord && toCoord) { res.push([{ coord: fromCoord, value: dataItem.value }, { coord: toCoord, }]); } } return res; }; optionXyMap01 = { //底部滚动栏 timeline: { data: year, axisType: 'category', autoPlay: true, playInterval: 3000, left: '10%', right: '10%', bottom: '3%', width: '80%', label: { normal: { textStyle: { color: '#ddd' } }, emphasis: { textStyle: { color: '#fff' } } }, symbolSize: 10, lineStyle: { color: '#555' }, checkpointStyle: { borderColor: '#87CEEB', borderWidth: 2 }, controlStyle: { showNextBtn: true, showPrevBtn: true, normal: { color: '#666', borderColor: '#666' }, emphasis: { color: '#aaa', borderColor: '#aaa' } }, }, baseOption: { animation: true, animationDuration: 1000, animationEasing: 'cubicInOut', animationDurationUpdate: 1000, animationEasingUpdate: 'cubicInOut', //柱状图样式 grid: [{ left: '65%', top: '34.5%', bottom: '44.5%', width: '20%' }, { gridindex: 1, left: '65%', right: '3%', top: '65%', bottom: '10%', containLabel: true }], tooltip: { trigger: 'axis', // hover触发器 axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow', // 默认为直线，可选为：'line' | 'shadow' shadowStyle: { color: '#aaa' //hover颜色 }, }, }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['bar', 'line'] }, restore: { show: true }, saveAsImage: { show: true } } }, legend: [{ data: ['历史平均数据1', '历史平均数据2'], x: '75%', y: '60%', textStyle: { color: '#fff' } }, { data: ['基站', '传感器','传输路线'], top: '10%', left: '35%', textStyle: { color: '#fff' } }, { icon: 'roundRect', orient: 'vertical', top: '7%', left: '5%', data: [{ name: '主卧', }, { name: '书房控制', }, { name: '卫生间控制', }, { name: '客厅控制', }, { name: '次卧控制', }, { name: '楼梯控制', }, { name: '厨房控制', } ], selected: { '主卧': false, '书房控制': false, '客厅控制': false, '次卧控制': false, '楼梯控制': false, '厨房控制': false, '卫生间控制': false, // '': false }, textStyle: { color: '#fff' } }, ], //地图样式 geo: { show: true, map: 'home', roam: true, zoom: 0.8, center: [116.453, 39.920], label: { emphasis: { show: false } }, itemStyle: { normal: { borderColor: 'rgba(147, 235, 248, 1)', borderWidth: 1, areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{ offset: 0, color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, shadowColor: 'rgba(128, 217, 248, 1)', // shadowColor: 'rgba(255, 255, 255, 1)', shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10 }, emphasis: { areaColor: '#389BB7', borderWidth: 0 } } }, }, options: [] }; for (var n = 0; n < year.length; n++) { optionXyMap01.options.push({ //背景色 backgroundColor: '#013954', //标题 title: [{ text: '传感器布设平面图', left: '16%', top: '5%', textStyle: { color: '#fff', fontSize: 25 } }, { id: 'statistic', text: year[n] + "数据统计情况", left: '60%', top: '5%', textStyle: { color: '#fff', fontSize: 25 } }, { text: "平均值：" + jian[n] / count[n], left: '60%', top: '14.5%', textStyle: { color: '#90ee90', fontSize: 15 } }, { text: "最大值：" + datamax[n], left: '72%', top: '14.5%', textStyle: { color: '#FF4500', fontSize: 15 } }, { text: "最小值：" + datamin[n], left: '84%', top: '14.5%', textStyle: { color: '#87CEFF', fontSize: 15 } }, { text: "未使用的传感器：" + (mapData[n].length - count[n]), //+'\n'+fei[n], left: '60%', top: '17.5%', textStyle: { color: '#FF7F00', fontSize: 15 }, extraCssText: 'width:120px; white-space:pre-wrap' //额外样式使\n生效 }, { text: "数据异常传感器：" + (count3[n]), left: '76%', top: '17.5%', textStyle: { color: '#9370DB', fontSize: 15 }, extraCssText: 'width:120px; white-space:pre-wrap' //额外样式使\n生效 }, { text: "(数据正常范围：" + li[n] + "~" + zhu[n] + ")", left: '60%', top: '20.5%', textStyle: { color: '#FFA54F', fontSize: 15 }, extraCssText: 'width:120px; white-space:pre-wrap' //额外样式使\n生效 }, { text: "未使用的传感器：" + (fei[n]), //+'\n'+fei[n], left: '60%', top: '23.5%', textStyle: { color: '#FF7F00', fontSize: 15 }, extraCssText: 'width:120px; white-space:pre-wrap' //额外样式使\n生效 }, { text: "数据异常传感器：" + (rong[n]), left: '60%', top: '26.5%', textStyle: { color: '#9370DB', fontSize: 15 }, extraCssText: 'width:120px; white-space:pre-wrap' //额外样式使\n生效 } ], visualMap: { min: li[n], max: zhu[n], calculable: true, text: ['High', 'Low'], inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] }, padding: 5, right: "5%", bottom: "40%", textStyle: { color: '#fff' } }, // brush: { // outOfBrush: { // color: '#abc' // }, // brushStyle: { // borderWidth: 2, // color: 'rgba(0,0,0,0.2)', // borderColor: 'rgba(0,0,0,0.5)', // }, // seriesIndex: [0, 1], // throttleType: 'debounce', // throttleDelay: 300, // geoIndex: 0 // }, xAxis: [{ type: 'value', scale: true, position: 'top', min: 0, boundaryGap: false, splitLine: { show: false }, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { margin: 2, textStyle: { color: '#fff' } }, }, { gridIndex: 1, type: 'category', boundaryGap: false, axisLabel: { margin: 2, textStyle: { color: '#fff' } }, data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'] } ], yAxis: [{ type: 'category', // name: 'TOP 20', nameGap: 16, axisLine: { show: true, lineStyle: { color: '#ddd' } }, axisTick: { show: false, lineStyle: { color: '#ddd' } }, axisLabel: { interval: 0, textStyle: { color: '#ddd' } }, data: categoryData[n] }, { gridIndex: 1, type: 'value', axisLabel: { formatter: '{value} ', textStyle: { color: '#ddd' } } }], series: [ //地图 { type: 'map', map: 'home', geoIndex: 0, aspectScale: 0.75, //长宽比 showLegendSymbol: true, // 存在legend时显示 label: { normal: { show: false }, emphasis: { show: false, textStyle: { color: '#fff' } } }, roam: true, itemStyle: { normal: { areaColor: '#031525', borderColor: '#FFFFFF', }, emphasis: { areaColor: '#2B91B7' } }, animation: false, data: mapData }, //地图中闪烁的点 { name: '传感器', type: 'effectScatter', coordinateSystem: 'geo', data: convertData(mapData[n].sort(function(a, b) { return b.value - a.value; }).slice(0, 20)), //大小差异显示 symbolSize: function(val) { return (val[2] * 40 + 1200) / 180; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: colors[colorIndex][n], shadowBlur: 10, shadowColor: colors[colorIndex][n] }, }, zlevel: 1 }, { //基站点显示 name: '基站', type: 'effectScatter', coordinateSystem: 'geo', data: convertData1(database.sort(function(a, b) { return b.value - a.value; }).slice(0, 20)), symbol: 'arrow', symbolSize: 10, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: colors[colorIndex][n], shadowBlur: 10, shadowColor: '#2f4554' }, emphasis: { color: '#fff', shadowBlur: 10, shadowColor: '#cfff' } }, zlevel: 1 }, { name: '主卧', type: 'effectScatter', coordinateSystem: 'geo', data: c1(da1.sort(function(a, b) { return b.value - a.value; }).slice(0, 20)), symbol: 'roundRect', //气泡 symbolSize: 10, // showEffectOn: 'render', // rippleEffect: { // brushType: 'stroke' // }, // hoverAnimation: true, label: { normal: { formatter: '{b}' + year1[n] + '：开', position: 'bottom', show: true }, emphasis: { formatter: '{b}' + year[n] + '：' + tian[n][0], position: 'bottom', show: true }, }, itemStyle: { normal: { color: '#2f4554', shadowBlur: 10, shadowColor: '#2f4554' }, emphasis: { color: '#c23531', shadowBlur: 10, shadowColor: '#c23531' }, }, zlevel: 1 }, { name: '书房控制', type: 'effectScatter', coordinateSystem: 'geo', data: c2(da2.sort(function(a, b) { return b.value - a.value; }).slice(0, 20)), symbol: 'roundRect', //气泡 symbolSize: 10, // showEffectOn: 'render', // rippleEffect: { // brushType: 'stroke' // }, // hoverAnimation: true, label: { normal: { formatter: '{b}' + year1[n] + '：开', position: 'bottom', show: true }, emphasis: { formatter: '{b}' + year[n] + '：' + tian[n][2], position: 'bottom', show: true }, }, itemStyle: { normal: { color: '#2f4554', shadowBlur: 10, shadowColor: '#2f4554' }, emphasis: { color: '#c23531', shadowBlur: 10, shadowColor: '#c23531' }, }, zlevel: 1 }, { name: '卫生间控制', type: 'effectScatter', coordinateSystem: 'geo', data: c3(da3.sort(function(a, b) { return b.value - a.value; }).slice(0, 20)), symbol: 'roundRect', //气泡 symbolSize: 10, // showEffectOn: 'render', // rippleEffect: { // brushType: 'stroke' // }, // hoverAnimation: true, label: { normal: { formatter: '{b}' + year1[n] + '：开', position: 'bottom', show: true }, emphasis: { formatter: '{b}' + year[n] + '：' + tian[n][0], position: 'bottom', show: true }, }, itemStyle: { normal: { color: '#2f4554', shadowBlur: 10, shadowColor: '#2f4554' }, emphasis: { color: '#c23531', shadowBlur: 10, shadowColor: '#c23531' }, }, zlevel: 1 }, { name: '客厅控制', type: 'effectScatter', coordinateSystem: 'geo', data: c4(da4.sort(function(a, b) { return b.value - a.value; }).slice(0, 20)), symbol: 'roundRect', //气泡 symbolSize: 10, // showEffectOn: 'render', // rippleEffect: { // brushType: 'stroke' // }, // hoverAnimation: true, label: { normal: { formatter: '{b}' + year1[n] + '：开', position: 'bottom', show: true }, emphasis: { formatter: '{b}' + year[n] + '：' + tian[n][0], position: 'bottom', show: true }, }, itemStyle: { normal: { color: '#2f4554', shadowBlur: 10, shadowColor: '#2f4554' }, emphasis: { color: '#c23531', shadowBlur: 10, shadowColor: '#c23531' }, }, zlevel: 1 }, { name: '次卧控制', type: 'effectScatter', coordinateSystem: 'geo', data: c5(da5.sort(function(a, b) { return b.value - a.value; }).slice(0, 20)), symbol: 'roundRect', //气泡 symbolSize: 10, // showEffectOn: 'render', // rippleEffect: { // brushType: 'stroke' // }, // hoverAnimation: true, label: { normal: { formatter: '{b}' + year1[n] + '：开', position: 'bottom', show: true }, emphasis: { formatter: '{b}' + year[n] + '：' + tian[n][0], position: 'bottom', show: true }, }, itemStyle: { normal: { color: '#2f4554', shadowBlur: 10, shadowColor: '#2f4554' }, emphasis: { color: '#c23531', shadowBlur: 10, shadowColor: '#c23531' }, }, zlevel: 1 }, { name: '楼梯控制', type: 'effectScatter', coordinateSystem: 'geo', data: c6(da6.sort(function(a, b) { return b.value - a.value; }).slice(0, 20)), symbol: 'roundRect', //气泡 symbolSize: 10, // showEffectOn: 'render', // rippleEffect: { // brushType: 'stroke' // }, // hoverAnimation: true, label: { normal: { formatter: '{b}' + year1[n] + '：开', position: 'bottom', show: true }, emphasis: { formatter: '{b}' + year[n] + '：' + tian[n][0], position: 'bottom', show: true }, }, itemStyle: { normal: { color: '#2f4554', shadowBlur: 10, shadowColor: '#2f4554' }, emphasis: { color: '#c23531', shadowBlur: 10, shadowColor: '#c23531' }, }, zlevel: 1 }, { name: '厨房控制', type: 'effectScatter', coordinateSystem: 'geo', data: c7(da7.sort(function(a, b) { return b.value - a.value; }).slice(0, 20)), symbol: 'roundRect', //气泡 symbolSize: 10, // showEffectOn: 'render', // rippleEffect: { // brushType: 'stroke' // }, // hoverAnimation: true, label: { normal: { formatter: '{b}' + year1[n] + '：开', position: 'bottom', show: true }, emphasis: { formatter: '{b}' + year[n] + '：' + tian[n][0], position: 'bottom', show: true }, }, itemStyle: { normal: { color: '#2f4554', shadowBlur: 10, shadowColor: '#2f4554' }, emphasis: { color: '#c23531', shadowBlur: 10, shadowColor: '#c23531' }, }, zlevel: 1 }, //线条聚点 {name:'传输路线', type: 'lines', zlevel: 2, effect: { show: true, period: 4, //箭头指向速度，值越小速度越快 trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重 symbol: 'arrow', //箭头图标 symbolSize: 3, //图标大小 }, lineStyle: { normal: { color: colors[colorIndex][n], width: 0.1, //尾迹线条宽度 opacity: 0.5, //尾迹线条透明度 curveness: .3 //尾迹线条曲直度 } }, //调用聚点随机 data: convertToLineData(line1, geoGpsMap[Math.ceil(1)]) }, {name:'传输路线', type: 'lines', zlevel: 2, effect: { show: true, period: 4, //箭头指向速度，值越小速度越快 trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重 symbol: 'arrow', //箭头图标 symbolSize: 3, //图标大小 }, lineStyle: { normal: { color: colors[colorIndex][n], width: 0.1, //尾迹线条宽度 opacity: 0.5, //尾迹线条透明度 curveness: .3 //尾迹线条曲直度 } }, //调用聚点随机 data: convertToLineData(line2, geoGpsMap[Math.ceil(2)]) }, {name:'传输路线', type: 'lines', zlevel: 2, effect: { show: true, period: 4, //箭头指向速度，值越小速度越快 trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重 symbol: 'arrow', //箭头图标 symbolSize: 3, //图标大小 }, lineStyle: { normal: { color: colors[colorIndex][n], width: 0.1, //尾迹线条宽度 opacity: 0.5, //尾迹线条透明度 curveness: .3 //尾迹线条曲直度 } }, //调用聚点随机 data: convertToLineData(line3, geoGpsMap[Math.ceil(3)]) }, {name:'传输路线', type: 'lines', zlevel: 2, effect: { show: true, period: 4, //箭头指向速度，值越小速度越快 trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重 symbol: 'arrow', //箭头图标 symbolSize: 3, //图标大小 }, lineStyle: { normal: { color: colors[colorIndex][n], width: 0.1, //尾迹线条宽度 opacity: 0.5, //尾迹线条透明度 curveness: .3 //尾迹线条曲直度 } }, //调用聚点随机 data: convertToLineData001(line4, geoGpsMap[Math.ceil(4)]) }, //柱状图 { zlevel: 1.5, type: 'bar', symbol: 'none', itemStyle: { normal: { color: colors[colorIndex][n] } }, data: barData[n] }, { xAxisIndex: 1, yAxisIndex: 1, name: '历史平均数据1', type: 'line', lineStyle: { normal: { color: '#4ea397' } }, data: lineData1[n], markPoint: { data: [{ type: 'max', name: '最大值', symbolSize: 40 }, { type: 'min', name: '最小值', symbolSize: 20 } ], itemStyle: { normal: { color: '#d0648a' } } }, markLine: { data: [{ type: 'average', name: '平均值' }] } }, { xAxisIndex: 1, yAxisIndex: 1, name: '历史平均数据2', type: 'line', lineStyle: { normal: { color: '#4ea397' } }, data: lineData2[n], markPoint: { data: [{ type: 'max', name: '最大值', symbolSize: 40 }, { type: 'min', name: '最小值', symbolSize: 20 } ], itemStyle: { normal: { color: '#d0648a' } } }, markLine: { data: [{ type: 'average', name: '平均值' }] } }, ] }) } myChart.setOption(optionXyMap01); }); });
效果图：
