修改基础数据

TreeWish

2023-02-27 fb212223fdc2f692896da5483ba2b1a8aec22d5f

修改基础数据

 src/components/Screen/bottom.vue

@@ -201,6 +201,7 @@
          break
        case "项目展示":
          this.DisplayCurrentProject(child)
          this.changeProject(child)
          break
        case "专题展示":
          this.changeProject(child)

 src/components/Screen/left.vue

@@ -3,7 +3,7 @@
    <div class="leftarrow">
      <img :src="leftImg" @click="ChangeLeft" />
    </div>
    <div class="leftContainer" v-if="ChartDisplay">
    <div class="leftContainer" v-if="currentDisplay == '大屏' && ChartDisplay">
      <div class="current1" id="leftCurrent1">
        <div class="aside-title">数据申请次数</div>
        <count-data-apply></count-data-apply>
@@ -17,38 +17,51 @@
        <data-storage></data-storage>
      </div>
    </div>
    <!-- å…¨çƒç»Ÿè®¡æ¬¡æ•° -->
    <div class="leftContainer" v-if="GlobleChartDisplay">
    <!-- å…¨çƒã€å…¨å›½ç»Ÿè®¡æ¬¡æ•° -->
    <div class="leftContainer" v-if="currentDisplay == '项目'">
      <div class="current1" id="leftCurrent1">
        <div class="aside-title">项自类型</div>
        <div class="aside-title">国内、国外</div>
      </div>
      <div class="current1" id="leftCurrent2">
        <div class="aside-title">统计地灾、洞库等专业数据存储量</div>
        <base-line-chart :project="currProject"></base-line-chart>

      </div>
      <div class="current1" id="leftCurrent3">
        <div class="aside-title">数据存储量</div>
        <data-storage></data-storage>
      </div>
    </div>
    <!-- å…¨çƒã€å…¨å›½ç®¡ç½‘图 -->
    <div class="leftContainer" v-if="currentDisplay == '管网'">
      <div class="current1" id="leftCurrent1">
        <div class="aside-title">管网国内、国外</div>
        <!-- <base-bar-chart :project="currProject"></base-bar-chart> -->
        <!-- <count-data-apply></count-data-apply> -->
      </div>
      <div class="current1" id="leftCurrent2">
        <div class="aside-title">用户访问量</div>
        <base-pie-chart :project="currProject"></base-pie-chart>
        <div class="aside-title">输送介质类别统计长度</div>
        <base-line-chart :project="currProject"></base-line-chart>
        <!-- <base-pie-chart :project="currProject"></base-pie-chart> -->
        <!-- <service-type></service-type> -->
      </div>
      <div class="current1" id="leftCurrent3">
        <div class="aside-title">项目存储信息</div>
        <div class="aside-title">数据存储量</div>
        <data-storage></data-storage>
      </div>
    </div>
    <!-- å…¨å›½é¡¹ç›®ç»Ÿè®¡æ¬¡æ•° -->
    <div class="leftContainer" v-if="CountryChartDisplay">
      <div class="current1" id="leftCurrent1">
        <div class="aside-title">数据申请次数</div>
        <count-data-apply></count-data-apply>
    <!-- å•ä¸ªå·¥ç¨‹å±•ç¤º -->
    <div class="leftContainer" v-if="currentDisplay == '工程'">
      <div class="current1" >
        <div class="aside-title">工程简介</div>

      </div>
      <div class="current1" id="leftCurrent2">
        <div class="aside-title">用户访问量</div>
        <service-type></service-type>
      <div class="current1" >
        <div class="aside-title">项目状态</div>
 
      </div>
      <div class="current1" id="leftCurrent3">
        <div class="aside-title">项目存储信息</div>
        <data-storage></data-storage>
      <div class="current1">
        <div class="aside-title">建设工期</div>

      </div>
    </div>
    <!-- <div class="leftContainer" v-if="ProjectreeDisplay">
@@ -72,7 +85,7 @@
    DataStorage,
    BaseBarChart,
    BaseLineChart,
    BasePieChart
    BasePieChart,
  },
  data() {
    return {
@@ -83,24 +96,22 @@
      CountryChartDisplay: false,
      leftImg: require("../../assets/img/Screen/rightArrow.png"),
      currProject: "全球项目",
      currentDisplay: "大屏",
    }
  },
  mounted() {
    this.OpenLeftInit()
    // this.OpenLeftInitChart();

    this.$bus.$on("changeProject", name => {
      this.currProject = name
      this.GlobleChartDisplay = true
      this.ChartDisplay = false
      // if (name == "全球项目") {
      //   this.GlobleChartDisplay = true
      //   this.ChartDisplay = false

      // } else {
      //   this.ChartDisplay = true
      //   this.GlobleChartDisplay = false

      // }
      if (name.includes("全球管网") || name.includes("全国管网")) {
        this.currentDisplay = "管网"
      } else if (name.includes("全球项目") || name.includes("全国项目")) {
        this.currentDisplay = "项目"
      } else {
        this.currentDisplay = '工程'
      }
      this.currentProject = name
    })
  },
  methods: {
@@ -127,13 +138,14 @@
    },
    //打开大屏左侧界面
    OpenLeftInit() {
      this.currentDisplay = "大屏"

      this.ChartDisplay = true
      this.ProjectreeDisplay = false
      this.leftMessage = "init"
      // this.OpenLeftInitChart();
      this.$parent.ChangeWidth("leftView")
      this.GlobleChartDisplay = false

    },
    //打开工程树
    OpenLeftProjectTree() {
@@ -600,7 +612,7 @@

  .leftContainer {
    height: 100%;
    width: calc(100% - 7px);
    width: calc(100% - 45px);
    display: flex;
    flex-direction: column;
    align-items: center;

 src/components/Screen/right.vue

@@ -1,62 +1,88 @@
<template>
  <div class="current">
    <div class="rightContainer" v-if="ChartDisplay">
    <div class="rightContainer" v-if="currentDisplay == '大屏' && ChartDisplay">
      <div class="current1">
        <div class="aside-title">项目统计</div>
        <project-category></project-category>
      </div>
      <div class="current1">
        <div class="aside-title">数据统计</div>
        <!-- <div class="content" style="height:30px">
          <div class="header">
            <div>格式</div>
            <div>数量</div>
          </div>
        </div> -->
        <file-format></file-format>
        <visit-count></visit-count>
      </div>
      <div class="current1">
        <div class="aside-title">服务访问次数</div>
        <Service-Get></Service-Get>
      </div>
    </div>

    <div
      class="rightContainer2"
      v-if="CourtyDisplay && currentProject == '全球项目'"
    >
    <!-- å…¨çƒã€å…¨å›½é¡¹ç›® -->
    <div class="rightContainer" v-if="currentDisplay == '项目'">
      <div class="current1">
        <div class="aside-title">项目数量柱状图</div>
        <div class="aside-title">站场座数</div>
        <!-- <country-dimension-bar ref="barRef"></country-dimension-bar> -->
        <base-bar-chart :project="currentProject"></base-bar-chart>
      </div>
      <div class="current1">
        <div class="aside-title">项目数量饼状图</div>
        <country-dimension-pie ref="pieRef"></country-dimension-pie>
        <div class="aside-title">阀室座数</div>
        <!-- <base-pie-chart :project="currentProject"></base-pie-chart> -->
        <country-dimension-pie
          v-if="currentProject == '全球项目'"
          ref="pieRef"
        ></country-dimension-pie>
        <province-dimension-pie v-else ref="pieRef"></province-dimension-pie>
      </div>
      <div class="current1">
        <div class="aside-title">项目数量饼状图</div>
        <dv-capsule-chart
          :config="config"
          style="width: 300px; height: 200px"
        />
        <div class="aside-title">项目数据使用情况</div>
        <dv-capsule-chart :config="config" style="width: 360px; height: 85%" />
      </div>
    </div>

    <div
      class="rightContainer2"
      v-if="CourtyDisplay && currentProject == '全国项目'"
    >
    <!-- å…¨å›½ã€å…¨çƒç®¡ç½‘ -->
    <div class="rightContainer" v-if="currentDisplay == '管网'">
      <div class="current1">
        <div class="aside-title">项目数量柱状图</div>
        <!-- <province-dimension-bar ref="barRef"></province-dimension-bar> -->
        <div class="aside-title">站场座数</div>
        <!-- <country-dimension-bar ref="barRef"></country-dimension-bar> -->
        <base-bar-chart :project="currentProject"></base-bar-chart>
      </div>
      <div class="current1">
        <div class="aside-title">项目数量饼状图</div>
        <province-dimension-pie ref="pieRef"></province-dimension-pie>
        <div class="aside-title">阀室座数</div>
        <dv-active-ring-chart
          :config="pieconfig"
          style="width: 377px; height: 85%"
        />
      </div>
      <div class="current1">
        <div class="aside-title">不同输送介质管道条数</div>
        <dv-conical-column-chart
          :config="config"
          style="width: 377px; height: 85%"
        />
      </div>
    </div>
    <!-- å•ä¸ªå·¥ç¨‹ -->
    <div class="rightContainer" v-if="currentDisplay == '工程'">
      <div class="current1">
        <div class="aside-title">数据存储量</div>
        <base-line-chart :project="currentProject"></base-line-chart>
      </div>
      <div class="current1">
        <div class="aside-title">数据下载次数</div>
        <base-pie-chart height="90%" :project="currentProject"></base-pie-chart>
      </div>
      <div class="current1">
        <div class="aside-title">统计不同输送介质管道条数</div>
        <div class="content" style="height: 30px">
          <div class="header">
            <div>格式</div>
            <div>数量</div>
          </div>
        </div>
        <file-format></file-format>
        <!-- <dv-conical-column-chart
          :config="config"
          style="width: 377px; height: 85"
        /> -->
      </div>
    </div>

    <div class="rightarrow">
      <img :src="RightImg" @click="ChangeRight" />
    </div>
@@ -76,7 +102,7 @@
import BaseBarChart from "../chart/BaseBarChart.vue"
import BaseLineChart from "../chart/BaseLineChart.vue"
import BasePieChart from "../chart/BasePieChart .vue"

import VisitCount from "../chart/VisitCount.vue"
import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"

export default {
@@ -94,14 +120,17 @@
    BaseBarChart,
    BaseLineChart,
    BasePieChart,
    VisitCount,
  },
  data() {
    return {
      ChartDisplay: true,
      CourtyDisplay: false,
      PipeDisPlay: false,
      RightImg: require("../../assets/img/Screen/leftArrow.png"),
      leftMessage: "init",
      currentProject: "全球项目",
      currentDisplay: "大屏",
      countryData: [],
      provinceData: [],
      config: {
@@ -127,17 +156,47 @@
            value: 66,
          },
        ],
        unit: "单位",
        showValue: true,
      },
      pieconfig: {
        data: [
          {
            name: "周口",
            value: 55,
          },
          {
            name: "南阳",
            value: 120,
          },
          {
            name: "西峡",
            value: 78,
          },
          {
            name: "驻马店",
            value: 66,
          },
          {
            name: "新乡",
            value: 80,
          },
        ],
        lineWidth: 10,
      },
    }
  },

  mounted() {
    this.OpenLeftInit()
    this.$bus.$on("changeProject", name => {
      if (name.includes("全球管网") || name.includes("全国管网")) {
        this.currentDisplay = "管网"
      } else if (name.includes("全球项目") || name.includes("全国项目")) {
        this.currentDisplay = "项目"
      } else {
        this.currentDisplay = "工程"
      }
      this.currentProject = name
      this.CourtyDisplay = true
      this.ChartDisplay = false
    })
  },
  methods: {
@@ -165,6 +224,7 @@
    },
    //打开大屏左侧界面
    OpenLeftInit() {
      this.currentDisplay = "大屏"
      this.ChartDisplay = true
      this.CourtyDisplay = false
      this.leftMessage = "init"
@@ -182,7 +242,7 @@
  },
}
</script>
<style lang="less" sc>
<style lang="less">
.current {
  height: 100%;
  width: 100%;
@@ -190,6 +250,7 @@
  flex-direction: row;
  align-items: center;
  justify-content: center;

  .rightarrow {
    width: 36px;
    height: 100%;

 src/components/Screen/top.vue

@@ -42,11 +42,11 @@
    }
  },
  mounted() {
    this.$bus.$on('changeProject', name => {
      if (name == '全国项目' || name == '全球项目') {
        // this.OpenProjectree()
      }
    })
    // this.$bus.$on('changeProject', name => {
    //   if (name == '全国项目' || name == '全球项目') {
    //     this.OpenProjectree()
    //   }
    // })
  },
  methods: {
    ReturnLast() {

 src/components/chart/BaseBarChart.vue

@@ -265,7 +265,7 @@
          default:
            break
        }
        this.initData(requsetFn)
        requsetFn && this.initData(requsetFn)
        this.setOptions(this.option)
      },
    },

 src/components/chart/BaseLineChart.vue

@@ -77,11 +77,13 @@
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: "#fff",
              color: "#fff"
            },
            show: false
          },
          nameRotate: 45,
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          axisLabel: {
@@ -154,7 +156,8 @@
          default:
            break
        }
        this.initData(requsetFn)
        requsetFn && this.initData(requsetFn)

        this.setOptions(this.option)
      },
    },

 src/components/chart/BasePieChart .vue

@@ -69,7 +69,7 @@
      let data = []
      let xAxisData = []
      let yAxisData = []
      let  count = 0
      let count = 0
      if (this.dataList) {
        data = this.dataList
        echartData = data.map(item => {
@@ -90,7 +90,7 @@
        yellow: {
          color: "#ffc72b",
          fontSize: 18 * scale,
          padding: [5, 4],
          padding: [4, 4],
          align: "center",
        },
        total: {
@@ -102,7 +102,7 @@
          color: "#fff",
          align: "center",
          fontSize: 14 * scale,
          padding: [5, 0],
          padding: [4, 0],
        },
        blue: {
          color: "#49dff0",
@@ -122,9 +122,8 @@
          left: "1%", // ä¸Žå®¹å™¨å·¦ä¾§çš„距离
          right: "1%", // ä¸Žå®¹å™¨å³ä¾§çš„距离
          top: "1%", // ä¸Žå®¹å™¨é¡¶éƒ¨çš„距离
          bottom: "1%", // ä¸Žå®¹å™¨åº•éƒ¨çš„距离
          bottom: "10%", // ä¸Žå®¹å™¨åº•éƒ¨çš„距离
          containLabel: true,

        },
        title: {
          text: "总数",
@@ -145,7 +144,7 @@
            fontFamily: "YouSheBiaoTiHei",
          },
        },
        

        // legend: {
        //   selectedMode: false,
        //   formatter: function (name) {
@@ -177,9 +176,15 @@
              "#034079",
              "#6f81da",
              "#00ffb4",
              "#3087d6",
              "#f6ce54",
              "#4be1ff",
              "#b6e9ff",
              "#18edc9",
              "#6ac5fa",
            ],
            minAngle: 30, //最小角度
            startAngle: 270, //起始角度
            // minAngle: 15, 
            // startAngle: 270,
            label: {
              normal: {
                formatter: function (params, ticket, callback) {
@@ -194,7 +199,7 @@
                    params.name +
                    "}\n{hr|}\n{yellow|" +
                    params.value +
                    "}\n{blue|" +
                    "} {blue|" +
                    percent +
                    "%}"
                  )
@@ -241,7 +246,7 @@
          default:
            break
        }
        this.initData(requsetFn)
        requsetFn && this.initData(requsetFn)
        this.setOptions(this.option)
      },
    },
@@ -304,6 +309,6 @@
<style lang="scss" scoped>
.piechar {
  width: 100%;
  height: 100%;
  height: 85%;
}
</style>

 src/components/chart/CountryDimensionPie.vue

@@ -287,6 +287,6 @@
<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 100%;
  height: 85%;
}
</style>

 src/components/chart/CountryProvincePie.vue

@@ -289,6 +289,6 @@
<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 100%;
  height: 85%;
}
</style>

 src/components/chart/FileFormat.vue

@@ -1,11 +1,10 @@
<template>
  <div class="file-format" ref="chart"></div>
  <div class="FileFormat" ref="chart"></div>
</template>

<script>
const fileTypeBar = require("@/assets/img/Screen/fileTypeBar.png")
import * as echarts from "echarts"
import { GetTypeVisitsCount } from "@/api/screen.js"
import { countFileFormat } from "@/api/screen.js"
export default {
  data() {
    return {
@@ -59,112 +58,177 @@
          value: 20,
        },
      ]
      const res = await GetTypeVisitsCount()
      let xAxis = []
      let yAxis = []
      const res = await countFileFormat()
      if (res.code == 200) {
        data = res.result.map(item => {
          xAxis.push(item.name)
          yAxis.push(item.count)
          return {
            name: item.type,
            value: item.number,
          }
        })
      }
      data.sort((a, b) => b.value - a.value)
      data = data.slice(0, 4)
      let getArrByKey = (data, k) => {
        let key = k || "value"
        let res = []
        if (data) {
          data.forEach(function (t) {
            res.push(t[key])
          })
        }
        return res
      }
      let getSymbolData = data => {
        let arr = []
        for (var i = 0; i < data.length; i++) {
          arr.push({
            value: data[i].value,
            symbolPosition: "end",
          })
        }
        return arr
      }
      let opt = {
        index: 0,
      }
      let color = ["#A71A2B"]
      data = data.sort((a, b) => {
        return b.value - a.value
      })
      let option = {
        backgroundColor: "transparent",
        grid: {
          // è®©å›¾è¡¨å æ»¡å®¹å™¨
          top: "12%",
          left: "15%",
          right: "10%",
          bottom: "15%",
        },
        tooltip: {
          show: true
          top: "10%",
          bottom: "10%",
          right: "5%",
          left: "10%",
          containLabel: true,
        },
        xAxis: {
          data: xAxis,
          axisLabel: {
            show: true,
            color: "#ffff",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(95, 180, 237, 0.32)",
            },
          },
          show: false,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#ffff",
          },
          // åˆ†å‰²çº¿
          splitLine: {
            lineStyle: {
              color: "#5d7289",
              width: 1,
              type: "dashed",
            },
          },
        },
        series: [
        yAxis: [
          {
            // é¡¶éƒ¨åœ†ç‰‡
            type: "pictorialBar",
            animation: false,
            itemStyle: {
              color: "rgba(115, 240, 252, 1)",
            triggerEvent: true,
            show: true,
            inverse: true,
            data: getArrByKey(data, "name"),
            axisLine: {
              show: false,
            },
            symbolRepeat: false,
            symbolSize: [15, 8],
            symbolMargin: 1,
            z: 10,
            data: data,
            symbolPosition: "end",
            symbolOffset: [0, -4],
          },
          {
            // åº•éƒ¨åœ†ç‰‡
            type: "pictorialBar",
            animation: false,

            itemStyle: {
              color: "rgba(50, 96, 225, 0.8)",
            splitLine: {
              show: false,
            },
            symbolRepeat: false,
            symbolSize: [15, 8],
            symbolMargin: 1,
            z: 10,
            data: data,
            symbolPosition: "start",
            symbolOffset: [0, 3],
          },
          {
            barWidth: 15,
            animation: false,

            type: "bar",
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#ffff",
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              interval: 0,
              color: "#fff",
              align: "left",
              margin: 0,
              fontSize: 13,
              formatter: function (value, index) {
                return "{title|" + value + "}"
              },
              rich: {
                title: {
                  width: 165,
                },
              },
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: "rgba(82, 180, 249, 0.35)" },
                { offset: 0, color: "rgba(82, 180, 249, 1)" },
              ]),
          },
          {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: getArrByKey(data, "name"),
            axisLine: {
              show: false,
            },
            data: yAxis,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              shadowOffsetX: "-20px",
              color: "#fff",
              align: "right",
              verticalAlign: "bottom",
              lineHeight: 20,
              fontSize: 13,
              formatter: function (value, index) {
                return data[index].value
              },
            },
          },
        ],
        series: [
          {
            name: "XXX",
            type: "pictorialBar",
            symbol:
              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==",
            symbolSize: [35, 35],
            symbolOffset: [20, 0],
            z: 5,
            data: getSymbolData(data),
          },
          {
            name: "条",
            type: "bar",
            showBackground: true,
            barBorderRadius: 10,
            yAxisIndex: 0,
            data: data,
            barWidth: 8,
            // align: left,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#5A9DFF",
                    },
                    {
                      offset: 0.7,
                      color: "#1878FF",
                    },
                    {
                      offset: 1,
                      color: "#164182",
                    },
                  ],
                  false
                ),
                barBorderRadius: 5,
              },
              // color: '#A71A2B',
              barBorderRadius: 2,
            },
            label: {
              normal: {
                color: "#fff",
                show: true,
                position: ["0px", "-25px"],
                textStyle: {
                  fontSize: 14,
                },
                formatter: function (a, b) {
                  return a.name
                },
              },
            },
          },
        ],
      }
@@ -181,8 +245,8 @@
</script>

<style lang="less" scoped>
.file-format {
.FileFormat {
  width: 100%;
  height: calc(100% - 30px);
  height: calc(100% - 40px);
}
</style>

 src/components/chart/ServiceGet.vue

@@ -56,10 +56,12 @@
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
            },
            show: false
          },
          nameRotate: 45,
          axisTick: {
            // show: false,
            alignWithLabel: true
          },
          axisLabel: {

 src/components/chart/ServiceType.vue

@@ -140,9 +140,9 @@
          data: dataPie,
          icon: "vertical",
          right: "1%",
          top: "10%",
          top: "2%",
          orient: "vertical",
          itemGap: 7,
          itemGap: 5,
          itemWidth: 12,
          itemHeight: 3,

@@ -165,7 +165,8 @@
          left: "1%", // ä¸Žå®¹å™¨å·¦ä¾§çš„距离
          right: "1%", // ä¸Žå®¹å™¨å³ä¾§çš„距离
          top: "1%", // ä¸Žå®¹å™¨é¡¶éƒ¨çš„距离
          bottom: "1%", // ä¸Žå®¹å™¨åº•éƒ¨çš„距离
          bottom: "5%", // ä¸Žå®¹å™¨åº•éƒ¨çš„距离
          containLabel: true
        },
        series: [
          {

 src/components/chart/VisitCount.vue

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

<script>
import * as echarts from "echarts"
import { GetTypeVisitsCount } from "@/api/screen.js"
export default {
  data() {
    return {
      option: {},
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    async initChart() {
      let data = [
        {
          name: "user1",
          value: 10,
        },
        {
          name: "user2",
          value: 20,
        },
        {
          name: "user3",
          value: 23,
        },
        {
          name: "user4",
          value: 44,
        },
        {
          name: "user1",
          value: 10,
        },
        {
          name: "user2",
          value: 20,
        },
        {
          name: "user3",
          value: 53,
        },
        {
          name: "user4",
          value: 24,
        },
        {
          name: "user1",
          value: 10,
        },
        {
          name: "user2",
          value: 20,
        },
      ]
      const res = await GetTypeVisitsCount()
      let xAxis = []
      let yAxis = []
      if (res.code == 200) {
        data = res.result.map(item => {
          xAxis.push(item.name)
          yAxis.push(item.count)
        })
      }
      let option = {
        grid: {
          // è®©å›¾è¡¨å æ»¡å®¹å™¨
          top: "12%",
          left: "15%",
          right: "10%",
          bottom: "15%",
        },
        tooltip: {
          show: true
        },
        xAxis: {
          data: xAxis,
          axisLabel: {
            show: true,
            color: "#ffff",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(95, 180, 237, 0.32)",
            },
          },
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#ffff",
          },
          // åˆ†å‰²çº¿
          splitLine: {
            lineStyle: {
              color: "#5d7289",
              width: 1,
              type: "dashed",
            },
          },
        },
        series: [
          {
            // é¡¶éƒ¨åœ†ç‰‡
            type: "pictorialBar",
            animation: false,
            itemStyle: {
              color: "rgba(115, 240, 252, 1)",
            },
            symbolRepeat: false,
            symbolSize: [15, 8],
            symbolMargin: 1,
            z: 10,
            data: data,
            symbolPosition: "end",
            symbolOffset: [0, -4],
          },
          {
            // åº•éƒ¨åœ†ç‰‡
            type: "pictorialBar",
            animation: false,

            itemStyle: {
              color: "rgba(50, 96, 225, 0.8)",
            },
            symbolRepeat: false,
            symbolSize: [15, 8],
            symbolMargin: 1,
            z: 10,
            data: data,
            symbolPosition: "start",
            symbolOffset: [0, 3],
          },
          {
            barWidth: 15,
            animation: false,

            type: "bar",
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#ffff",
              },
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: "rgba(82, 180, 249, 0.35)" },
                { offset: 0, color: "rgba(82, 180, 249, 1)" },
              ]),
            },
            data: yAxis,
          },
        ],
      }

      const chart = echarts.init(this.$refs.chart)

      chart.setOption(option)
      window.addEventListener("resize", function () {
        chart.resize()
      })
    },
  },
}
</script>

<style lang="less" scoped>
.visit-count{
  width: 100%;
  height: calc(100% - 30px);
}
</style>

 src/views/Thematic/index.vue

@@ -4,7 +4,7 @@
    <top class="title" ref="title"></top>
    <left
      class="mapleft"
      :style="{ width: leftWidth, left: leftTree && leftWidth == '20%' ? '-14px' : '0' }"
      :style="{ width: leftWidth, left: leftWidth == '22%' ? '-19px' : '0' }"
      ref="mapleft"
    ></left>
    <right
@@ -28,7 +28,7 @@
  components: { mapsdk, top, left, right, bottom },
  data() {
    return {
      leftWidth: "20%",
      leftWidth: "22%",
      rightWidth: "22%",
      leftTree: false,
      currTree: false
@@ -40,17 +40,17 @@
    //修改左侧宽度
    ChangeWidth(parm) {
      if (parm == "left") {
        if (this.leftWidth == "20%") {
        if (this.leftWidth == "22%") {
          this.leftWidth = "8px"
        } else {
          this.leftWidth = "20%"
          this.leftWidth = "22%"
        }
      }

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