function home1Line(data, showed) { console.log(showed) return { title: { show: showed, // 是否显示title text: '暂无数据', left: 'center', top: 'center', textStyle: { color: '#9a9b9f', fontSize: 20, fontWeight: 400 } }, tooltip: { trigger: "axis", axisPointer: { lineStyle: { color: "#666" } }, formatter(params) { var returnData = ''; var time = ''; for (let g in params) { time = params[g].axisValue; if (params[g].seriesIndex == 0) { returnData += params[g].seriesName + ':' + params[g].value + '%
'; } if (params[g].seriesIndex == 1) { returnData += params[g].seriesName + ':' + params[g].value + '°C
'; } } return time + '
' + returnData; } }, legend: { top: "10", textStyle: { color: "#666", fontSize: "12" } }, grid: { left: "10", top: "80", right: "20", bottom: "10", containLabel: true }, xAxis: [{ type: "category", boundaryGap: false, axisLabel: { textStyle: { color: "#666", fontSize: 12 } }, axisLine: { lineStyle: { color: "#afb2c5" } }, splitLine: { show: true, lineStyle: { color: '#afb2c5' } }, data: data.time }, { axisPointer: { show: false }, axisLine: { show: false }, position: "bottom", offset: 0 } ], yAxis: [{ type: "value", axisTick: { show: false }, axisLine: { lineStyle: { color: "#afb2c5" } }, axisLabel: { textStyle: { color: "#666", fontSize: 12 } }, splitLine: { show: false } }], series: [{ name: "空气湿度", type: "line", smooth: true, symbol: "circle", //标记的 图形 symbolSize: 5, showSymbol: true, lineStyle: { normal: { color: "#42d3ff", width: 4 } }, areaStyle: { normal: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#a7caff' // 0% 处的颜色 }, { offset: 0.8, color: '#e3e8fe' // 100% 处的颜色 }], global: false // 缺省为 false }, shadowColor: "rgba(0, 0, 0, 0.1)" } }, itemStyle: { normal: { color: "#62e2ff", borderColor: "#62e2ff", borderWidth: 4 } }, data: data.ah }, { name: "空气温度", type: "line", smooth: true, symbol: "circle", symbolSize: 5, showSymbol: true, lineStyle: { normal: { color: "#fd0001", width: 3 } }, itemStyle: { normal: { color: "#fd0001", borderColor: "#fd0001", borderWidth: 4 } }, data: data.at } ] }; } function home1Pie(bzy, cbd, qxz, scd, xycb, jk, tccb, xy2, wheat, sf, sycb, ndqxz) { var data = []; var colorList = []; if (bzy > 0) { data.push({ "name": "孢子仪", "value": bzy }) colorList.push('#00d0ae'); } if (cbd > 0) { data.push({ "name": "虫情测报", "value": cbd }) colorList.push('#d70252'); } if (qxz > 0) { data.push({ "name": "环境监测", "value": qxz }) colorList.push('#ffa300'); } if (scd > 0) { data.push({ "name": "杀虫灯", "value": scd }) colorList.push('#1e75ff'); } // 新 if (xycb > 0) { data.push({ "name": "性诱测报", "value": xycb }) colorList.push('#00d0ae'); } if (jk > 0) { data.push({ "name": "监控", "value": jk }) colorList.push('#d70252'); } if (tccb > 0) { data.push({ "name": "糖醋测报", "value": tccb }) colorList.push('#ffa300'); } if (xy2> 0) { data.push({ "name": "性诱2.0", "value": xy2 }) colorList.push('#1e75ff'); } if (wheat > 0) { data.push({ "name": "小麦赤霉病", "value": wheat }) colorList.push('#00d0ae'); } if (sf > 0) { data.push({ "name": "水肥", "value": sf }) colorList.push('#d70252'); } if (sycb > 0) { data.push({ "name": "色诱测报", "value": sycb }) colorList.push('#ffa300'); } if (ndqxz> 0) { data.push({ "name": "管式墒情", "value": ndqxz }) colorList.push('#1e75ff'); } let total = bzy + cbd + qxz + scd + xycb + jk + tccb + xy2 + wheat + sf + sycb + ndqxz return { "animation": true, "title": { "text": `${total}台`, "x": "center", "y": "center", "textStyle": { "color": "#1e74fd", "fontSize": 20, "fontWeight": "normal", "align": "center", "width": "100px", }, "top": "56%", }, grid: { x: '57%', y: '17%', width: '38%', height: '38%' }, "legend": { "width": "90%", "left": "center", "textStyle": { "color": "#666", "fontSize": 12 }, "icon": "circle", "right": "0", "bottom": "0", "padding": [5, 10], "itemGap": 10, // "data": ["气象监测", "孢子仪设备", "杀虫灯设备", "测报设备"] "data": ["杀虫灯设备", "测报设备"] }, "series": [{ "type": "pie", // "center": ["50%", "50%"], "center": ["50%", "60%"], "radius": ['20%', "50%"], "color": colorList, "startAngle": 135, "labelLine": { "normal": { "length": 10, 'length2':5 } }, "label": { "normal": { "formatter": "{b|{b}\n}{per|{c}台}", "backgroundColor": "rgba(255, 147, 38, 0)", "borderColor": "red", "borderRadius": 4, "rich": { "b": { // "color": "red", "fontSize": 15, "lineHeight": 33 }, "per": { // "color": "#FDF44E", "fontSize": 16, "padding": [5, 6], "borderRadius": 2 } }, "textStyle": { "fontSize": 20 } } }, "emphasis": { "label": { "show": true, "formatter": "{b|{b}\n}{per|{d}%} ", "backgroundColor": "rgba(255, 147, 38, 0)", "borderColor": "transparent", "borderRadius": 4, "rich": { "a": { "color": "#999", "lineHeight": 22, "align": "center" }, "b": { // "color": "red", "fontSize": 18, "lineHeight": 33 }, "per": { // "color": "#FDF44E", "fontSize": 18, "padding": [5, 6], "borderRadius": 2 } } } }, "data": data }] }; } const option03 = { "animation": true, "title": { "text": '24台', "x": "center", "y": "center", "textStyle": { "color": "#1e74fd", "fontSize": 20, "fontWeight": "normal", "align": "center", "width": "100px" }, }, "legend": { "width": "90%", "left": "center", "textStyle": { "color": "#666", "fontSize": 12 }, "icon": "circle", "right": "0", "bottom": "0", "padding": [5, 10], "itemGap": 10, // "data": ["气象监测", "孢子仪设备", "杀虫灯设备", "测报设备"] "data": ["气象监测", "孢子仪设备", "杀虫灯设备", "测报设备", "性诱测报" , "监控", "糖醋测报", "性诱2.0", "小麦赤霉病", "水肥", "色诱测报", "管式墒情"] }, "series": [{ "type": "pie", "center": ["50%", "50%"], "radius": ["60%", "70%"], "color": ["#00d0ae", "#d70252", "#ffa300", "#1e75ff"], "startAngle": 135, "labelLine": { "normal": { "length": 25 } }, "label": { "normal": { "formatter": "{c}台", "backgroundColor": "rgba(255, 147, 38, 0)", "borderColor": "transparent", "borderRadius": 4, "rich": { "a": { "color": "#999", "lineHeight": 22, "align": "center" }, "hr": { "borderColor": "#aaa", "width": "100%", "borderWidth": 1, "height": 0 }, "b": { "color": "#b3e5ff", "fontSize": 16, "lineHeight": 33 }, "c": { "fontSize": 90, "color": "red" }, "per": { "color": "#FDF44E", "fontSize": 14, "padding": [5, 8], "borderRadius": 2 } }, "textStyle": { "fontSize": 20 } } }, "emphasis": { "label": { "show": true, "formatter": "{b|{b}:} {per|{d}%} ", "backgroundColor": "rgba(255, 147, 38, 0)", "borderColor": "transparent", "borderRadius": 4, "rich": { "a": { "color": "#999", "lineHeight": 22, "align": "center" }, "hr": { "borderColor": "#aaa", "width": "100%", "borderWidth": 1, "height": 0 }, "b": { "color": "#fff", "fontSize": 18, "lineHeight": 33 }, "c": { "fontSize": 14, "color": "#eee" }, "per": { "color": "#FDF44E", "fontSize": 25, "padding": [5, 6], "borderRadius": 2 } } } }, // "data": [{ // "name": "气象监测", // "value": 3 // }, { // "name": "孢子仪设备", // "value": 7 // }, { // "name": "杀虫灯设备", // "value": 4 // }, { // "name": "测报设备", // "value": 10 // }] "data": [{ "name": "气象监测", "value": 3 }, { "name": "孢子仪设备", "value": 7 }, { "name": "杀虫灯设备", "value": 4 }, { "name": "测报设备", "value": 10 }, { "name": "性诱测报", "value": 3 }, { "name": "监控", "value": 7 }, { "name": "糖醋测报", "value": 4 }, { "name": "性诱2.0", "value": 10 }, { "name": "小麦赤霉病", "value": 3 }, { "name": "水肥", "value": 7 }, { "name": "色诱测报", "value": 4 }, { "name": "管式墒情", "value": 10 }, ] }] } // function myEcharts(arr,total) { // return { // "animation": true, // "title": { // "text": `${total}台`, // "x": "center", // "y": "center", // "textStyle": { // "color": "#1e74fd", // "fontSize": 20, // "fontWeight": "normal", // "align": "center", // "width": "100px" // }, // }, // "legend": { // "width": "90%", // "left": "center", // "textStyle": { // "color": "#666", // "fontSize": 12 // }, // "icon": "circle", // "right": "0", // "bottom": "0", // "padding": [5, 10], // "itemGap": 10, // "data": ["性诱3.0", "水电双计", "温室大棚", "水肥设备", "病虫害可视监测" , "性诱测报", "性诱2.0", "孢子仪", "环境监测", "监控设备", "水肥一体化", "小麦赤霉病","吸虫塔","玉米大斑病","测报灯","杀虫灯","管事墒情","小麦条锈病"] // }, // "series": [{ // "type": "pie", // "center": ["50%", "50%"], // // "radius": ["60%", "70%"], // "radius": ["30%","40%"], // "color": ["#00d0ae", "#d70252", "#ffa300", "#1e75ff"], // "startAngle": 135, // "labelLine": { // "normal": { // "length": 25 // } // }, // "label": { // "normal": { // "formatter": "{c}台", // "backgroundColor": "rgba(255, 147, 38, 0)", // "borderColor": "transparent", // "borderRadius": 4, // "rich": { // "a": { // "color": "#999", // "lineHeight": 22, // "align": "center" // }, // "hr": { // "borderColor": "#aaa", // "width": "100%", // "borderWidth": 1, // "height": 0 // }, // "b": { // "color": "#b3e5ff", // "fontSize": 16, // "lineHeight": 33 // }, // "c": { // "fontSize": 90, // "color": "red" // }, // "per": { // "color": "#FDF44E", // "fontSize": 14, // "padding": [5, 8], // "borderRadius": 2 // } // }, // "textStyle": { // "fontSize": 20 // } // } // }, // "emphasis": { // "label": { // "show": true, // "formatter": "{b|{b}:} {per|{d}%} ", // "backgroundColor": "rgba(255, 147, 38, 0)", // "borderColor": "transparent", // "borderRadius": 4, // "rich": { // "a": { // "color": "#999", // "lineHeight": 22, // "align": "center" // }, // "hr": { // "borderColor": "#aaa", // "width": "100%", // "borderWidth": 1, // "height": 0 // }, // "b": { // "color": "#fff", // "fontSize": 18, // "lineHeight": 33 // }, // "c": { // "fontSize": 14, // "color": "#eee" // }, // "per": { // "color": "#FDF44E", // "fontSize": 25, // "padding": [5, 6], // "borderRadius": 2 // } // } // } // }, // "data": arr // }] // } // } function myEcharts(arr,total) { return { title: [ { // text: "标题", textStyle: { fontSize: 16, color: "black", }, left: "2%", }, { text: "设备数量", subtext: total, textStyle: { fontSize: 20, color: "black", }, subtextStyle: { fontSize: 20, color: "black", }, textAlign: "center", x: "34.5%", y: "44%", }, ], tooltip: { trigger: "item", formatter: function (parms) { var str = parms.marker + "" + parms.data.name + "
" + "数量:" + parms.data.value + "
" + "占比:" + parms.percent + "%"; return str; }, }, legend: { type: "scroll", orient: "vertical", left: "70%", align: "left", top: "middle", textStyle: { color: "#8C8C8C", }, height: 250, }, series: [ { // name: "标题", type: "pie", center: ["35%", "50%"], radius: ["40%", "65%"], clockwise: false, //饼图的扇区是否是顺时针排布 avoidLabelOverlap: false, label: { show: false }, labelLine: { show: false }, data: arr, }, ], } } // option01和option02是Home页面的echarts数据 export { home1Line, home1Pie, myEcharts, option03, }