管网一张图对接接口数据

TreeWish

2023-02-23 5aec569c9d67c86819010171bc527afede505fe5

 src/components/chart/ServiceType.vue

ÎļþÃû´Ó src/components/chart/index.vue ÐÞ¸Ä
@@ -4,7 +4,7 @@

<script>
import * as echarts from "echarts"

import { countDataVisit } from "@/api/screen.js"
export default {
  data() {
    return {}
@@ -13,15 +13,8 @@
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart)

      chart.setOption(option)
      window.addEventListener("resize", function () {
        chart.resize()
      })
    },
    initData() {
    async initChart() {
      const res = await countDataVisit()
      let dataPie = [
        {
          value: 410,
@@ -56,15 +49,26 @@
          name: "个人5",
        },
      ]
      let count = 0
      if (res.code == 200) {
        dataPie = res.result.map(item => {
          count += item.count
          return {
            value: item.count,
            name: item.modular1,
          }
        })
      }

      let colorPie = ["#5f6d86", "#0b2036", "#002e49"]
      let colorWrap = [
        "#006CFF",
        "#3087d6",
        "#afe1ff",
        "#4be1ff",
        "#006CFF",
        "#5C7AAE",
        "#15D0FF",
        "#00BAFF",
        "#7f44bb",
        "#9BD3FF",
      ]
      let baseDataPie = [],
@@ -87,7 +91,7 @@
            itemStyle: {
              normal: {
                color: colorWrap[i],
                borderWidth: 5,
                borderWidth: 4,
                borderColor: colorWrap[i],
                shadowBlur: 5,
                shadowColor: "rgba(48, 135, 214, 0.3)",
@@ -109,35 +113,36 @@
      }

      let option = {
        backgroundColor: "#021228",
        backgroundColor: "transparent",
        title: {
          text: "服务类型总数量",
          subtext: "10,225",
          subtext: count,
          textStyle: {
            color: "#00b5f3",
            color: "#fff",
            fontSize: 12,
          },
          subtextStyle: {
            align: "center",
            fontSize: 18,
            color: ["#85c7e3"],
            fontWeight: 800,
            fontSize: 20,
            color: ["#fff"],
            fontWeight: 400,
            fontFamily: "YouSheBiaoTiHei",
          },
          x: "20%",
          y: "40%",
        },
        tooltip: {
          show: true,
          // trigger: "item",
          // formatter: "{a}：{b} <br/>占比：{d}%",
        },
        // tooltip: {
        //   show: true,
        //   // trigger: "item",
        //   // formatter: "{a}：{b} <br/>占比：{d}%",
        // },
        legend: {
          data: ["企业", "政府", "个人"],
          data: dataPie,
          icon: "vertical",
          right: "1%",
          top: "center",
          top: "10%",
          orient: "vertical",
          itemGap: 20,
          itemGap: 7,
          itemWidth: 12,
          itemHeight: 3,

@@ -148,11 +153,11 @@
                target = dataPie[i].value
              }
            }
            let arr = [name, target]
            return arr.join("\n")
            let arr = `${name} |${target}`
            return arr
          },
          textStyle: {
            lineHeight: 20,
            lineHeight: 15,
            color: "#9ed2f5",
          },
        },
@@ -181,7 +186,7 @@
            data: baseDataWrap,
          },
          {
            name: "报警",
            name: "服务类型",
            type: "pie",
            color: "#5F6D86",
            selectedMode: "single",
@@ -198,6 +203,12 @@
          },
        ],
      }
      const chart = echarts.init(this.$refs.chart)

      chart.setOption(option)
      window.addEventListener("resize", function () {
        chart.resize()
      })
    },
  },
}