添加基础配置表

TreeWish

2023-02-27 f98dba354a2d8f7b8d77984f2667432ff0b33363

添加基础配置表

 src/components/Screen/left.vue

@@ -20,13 +20,16 @@
    <!-- å…¨çƒç»Ÿè®¡æ¬¡æ•° -->
    <div class="leftContainer" v-if="GlobleChartDisplay">
      <div class="current1" id="leftCurrent1">
        <div class="aside-title">数据申请次数</div>
        <base-bar-chart :project="currProject"></base-bar-chart>
        <div class="aside-title">项自类型</div>
        <base-line-chart :project="currProject"></base-line-chart>

        <!-- <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>
        <service-type></service-type>
        <base-pie-chart :project="currProject"></base-pie-chart>
        <!-- <service-type></service-type> -->
      </div>
      <div class="current1" id="leftCurrent3">
        <div class="aside-title">项目存储信息</div>
@@ -59,6 +62,8 @@
import ServiceType from "../chart/ServiceType.vue"
import DataStorage from "../chart/DataStorage.vue"
import BaseBarChart from "../chart/BaseBarChart.vue"
import BaseLineChart from "../chart/BaseLineChart.vue"
import BasePieChart from "../chart/BasePieChart .vue"
export default {
  components: {
    ProjectTree,
@@ -66,6 +71,8 @@
    ServiceType,
    DataStorage,
    BaseBarChart,
    BaseLineChart,
    BasePieChart
  },
  data() {
    return {

 src/components/chart/BaseLineChart.vue

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

<script>
import * as echarts from "echarts"
import {
  countCountryDimension,
  countProvinceDimension,
  GetServicesVisitsCount,
} 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",
    },
    project: {
      type: String,
      default: "全国项目",
    },
  },
  data() {
    return {
      chart: null,
      dataList: [],
    }
  },
  computed: {
    option() {
      let xAxis = []
      let yAxis = []

      this.dataList.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: "5%",
          top: '10%',
          left: "5%",
          bottom: "17%",
          containLabel: true
        },

        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,
          },
        ],
      }

      return option
    },
  },
  watch: {
    option: {
      deep: true,
      handler(newVal) {
        this.setOptions(newVal)
      },
    },
    project: {
      deep: true,
      handler(newVal) {
        let requsetFn = null
        switch (newVal) {
          case "全球项目":
            requsetFn = countCountryDimension
            break
          case "全国项目":
            requsetFn = countProvinceDimension
            break

          default:
            break
        }
        this.initData(requsetFn)
        this.setOptions(this.option)
      },
    },
  },
  mounted() {
    this.initData()
    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()
    },
    async initData(requsetFn = GetServicesVisitsCount) {
      const res = await requsetFn()
      if (res.code == 200) {
        this.dataList = res.result
        console.log("requsetFn", res)
      }
    },
  },
}
</script>

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

 src/components/chart/BasePieChart .vue

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

<script>
import * as echarts from "echarts"
import { countCountryDimension, countProvinceDimension } 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",
    },
    project: {
      type: String,
      default: "全国项目",
    },
  },
  data() {
    return {
      chart: null,
      dataList: [],
    }
  },
  computed: {
    option() {
      let echartData = [
        {
          value: 2154,
          name: "曲阜师范大学",
        },
        {
          value: 3854,
          name: "潍坊学院",
        },
        {
          value: 3515,
          name: "青岛职业技术学院",
        },
        {
          value: 3515,
          name: "淄博师范高等专科",
        },
        {
          value: 3854,
          name: "鲁东大学",
        },
        {
          value: 2154,
          name: "山东师范大学",
        },
      ]
      let data = []
      let xAxisData = []
      let yAxisData = []
      let  count = 0
      if (this.dataList) {
        data = this.dataList
        echartData = data.map(item => {
          let name = item.province || item.country
          // xAxisData.push(name)
          // yAxisData.push(item.count)
          count += item.count
          return {
            name: name,
            value: item.count,
          }
        })
      }

      var scale = 1

      var rich = {
        yellow: {
          color: "#ffc72b",
          fontSize: 18 * scale,
          padding: [5, 4],
          align: "center",
        },
        total: {
          color: "#ffc72b",
          fontSize: 40 * scale,
          align: "center",
        },
        white: {
          color: "#fff",
          align: "center",
          fontSize: 14 * scale,
          padding: [5, 0],
        },
        blue: {
          color: "#49dff0",
          fontSize: 16 * scale,
          align: "center",
        },
        hr: {
          borderColor: "#0b5263",
          width: "100%",
          borderWidth: 1,
          height: 0,
        },
      }
      let option = {
        backgroundColor: "transparent",
        grid: {
          left: "1%", // ä¸Žå®¹å™¨å·¦ä¾§çš„距离
          right: "1%", // ä¸Žå®¹å™¨å³ä¾§çš„距离
          top: "1%", // ä¸Žå®¹å™¨é¡¶éƒ¨çš„距离
          bottom: "1%", // ä¸Žå®¹å™¨åº•éƒ¨çš„距离
          containLabel: true,

        },
        title: {
          text: "总数",
          left: "center",
          top: "45%",
          padding: [0, 0],
          textStyle: {
            color: "#fff",
            fontSize: 18 * scale,
            align: "center",
          },
          subtext: count,
          subtextStyle: {
            align: "center",
            fontSize: 20,
            color: "#ffc72b",
            fontWeight: 400,
            fontFamily: "YouSheBiaoTiHei",
          },
        },
        
        // legend: {
        //   selectedMode: false,
        //   formatter: function (name) {
        //     var total = 0
        //     return "{total|" + total + "}"
        //   },
        //   data: [],
        //   // itemGap: 50,
        //   left: "center",
        //   top: "center",
        //   icon: "none",
        //   align: "center",
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: 16 * scale,
        //     rich: rich,
        //   },
        // },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["42%", "50%"],
            hoverAnimation: false,
            color: [
              "#c487ee",
              "#deb140",
              "#49dff0",
              "#034079",
              "#6f81da",
              "#00ffb4",
            ],
            minAngle: 30, //最小角度
            startAngle: 270, //起始角度
            label: {
              normal: {
                formatter: function (params, ticket, callback) {
                  var total = 0 //考生总数量
                  var percent = 0 //考生占比
                  echartData.forEach(function (value, index, array) {
                    total += value.value
                  })
                  percent = ((params.value / total) * 100).toFixed(1)
                  return (
                    "{white|" +
                    params.name +
                    "}\n{hr|}\n{yellow|" +
                    params.value +
                    "}\n{blue|" +
                    percent +
                    "%}"
                  )
                },
                rich: rich,
              },
            },
            labelLine: {
              normal: {
                length: 55 * scale,
                length2: 0,
                lineStyle: {
                  color: "#0b5263",
                },
              },
            },
            data: echartData,
          },
        ],
      }

      return option
    },
  },
  watch: {
    option: {
      deep: true,
      handler(newVal) {
        this.setOptions(newVal)
      },
    },
    project: {
      deep: true,
      handler(newVal) {
        let requsetFn = null
        switch (newVal) {
          case "全球项目":
            requsetFn = countCountryDimension
            break
          case "全国项目":
            requsetFn = countProvinceDimension
            break

          default:
            break
        }
        this.initData(requsetFn)
        this.setOptions(this.option)
      },
    },
  },
  mounted() {
    this.initData()
    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()
    },
    async initData(requsetFn = countCountryDimension) {
      const res = await requsetFn()
      if (res.code == 200) {
        this.dataList = res.result
        console.log("requsetFn", res)
      }
    },
  },
}
</script>

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

 src/components/chart/FileFormat.vue

@@ -16,12 +16,7 @@
    this.initChart()
  },
  methods: {
    


    async initChart() {

      
      let data = [
        {
          name: "user1",
@@ -69,109 +64,110 @@
      let yAxis = []
      if (res.code == 200) {
        data = res.result.map(item => {
          xAxis.push(item.name);
          yAxis.push(item.count);
          xAxis.push(item.name)
          yAxis.push(item.count)
        })
      }
      let option = {
      grid: {
        // è®©å›¾è¡¨å æ»¡å®¹å™¨
        top: "12%",
        left: "15%",
        right: "10%",
        bottom: "15%",
      },
     
      xAxis: {
        data: xAxis,
        axisLabel: {
          show: true,
          color: "#ffff",
        grid: {
          // è®©å›¾è¡¨å æ»¡å®¹å™¨
          top: "12%",
          left: "15%",
          right: "10%",
          bottom: "15%",
        },
        axisTick: {
          show: false,
        tooltip: {
          show: true
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(95, 180, 237, 0.32)",
        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: {
        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",
              type: "dashed",
            },
          },
          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,
        },
      ],
};
        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)

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