pingpu_vue_pack/dist/static/js/chart.js

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 + '%<br/>';
          }
          if (params[g].seriesIndex == 1) {
            returnData += params[g].seriesName + ':' + params[g].value + '°C<br/>';
          }
        }
        return time + '<br/>' + 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 +
          "</br>" +
          "数量：" +
          parms.data.value +
          "</br>" +
          "占比：" +
          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,
}