number_zj/portal/Digitalgovernment/town/h5/cunzhen/1.js

// 新建改造污水配套管网公里数
// Area:地区 Aim：目标值 Actual: 实际值
var myChart71 = echarts.init(document.querySelector(".echart71"))
var myChart72 = echarts.init(document.querySelector(".echart72"))
var sewagepipe = "http://118.178.224.202:8024/api/sewage-pipe"
$.get(sewagepipe, function (data) {
  var d = []
  d = data.data
  let arryArea = []
  let arryAim = []
  let arryActual = []
  let countAim = 0
  let countActual = 0
  d.forEach(function (item) {
    arryArea.push(item.area)
    arryAim.push(item.aim)
    arryActual.push(item.actual)
    countAim += item.aim
    countActual += item.actual
  })
  $("#countaim1").empty().append(countAim)
  let rate = countAim == 0 ? 0 : Number((countActual / countAim) * 100)
  let other = Number(100 - rate)
  let rate_percent = rate.toFixed(1) + "%"
  let other_percent = other.toFixed(1) + "%"
  let ratedata = [
    {
      value: rate,
      name: rate_percent,
      label: {
        position: "center",
        fontSize: 18,
        color: "#FE6900",
      },
      itemStyle: {
        color: "#FE6900",
      },
    },
    {
      value: other,
      name: other_percent,
      itemStyle: {
        color: "#EFEFEF",
      },
      label: {
        show: false,
      },
    },
  ]

  var option71 = {
    tooltip: {
      trigger: "item",
      show: false,
      showContent: true,
    },

    series: [
      {
        // name: "Access From",
        type: "pie",
        radius: ["70%", "90%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          // position: "center",
        },

        labelLine: {
          show: false,
        },
        data: ratedata,
      },
    ],
  }
  myChart71.setOption(option71)

  var option72 = {
    legend: {
      show: true,
	  selectedMode: false,
	     itemWidth: 15,
	     itemHeight:10,
      top: 5,
      left: 0,
      textStyle: {
        fontSize: 13,
        color: "#6e7178",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      confine: true,
      formatter: "{b}" + "  " + "{a0}" + ": " + "{c0}" + "  " + "{a1}" + ": " + "{c1}",
    },
    grid: {
      left: "0%",
      right: "0%",
      bottom: 0,
      top: 50,
      // containLabel: true,
    },
    xAxis: [
      {
        show: false,
      },
    ],

    yAxis: {
      type: "category",
	   //  max : 15,
	   // min : 0,
	   // splitNumber : 1,
      axisTick: {
        show: true,
        alignWithLabel: true,
      },

      axisLabel: {
        align: "left",
        verticalAlign: "bottom",
        lineHeight: 70,
        margin: -0,
        fontSize: 14,
        color: "#6e7178",
      },
      // tick是刻度，tickeline刻度线，axis是轴，
      axisTick: {
        show: false,
      },
      axisTickLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },

      data: arryArea,
    },
    label: {
      show: true,
      position: "left",
      align: "right",
      offset: [$(".echart62").width(), -13],

      formatter: "{c}公里",
      fontSize: 14,
      color: "#6e7178",
    },
    series: [
      {
        name: "目标值",
        type: "bar",
        barWidth: 10, //柱图宽度

        itemStyle: {
          color: "#3388FF",
          borderRadius: 5,
        },
        showBackground: {
          show: true,
        },
        backgroundStyle: {
          color: "#E6F1FF",
          borderRadius: 5,
        },
        // data: [16, 4.3, 10, 8.2, 5, 29.5, 10, 15.4, 25, 15.6, 1, 10],
        data: arryAim,
      },
      {
        name: "实际值",
        type: "bar",
        barWidth: 10, //柱图宽度

        itemStyle: {
          color: "#3BA272",
          borderRadius: 5,
        },
        showBackground: {
          show: true,
        },
        backgroundStyle: {
          color: "#E6F1FF",
          borderRadius: 5,
        },
        // data: [16, 4.3, 10, 8.2, 5, 29.5, 10, 15.4, 25, 15.6, 1, 10],
        data: arryActual,
        barGap: "250%",
      },
    ],
  }

  myChart72.setOption(option72)
})

// 农村生活污水处理设施标准化运维
// Area:地区 Aim：目标值 Actual: 实际值
var myChart73 = echarts.init(document.querySelector(".echart73"))
var myChart74 = echarts.init(document.querySelector(".echart74"))
var sewagetreatment = "http://118.178.224.202:8024/api/sewage-treatment"
$.get(sewagetreatment, function (data) {
  var d = []
  d = data.data
  let arryArea = []
  let arryAim = []
  let arryActual = []
  let countAim = 0
  let countActual = 0
  d.forEach(function (item) {
    arryArea.push(item.area)
    arryAim.push(item.aim)
    arryActual.push(item.actual)
    countAim += item.aim
    countActual += item.actual
  })
  $("#countaim2").empty().append(countAim)
  let rate = countAim == 0 ? 0 : Number((countActual / countAim) * 100)
  let other = Number(100 - rate)
  let rate_percent = rate.toFixed(1) + "%"
  let other_percent = other.toFixed(1) + "%"
  let ratedata = [
    {
      value: rate,
      name: rate_percent,
      label: {
        position: "center",
        fontSize: 18,
        color: "#31C463",
      },
      itemStyle: {
        color: "#31C463",
      },
    },
    {
      value: other,
      name: other_percent,
      itemStyle: {
        color: "#EFEFEF",
      },
      label: {
        show: false,
      },
    },
  ]

  var option73 = {
    tooltip: {
      trigger: "item",
      show: false,
      showContent: true,
    },
    series: [
      {
        type: "pie",
        radius: ["70%", "90%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          // position: "center",
        },

        labelLine: {
          show: false,
        },
        data: ratedata,
      },
    ],
  }

  myChart73.setOption(option73)

  var option74 = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      confine: true,
      // formatter: "{b}" + "{a1}" + ": " + "{c0}",
      formatter: "{b}" + "  " + "{a0}" + ": " + "{c0}" + "  " + "{a1}" + ": " + "{c1}",
    },
    legend: {
      show: true,
	  selectedMode: false,
	     itemWidth: 15,
	     itemHeight:10,
      textStyle: {
        fontSize: 13,
        color: "#6e7178",
      },
      top: 0,
      left: 0,

      // left: "left",
    },

    grid: {
      left: "0%",
      right: "0%",
      bottom: 0,
      top: 40,
      // containLabel: true,
    },
    xAxis: [
      {
        show: false,
      },
    ],

    // },],
    yAxis: {
      type: "category",

      axisLabel: {
        align: "left",
        verticalAlign: "bottom",
        lineHeight: 60,
        margin: -0,
        fontSize: 14,
        color: "#6e7178",
      },
      // tick是刻度，tickeline刻度线，axis是轴，
      axisTick: {
        show: false,
      },
      axisTickLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },

      data: arryArea,
    },
    label: {
      show: true,
      position: "left",
      align: "right",
      offset: [$(".echart62").width(), -13],
      formatter: "{c}个",
      fontSize: 14,
      color: "#6e7178",
    },
    series: [
      {
        name: "实际值",
        type: "bar",
        // stack: true,
        barWidth: 10, //柱图宽度

        itemStyle: {
          color: "#3388FF",
          borderRadius: 5,
        },
        showBackground: {
          show: true,
        },
        backgroundStyle: {
          color: "#E6F1FF",
          borderRadius: 5,
        },
        // data: [65, 61, 21, 18, 86, 165, 330, 320, 145, 49],
        data: arryActual,
      },
      {
        name: "目标值",
        type: "bar",
        barWidth: 10, //柱图宽度

        itemStyle: {
          color: "#3BA272",
          borderRadius: 5,
        },
        showBackground: {
          show: true,
        },
        backgroundStyle: {
          color: "#E6F1FF",
          borderRadius: 5,
        },
        // stack: true,
        // data: [65, 61, 21, 18, 86, 165, 330, 320, 145, 49],
        data: arryAim,
        barGap: "250%",
      },
    ],
  }

  myChart74.setOption(option74)
})