修改各类数据存储分布图表

TreeWish

2023-02-23 510c50da32ba5bdc16e912b1c893000a45dc6305

修改各类数据存储分布图表

 src/components/Screen/right.vue

@@ -11,7 +11,8 @@
      </div>
      <div class="current1">
        <div class="aside-title">各类数据存储分布</div>
        <echart13></echart13>
        <!-- <echart13></echart13> -->
        <chart></chart>
      </div>
    </div>
    <div class="rightarrow">
@@ -23,11 +24,14 @@
import echart11 from "@/components/echart11.vue"
import echart12 from "@/components/echart12.vue"
import echart13 from "@/components/echart13.vue"
import chart from "@/components/chart/index.vue"

export default {
  components: {
    echart11,
    echart12,
    echart13,
    chart
  },
  data() {
    return {
@@ -82,16 +86,6 @@
      background: url(../../assets/img/Screen/chartbg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .aside-title {
      padding-left: 30px;
      height: 27px;
      line-height: 27px;
      background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
      font-size: 15px;
      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
      -webkit-background-clip: text;
      color: #fff;
    }
  }
}

 src/components/chart/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,211 @@
<template>
  <div class="echart" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts"

export default {
  data() {
    return {}
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart)

      chart.setOption(option)
      window.addEventListener("resize", function () {
        chart.resize()
      })
    },
    initData() {
      let dataPie = [
        {
          value: 410,
          name: "企业",
        },
        {
          value: 380,
          name: "政府",
        },
        {
          value: 50,
          name: "个人",
        },
        {
          value: 50,
          name: "个人1",
        },
        {
          value: 50,
          name: "个人2",
        },
        {
          value: 50,
          name: "个人3",
        },
        {
          value: 50,
          name: "个人4",
        },
        {
          value: 50,
          name: "个人5",
        },
      ]
      let colorPie = ["#5f6d86", "#0b2036", "#002e49"]
      let colorWrap = [
        "#3087d6",
        "#afe1ff",
        "#4be1ff",
        "#006CFF",
        "#5C7AAE",
        "#15D0FF",
        "#00BAFF",
        "#9BD3FF",
      ]
      let baseDataPie = [],
        baseDataWrap = []
      for (var i = 0; i < dataPie.length; i++) {
        baseDataPie.push({
          value: dataPie[i].value,
          name: dataPie[i].name,
          itemStyle: {
            normal: {
              borderWidth: 0.5,
              borderColor: "#5f6d86",
            },
          },
        })
        baseDataWrap.push(
          {
            value: dataPie[i].value,
            name: dataPie[i].name,
            itemStyle: {
              normal: {
                color: colorWrap[i],
                borderWidth: 5,
                borderColor: colorWrap[i],
                shadowBlur: 5,
                shadowColor: "rgba(48, 135, 214, 0.3)",
              },
            },
          },
          {
            value: 30,
            name: "",
            itemStyle: {
              normal: {
                color: "transparent",
                borderWidth: 20,
                borderColor: "transparent",
              },
            },
          }
        )
      }

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

          formatter: function (name) {
            let target
            for (let i = 0; i < dataPie.length; i++) {
              if (dataPie[i].name === name) {
                target = dataPie[i].value
              }
            }
            let arr = [name, target]
            return arr.join("\n")
          },
          textStyle: {
            lineHeight: 20,
            color: "#9ed2f5",
          },
        },
        grid: {
          left: "1%", // ä¸Žå®¹å™¨å·¦ä¾§çš„距离
          right: "1%", // ä¸Žå®¹å™¨å³ä¾§çš„距离
          top: "1%", // ä¸Žå®¹å™¨é¡¶éƒ¨çš„距离
          bottom: "1%", // ä¸Žå®¹å™¨åº•éƒ¨çš„距离
        },
        series: [
          {
            name: "",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ["30%", "50%"],
            radius: ["60%", "65%"],
            tooltip: {
              show: false,
            },
            label: {
              normal: {
                show: false,
              },
            },
            data: baseDataWrap,
          },
          {
            name: "报警",
            type: "pie",
            color: "#5F6D86",
            selectedMode: "single",
            center: ["30%", "50%"],
            radius: ["73%", "74%"],
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
              },
            },

            data: baseDataPie,
          },
        ],
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 100%;
}
</style>

 src/views/Thematic/index.vue

@@ -3,13 +3,16 @@
    <mapsdk></mapsdk>
    <top class="title" ref="title"></top>
    <left class="mapleft" :style="{ width: leftWidth }" ref="mapleft"></left>
    <right class="mapright" :style="{ width: rightWidth }" ref="mapright"></right>
    <right
      class="mapright"
      :style="{ width: rightWidth }"
      ref="mapright"
    ></right>
    <bottom class="mapbottom" ref="mapbottom"></bottom>
</div>
  </div>
</template>

<script>

import mapsdk from "@/components/Screen/mapsdk.vue"
import top from "../../components/Screen/top.vue"
import left from "@/components/Screen/left.vue"
@@ -25,8 +28,8 @@
      rightWidth: "20%",
    }
  },
  mounted() { },
  created() { },
  mounted() {},
  created() {},
  methods: {
    //修改左侧宽度
    ChangeWidth(parm) {
@@ -36,10 +39,10 @@
        } else {
          this.leftWidth = "20%"
        }
      };
      if (parm == "leftView" || parm == "leftTree") { this.leftWidth = "20%" }


      }
      if (parm == "leftView" || parm == "leftTree") {
        this.leftWidth = "20%"
      }

      if (parm == "right") {
        if (this.rightWidth == "20%") {
@@ -95,4 +98,20 @@
  height: 90px;
  width: 100%;
  z-index: 999;
}</style>
}
</style>

<style lang="less">
.themaic {
  .aside-title {
    padding-left: 30px;
    height: 27px;
    line-height: 27px;
    background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
    font-size: 15px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
    -webkit-background-clip: text;
    color: #fff;
  }
}
</style>