修改大屏首页

TreeWish

2023-02-27 27c5590aab433687c58dbf41e9271f71008834f0

修改大屏首页

 src/api/screen.js

@@ -42,4 +42,14 @@
// å›½å®¶ç»´åº¦-数量统计
export function countCountryDimension(params) {
  return request.get("/oneMap/countCountryDimension", { params: params })
}
}

//服务访问次数
export  function  GetServicesVisitsCount(){
  return  request.get("/oneMap/countDataServiceType")
}

//按照类别访问统计访问次数
export  function  GetTypeVisitsCount(){
  return  request.get("/oneMap/countLargeCategories")
}

 src/components/Screen/bottom.vue

@@ -70,21 +70,21 @@
    return {
      YXState: true,
      yxImg: require("../../assets/img/Screen/yximg.png"),
      currMenu: "项目展示",
      currMenu: "专题展示",
      currProject: "",
      searchName: "",
      menuList: [
        {
          menuName: "项目展示",
          menuName: "专题展示",
          children: [
            // {
            //   name: "全国管网图",
            //   id: "qggwt",
            // },
            // {
            //   name: "全球管网图",
            //   id: "qqgwt",
            // },
            {
              name: "全国管网图",
              id: "qggwt",
            },
            {
              name: "全球管网图",
              id: "qqgwt",
            },
            {
              name: "全国项目",
              id: "qgxm",
@@ -96,7 +96,7 @@
          ],
        },
        {
          menuName: "工程展示",
          menuName: "项目展示",
          children: [
            {
              name: "中俄东线管道工程",
@@ -199,16 +199,18 @@
        case "工程巡视":
          this.showPathLine(child)
          break
        case "工程展示":
        case "项目展示":
          this.DisplayCurrentProject(child)
          break
        case "项目展示":
        case "专题展示":
          this.changeProject(child)
          break
        default:
          break
      }
    },

    //工程巡视
    async showPathLine(params) {
      const line = wktToGeoJSON(params.wkt)
      const position = line.coordinates[0]
@@ -280,7 +282,7 @@
    async getCountProjectDisplay() {
      const res = await countProjectLocation()
      if (res.code === 200) {
        const menu = this.menuList.find(item => item.menuName == "工程展示")
        const menu = this.menuList.find(item => item.menuName == "项目展示")
        menu.children = res.result.map(item => {
          return {
            name: item.projname,
@@ -305,6 +307,7 @@
      
      }
    },
    //专题展示
    changeProject(params) {
      this.$bus.$emit('changeProject', params.name)
    }

 src/components/Screen/left.vue

@@ -4,23 +4,52 @@
      <img :src="leftImg" @click="ChangeLeft" />
    </div>
    <div class="leftContainer" v-if="ChartDisplay">
      <div class="current1" style="height: 27%;" id="leftCurrent1">
      <div class="current1"  id="leftCurrent1">
        <div class="aside-title">数据申请次数</div>
        <count-data-apply ></count-data-apply>
      </div>
      <div class="current1" style="height: 27%;"  id="leftCurrent2">
        <div class="aside-title">服务类别</div>

      <div class="current1"   id="leftCurrent2">
        <div class="aside-title">用户访问量</div>
        <service-type></service-type>
      </div>
      <div class="current1" style="height: 36%;" id="leftCurrent3">
        <div class="aside-title">存储信息</div>
      <div class="current1"  id="leftCurrent3">
        <div class="aside-title">项目存储信息</div>
        <data-storage></data-storage>
      </div>
    </div>
    <div class="leftContainer" v-if="ProjectreeDisplay">
      <project-tree></project-tree>
    <!-- å…¨çƒç»Ÿè®¡æ¬¡æ•° -->
    <div class="leftContainer" v-if="GlobleChartDisplay">
      <div class="current1"  id="leftCurrent1">
        <div class="aside-title">数据申请次数</div>
        <count-data-apply ></count-data-apply>
      </div>
      <div class="current1"   id="leftCurrent2">
        <div class="aside-title">用户访问量</div>
        <service-type></service-type>
      </div>
      <div class="current1"  id="leftCurrent3">
        <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>
      <div class="current1"   id="leftCurrent2">
        <div class="aside-title">用户访问量</div>
        <service-type></service-type>
      </div>
      <div class="current1"  id="leftCurrent3">
        <div class="aside-title">项目存储信息</div>
        <data-storage></data-storage>
      </div>
    </div>
    <!-- <div class="leftContainer" v-if="ProjectreeDisplay">
      <project-tree></project-tree>
    </div> -->
  </div>
</template>
<script>
@@ -40,6 +69,8 @@
      leftMessage: "init",
      ChartDisplay: true,
      ProjectreeDisplay: false,
      GlobleChartDisplay:false,
      CountryChartDisplay:false,
      leftImg: require("../../assets/img/Screen/rightArrow.png"),
    }
  },
@@ -76,6 +107,11 @@
      this.leftMessage = "init"
      // this.OpenLeftInitChart();
      this.$parent.ChangeWidth("leftView")

      this.$bus.$on("changeProject", name => {
        
      })

    },
    //打开工程树
    OpenLeftProjectTree() {
@@ -543,14 +579,13 @@
  .leftContainer {
    height: 100%;
    width: calc(100% - 7px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    .current1 {
      height: 30%;
      height: 32%;
      width: 100%;
      background: url(../../assets/img/Screen/chartbg.png);
      background-size: 100% 100%;
@@ -562,7 +597,6 @@
      background: url(../../assets/img/Screen/contentBg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      
    }
  }
}

 src/components/Screen/right.vue

@@ -2,21 +2,27 @@
  <div class="current">
    <div class="rightContainer" v-if="ChartDisplay">
      <div class="current1">
        <div class="aside-title">工程种类</div>
        <div class="aside-title">项目统计</div>
        <project-category></project-category>
      </div>
      <div class="" style="width: 100%;height: 60%">
        <div class="aside-title">文件格式</div>
        <div class="content" style="height: calc(100% - 30px)">
      <div class="current1">
        <div class="aside-title">数据统计</div>
        <!-- <div class="content" style="height:30px">
          <div class="header">
            <div>格式</div>
            <div>数量</div>
          </div>
          <file-format></file-format>
        </div>
        </div> -->
        <file-format></file-format>
      </div>
      <div class="current1">
        <div class="aside-title">服务访问次数</div>

        <Service-Get></Service-Get>
      </div>
    </div>
    <div

    <!-- <div
      class="rightContainer2"
      v-if="CourtyDisplay && currentProject =='全球项目'"
    >
@@ -29,6 +35,8 @@
        <country-dimension-pie ref="pieRef"></country-dimension-pie>
      </div>
    </div>


    <div class="rightContainer2" v-if="CourtyDisplay && currentProject =='全国项目'">
      <div class="current1">
        <div class="aside-title">项目数量柱状图</div>
@@ -38,7 +46,7 @@
        <div class="aside-title">项目数量饼状图</div>
        <province-dimension-pie ref="pieRef"></province-dimension-pie>
      </div>
    </div>
    </div> -->
    <div class="rightarrow">
      <img :src="RightImg" @click="ChangeRight" />
    </div>
@@ -54,6 +62,7 @@
import CountryDimensionPie from "../chart/CountryDimensionPie.vue"
import ProvinceDimensionBar from "../chart/CountryProvinceBar.vue"
import ProvinceDimensionPie from "../chart/CountryProvincePie.vue"
import ServiceGet from "../chart/ServiceGet.vue"
import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"

export default {
@@ -66,7 +75,8 @@
    CountryDimensionBar,
    CountryDimensionPie,
    ProvinceDimensionBar,
    ProvinceDimensionPie
    ProvinceDimensionPie,
    ServiceGet,
  },
  data() {
    return {
@@ -96,14 +106,14 @@
        this.ChartDisplay = !this.ChartDisplay
      }

      if (this.leftMessage == "projectree") {
        if (this.CourtyDisplay) {
          this.RightImg = require("../../assets/img/Screen/leftArrow.png")
        } else {
          this.RightImg = require("../../assets/img/Screen/rightArrow.png")
        }
        this.CourtyDisplay = !this.CourtyDisplay
      }
      // if (this.leftMessage == "projectree") {
      //   if (this.CourtyDisplay) {
      //     this.RightImg = require("../../assets/img/Screen/leftArrow.png")
      //   } else {
      //     this.RightImg = require("../../assets/img/Screen/rightArrow.png")
      //   }
      //   this.CourtyDisplay = !this.CourtyDisplay
      // }

      // this.ChartDisplay = !this.ChartDisplay
      this.$parent.ChangeWidth("right")
@@ -118,16 +128,16 @@
    },

    //打开工程树
    OpenLeftProjectTree() {
      this.ChartDisplay = false
      this.CourtyDisplay = true
      this.leftMessage = "projectree"
      this.$parent.ChangeWidth("leftTree")
    },
    // OpenLeftProjectTree() {
    //   this.ChartDisplay = false
    //   this.CourtyDisplay = true
    //   this.leftMessage = "projectree"
    //   this.$parent.ChangeWidth("leftTree")
    // },
  },
}
</script>
<style lang="less">
<style lang="less" sc>
.current {
  height: 100%;
  width: 100%;
@@ -150,7 +160,6 @@
  .rightContainer {
    height: 100%;
    width: calc(100% - 45px);

    display: flex;
    flex-direction: column;
    align-items: center;
@@ -163,37 +172,37 @@
      background-repeat: no-repeat;
    }
  }
  .rightContainer2 {
    height: 100%;
    width: calc(100% - 45px);
  // .rightContainer2 {
  //   height: 100%;
  //   width: calc(100% - 45px);

    display: flex;
    flex-direction: column;
    align-items: center;
    .current1 {
      margin-top: 10px;
      margin-bottom: 30px;
      height: 32%;
      width: 100%;
      background: url(../../assets/img/Screen/chartbg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
  //   display: flex;
  //   flex-direction: column;
  //   align-items: center;
  //   .current1 {
  //     margin-top: 10px;
  //     margin-bottom: 30px;
  //     height: 30%;
  //     width: 100%;
  //     background: url(../../assets/img/Screen/chartbg.png);
  //     background-size: 100% 100%;
  //     background-repeat: no-repeat;
  //   }
  // }
  .content {
    width: 100%;
    background: url(../../assets/img/Screen/contentBg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .header {
      margin: 0px auto;
      padding: 10px 0;
      width: 80%;
      display: flex;
      justify-content: space-between;
      color: #fff;
      font-size: 13px;
    }
  }
}
.content {
  width: 100%;
  background: url(../../assets/img/Screen/contentBg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .header {
    margin: 0px auto;
    padding: 10px 0;
    width: 80%;
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 13px;
  }
}
</style>

 src/components/Screen/top.vue

@@ -1,7 +1,7 @@
<template>
  <div class="top">
    <div class="topleft">
      <div
      <!-- <div
        class="topleft1"
        :class="currView == 'chart' ? 'active' : ''"
        @click="OpenInitChart"
@@ -16,7 +16,7 @@
      >
        <img src="../../assets/img/Screen/ptree.png" />
        <span>工程项目</span>
      </div>
      </div> -->
    </div>
    <div class="topCenter">
      <div>管网一张图</div>
@@ -44,7 +44,7 @@
  mounted() {
    this.$bus.$on('changeProject', name => {
      if (name == '全国项目' || name == '全球项目') {
        this.OpenProjectree()
        // this.OpenProjectree()
      }
    })
  },
@@ -68,7 +68,6 @@
      this.currView = "tree"
      this.$parent.$refs.mapleft.OpenLeftProjectTree()
      this.$parent.$refs.mapright.OpenLeftProjectTree()

    },
  },
}

 src/components/chart/BaseBarChart.vue

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

<script>
import * as echarts from "echarts"
import { countCountryDimension } from "@/api/screen.js"
export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    // option: {
    //   type: Object,
    //   required: true
    // },
    type: {
      type: String,
      default: 'canvas'
    }
  },
  data() {
    return {
      chart: null,
      dataList: []
    }
  },
  computed: {
    option() {
      let data = [
        {
          country: "苏丹",
          count: 1,
        },
        {
          country: "印度尼西亚",
          count: 1,
        },
        {
          country: "阿联酋",
          count: 1,
        },
        {
          country: "乌兹别克斯坦",
          count: 1,
        },
        {
          country: "哈萨克斯坦",
          count: 2,
        },
        {
          country: "委内瑞拉",
          count: 1,
        },
        {
          country: "斯里兰卡",
          count: 1,
        },
        {
          country: "中国",
          count: 17,
        },
        {
          country: "其他",
          count: 1,
        },
        {
          country: "土库曼斯坦",
          count: 1,
        },
        {
          country: "新加坡",
          count: 1,
        },
      ]

      let xAxisData = []
      let yAxisData = []
      if (this.dataList) {
        data = this.dataList
      }
      data.forEach(item => {
        xAxisData.push(item.country)
        yAxisData.push(item.count)
      })
      let option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "12%",
          right: "0%",
          left: "0%",
          bottom: "13%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
            interval: 0,
            axisLabel: {
              margin: 10,
              color: "#e2e9ff",
              textStyle: {
                fontSize: 11,
              },
              formatter: function (value) {
                //
                var ret = "" //拼接加\n返回的类目项
                var maxLength = 2 //每项显示文字个数
                var valLength = value.length //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
                if (rowN > 1) {
                  //如果类目项的文字大于3,
                  for (var i = 0; i < rowN; i++) {
                    var temp = "" //每次截取的字符串
                    var start = i * maxLength //开始截取的位置
                    var end = start + maxLength //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + "\n"
                    ret += temp //凭借最终的字符串
                  }
                  return ret
                } else {
                  return value
                }
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value}",
              color: "#e2e9ff",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: yAxisData,
            barWidth: "12px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,244,255,1)", // 0% å¤„的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,77,167,1)", // 100% å¤„的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [20, 20, 0, 0],
                shadowColor: "rgba(0,160,221,1)",
                shadowBlur: 4,
              },
            },
            label: {
              normal: {
                show: true,
                lineHeight: 14,
                width: 40,
                height: 14,
                backgroundColor: "rgba(0,160,221,0.1)",
                borderRadius: 200,
                position: ["-8", "-20"],
                distance: 1,
                formatter: value => {
                  // console.log(value);
                  if (value.name == "中国") {
                    return [
                      `    {d|●}", " {a|${value.value}}     \n", "    {b|}`,
                    ].join(",")
                  }
                },
                // formatter: ["    {d|●}", " {a|{c}}     \n", "    {b|}"].join(
                //   ","
                // ),
                rich: {
                  d: {
                    color: "#3CDDCF",
                  },
                  a: {
                    color: "#fff",
                    align: "center",
                  },
                  b: {
                    width: 1,
                    height: 15,
                    borderWidth: 1,
                    borderColor: "#234e6c",
                    align: "left",
                  },
                },
              },
            },
          },
        ],
      }
      return option
    }
  },
  watch: {
    // option: {
    //   deep: true,
    //   handler(newVal) {
    //     this.setOptions(newVal)
    //   }
    // },
    currentProject: {
      deep: true,
      handler(newVal) {
        this.initData()
        this.setOptions(this.option)
      }
    }
  },
  mounted() {
    this.initChart()
    if (this.autoResize) {
      window.addEventListener('resize', this.resizeHandler)
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.resizeHandler)
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    resizeHandler() {
      this.chart.resize()
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart, '', {
        renderer: this.type
      })
      this.chart.setOption(this.option)
      this.chart.on('click', this.handleClick)
    },
    handleClick(params) {
      this.$emit('click', params)
    },
    setOptions(option) {
      this.clearChart()
      this.resizeHandler()
      if (this.chart) {
        this.chart.setOption(option)
      }
    },
    refresh() {
      this.setOptions(this.option)
    },
    clearChart() {
      this.chart && this.chart.clear()
    }
  },
  methods: {
    async initData() {


    },
  },
}
</script>

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

 src/components/chart/FileFormat.vue

@@ -5,7 +5,7 @@
<script>
const fileTypeBar = require("@/assets/img/Screen/fileTypeBar.png")
import * as echarts from "echarts"
import { countFileFormat } from "@/api/screen.js"
import { GetTypeVisitsCount } from "@/api/screen.js"
export default {
  data() {
    return {
@@ -16,7 +16,12 @@
    this.initChart()
  },
  methods: {
    


    async initChart() {

      
      let data = [
        {
          name: "user1",
@@ -59,182 +64,114 @@
          value: 20,
        },
      ]
      const res = await countFileFormat()
      const res = await GetTypeVisitsCount()
      let xAxis = []
      let yAxis = []
      if (res.code == 200) {
        data = res.result.map(item => {
          return {
            name: item.type,
            value: item.number,
          }
          xAxis.push(item.name);
          yAxis.push(item.count);
        })
      }
      data.sort((a, b) => b.value - a.value)
      data = data.slice(0, 10)
      // console.log(res.result);
      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: "2%",
          bottom: "2%",
          right: "5%",
          left: "10%",
          containLabel: true,
      grid: {
        // è®©å›¾è¡¨å æ»¡å®¹å™¨
        top: "12%",
        left: "15%",
        right: "10%",
        bottom: "15%",
      },
     
      xAxis: {
        data: xAxis,
        axisLabel: {
          show: true,
          color: "#ffff",
        },
        xAxis: {
        axisTick: {
          show: false,
        },
        yAxis: [
          {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: getArrByKey(data, "name"),
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            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,
                },
              },
            },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(95, 180, 237, 0.32)",
          },
          {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: getArrByKey(data, "name"),
            axisLine: {
              show: false,
            },
            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
              },
            },
        },
      },
      yAxis: {      
        axisLine: {
          show: false,
         
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#ffff",
        },
        // åˆ†å‰²çº¿
        splitLine: {
            lineStyle: {
              color: "#5d7289",
              width: 1,
              type: "dashed"
            }
          },
        ],
        series: [
          {
            name: "XXX",
            type: "pictorialBar",
      },
      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,

            symbol:
              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAxCAYAAABznEEcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlFNDgzRTBDQjNFNzExRURCRDc5RTVGRkQxNDc0MjUxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlFNDgzRTBEQjNFNzExRURCRDc5RTVGRkQxNDc0MjUxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUU0ODNFMEFCM0U3MTFFREJENzlFNUZGRDE0NzQyNTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUU0ODNFMEJCM0U3MTFFREJENzlFNUZGRDE0NzQyNTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5DGVZNAAAOOElEQVR42qxa+Y8c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",
            symbolSize: [25, 25],
            symbolOffset: [20, 0],
            z: 5,
            data: getSymbolData(data),
          itemStyle: {
            color: "rgba(50, 96, 225, 0.8)",
          },
          {
            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
                },
              },
          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)

@@ -250,6 +187,6 @@
<style lang="less" scoped>
.file-format {
  width: 100%;
  height: 100%;
  height:calc(100% - 30px);
}
</style>

 src/components/chart/ProjectCategory.vue

@@ -1,19 +1,16 @@
<template>
  <div class="project-category">
    <div class="content">

        <div
          :class="i % 2 ? 'rank2' : 'rank1'"
          v-for="(item, i) in datalist.slice(0, 8)"
          :key="item.projtype"
        >
          <div class="num">{{ item.count }}个</div>
          <div class="name">{{ item.projtype }}</div>
          <div class="bar">
            <img src="~@/assets/img/Screen/leftBar.png" alt="" />
          </div>
        </div>

      <div
        :class="'rank' + i"
        class="rank"
        v-for="(item, i) in datalist.slice(0, 8)"
        :key="item.projtype"
      >
        <div class="num">{{ item.count }}个</div>
        <div class="name">{{ item.projtype }}</div>
        <div class="bar"></div>
      </div>

      <!-- <div class="rank rank2">
        <div class="num">2个</div>
@@ -80,57 +77,98 @@
.project-category {
  position: relative;
  width: 100%;
  height: 100%;
  height: calc(100% - 30px);
  background: url("~@/assets/img/Screen/projectBg.png") center center;
  background-size: 330px 227px;
  .content {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    height: 90%;
    justify-content: space-between;
    .rank1, .rank2 {
      // box-sizing: border-box;
      // display: flex;
      // flex-direction: column;
      // width: 160px;
      // flex: 1;
      height: 25px;
      // align-items: end;
  background-size: 100% 100%;

  .content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    // height: 85%;
    height: 100%;

    .rank {
      width: 35%;
      display: flex;
      flex-direction: column;
      div {
        margin: 2px 0px;
      }
      .num {
        color: #839ecb;
      }
      .name {
        // margin: 6px;
        color: #fff;
      }

      .bar {
        width: 61px;
        height: 3px;
        // background: url("~@/assets/img/Screen/leftBar.png");
        // background-size: 100% 100%;
        img {
          width: 100%;
          height: 100%;
        }
        background-image: url(../../assets/img/Screen/leftBar.png);
        background-size: 100% 100%;
      }
    }
    .rank1 {

    .rank0,
    .rank6 {
      width: 35%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      text-align: right;
    }
    .rank2 {

    .rank1,
    .rank7 {
      width: 35%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }

    .rank2,
    .rank4 {
      width: 35%;
      display: flex;
      flex-direction: column;
      justify-items: flex-end;

      div {
        width: 80%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
      }
      .bar {
        margin-left: calc(80% - 61px);
      }
    }

    .rank3,
    .rank5 {
      width: 35%;
      display: flex;
      flex-direction: column;
      justify-items: flex-end;

      div {
        margin-left: 20%;
        width: 80%;
        align-items: flex-end;
        text-align: left;

        .bar {
          display: flex;
          align-items: center;
          justify-items: flex-end;
        }
      }
    }
  }
}
</style>

 src/components/chart/ServiceGet.vue

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

<script>
import * as echarts from "echarts"
import { GetServicesVisitsCount } from "@/api/screen.js"
export default {
  data() {
    return {
      option: {},
    }
  },
  mounted() {
    // const option = this.initData()
    this.initChart()
  },
  methods: {
    async initChart() {
      const res = await GetServicesVisitsCount()

      console.log(res.result);

      if (res.code == 200) {
      }
      let xAxis = []
      let yAxis = []

      res.result.forEach(item => {
        xAxis.push(item.type)
        yAxis.push(item.count)
      })

      // let data = [220, 182, 191, 234, 290, 330, 310]
      // const sideData = data.map(item => {
      //   return {
      //     name: item.name,
      //     value: item.number,
      //   }
      // })

      let option = {
        tooltip: {
          trigger: "axis"
        },
        grid: {
          right: "10%",
          top: 30,
          left: '15%',
          bottom:'15%'
        },

        xAxis: {
          type: "category",
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          },
          nameRotate: 45,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            fontFamily: "PingFangSC-Regular",
          },
          data:xAxis
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "#fff"
            }
          },
          axisLabel: {
            fontFamily: "Roboto-Regular",
          },
          axisTick: {
            show: false
          },
          // åˆ†å‰²çº¿
          splitLine: {
            lineStyle: {
              color: "#5d7289",
              width: 1,
              type: "dashed"
            }
          },
          type: "value"
        },
        series: [
          {
            name: "服务访问次数",
            type: "line",
            showAllSymbol: false,
            lineStyle: {
              color: "#2579D8"
            },
            itemStyle: {
              color: "#2579D8"
            },
            smooth: 0.2,
            data: yAxis
          }

        ]
      };
      const chart = echarts.init(this.$refs.chart)

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

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

 src/views/Thematic/index.vue

@@ -47,16 +47,16 @@
        }
      }

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

      if (parm == "right") {
        if (this.rightWidth == "22%") {