右侧占位图表

TreeWish

2023-02-16 0fa738b60b32608e2b1b2a18178b28e2de460e76

右侧占位图表

 src/components/Screen/right.vue

@@ -1,82 +1,95 @@
<template>
    <div class="current">
        
        <div class="rightContainer"  v-show="ChartDisplay">
            <div class="current1"></div>
            <div class="current1"></div>
            <div class="current1"></div>
        </div>
        <div class="rightarrow">
            <img :src="RightImg"  @click="ChangeRight" />
        </div>

  <div class="current">
    <div class="rightContainer" v-show="ChartDisplay">
      <div class="current1">
        <div class="aside-title">目录分布</div>
        <echart11></echart11>
      </div>
      <div class="current1">
        <div class="aside-title">数据及服务提交</div>
        <echart12></echart12>
      </div>
      <div class="current1">
        <div class="aside-title">各类数据存储分布</div>
        <echart13></echart13>
      </div>
    </div>
    <div class="rightarrow">
      <img :src="RightImg" @click="ChangeRight" />
    </div>
  </div>
</template>
<script>
export default{
    data(){
        return{
            ChartDisplay:true,
            RightImg:require("../../assets/img/Screen/leftArrow.png")
        }
    },
    methods:{
        ChangeRight(){
            if(this.ChartDisplay){
                this.RightImg=require("../../assets/img/Screen/rightArrow.png");
            }else{
                this.RightImg=require("../../assets/img/Screen/leftArrow.png");
            }        
            this.ChartDisplay=!this.ChartDisplay;
            this.$parent.ChangeWidth("right");
        }
import echart11 from "@/components/echart11.vue"
import echart12 from "@/components/echart12.vue"
import echart13 from "@/components/echart13.vue"
export default {
  components: {
    echart11,
    echart12,
    echart13,
  },
  data() {
    return {
      ChartDisplay: true,
      RightImg: require("../../assets/img/Screen/leftArrow.png"),
    }



  },
  methods: {
    ChangeRight() {
      if (this.ChartDisplay) {
        this.RightImg = require("../../assets/img/Screen/rightArrow.png")
      } else {
        this.RightImg = require("../../assets/img/Screen/leftArrow.png")
      }
      this.ChartDisplay = !this.ChartDisplay
      this.$parent.ChangeWidth("right")
    },
  },
}



</script>
<style lang="scss">
.current {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  .rightarrow {
    width: 36px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .rightarrow{
        width:36px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            width: 30px;
            height: 120px;
            cursor: pointer;
        }
    img {
      width: 30px;
      height: 120px;
      cursor: pointer;
    }
    .rightContainer {
        height: 100%;
        width: calc(100% - 36px);
       
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .current1{
            height: 30%;
            width: 100%;
            background:url(../../assets/img/Screen/chartbg.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
  }
  .rightContainer {
    height: 100%;
    width: calc(100% - 36px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    .current1 {
      height: 30%;
      width: 100%;
      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;
      font-size: 16px;
      color: #fff;
    }
  }
}
</style>
</style>

 src/components/echart11.vue

@@ -10,73 +10,73 @@
  components: {},
  data() {
    //这里存放数据
    return { myChart: null };
    return { myChart: null }
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
    this.lineChart()
    this.$bus.$on("resizeEchart", res => {
      this.myChart.resize()
    })
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: '目录分布',
          top: '15',
          text: "目录分布",
          top: "15",
          textStyle: {

            color: '#fff',
            color: "#fff",
          },
          show: false,
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'shadow',
            type: "shadow",
          },
        },
        // legend: {},
        grid: {
          left: '0%',

          right: '4%',
          bottom: '0%',
          top: "5",
          left: "0%",
          right: "4%",
          bottom: "10",
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          type: "value",
          boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: '#ccc',
              color: "#ccc",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: 'category',
          data: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7'],
          type: "category",
          data: ["A1", "A2", "A3", "A4", "A5", "A6", "A7"],
          axisLine: {
            lineStyle: {
              color: '#ccc',
              color: "#ccc",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              color: "#fff",
            },
            formatter: function (params) {
              var newParamsName = ''; // 最终拼接成的字符串
              var paramsNameNumber = params.length; // 实际标签的个数
              var provideNumber = 4; // 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
              var newParamsName = "" // 最终拼接成的字符串
              var paramsNameNumber = params.length // 实际标签的个数
              var provideNumber = 4 // 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
@@ -84,32 +84,32 @@
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''; // 表示每一次截取的字符串
                  var start = p * provideNumber; // 开始截取的位置
                  var end = start + provideNumber; // 结束截取的位置
                  var tempStr = "" // 表示每一次截取的字符串
                  var start = p * provideNumber // 开始截取的位置
                  var end = start + provideNumber // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + '\n';
                    tempStr = params.substring(start, end) + "\n"
                  }
                  newParamsName += tempStr; // 最终拼成的字符串
                  newParamsName += tempStr // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
                newParamsName = params
              }
              //将最终的字符串返回
              return newParamsName;
              return newParamsName
            },
          },
        },
        series: [
          {
            name: '目录分布',
            type: 'bar',
            name: "目录分布",
            type: "bar",
            barWidth: 20,
            data: [120, 150, 110, 50, 70, 20, 70],
            showBackground: true,
@@ -117,17 +117,17 @@
              normal: {
                // 柱形图圆角，初始化效果

                color: (params) => {
                color: params => {
                  var colorList = [
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                  ];
                  var colorItem = colorList[params.dataIndex];
                    ["#188df0", "#83bff6"],
                    ["#188df0", "#83bff6"],
                    ["#188df0", "#83bff6"],
                    ["#188df0", "#83bff6"],
                    ["#188df0", "#83bff6"],
                    ["#188df0", "#83bff6"],
                    ["#188df0", "#83bff6"],
                  ]
                  var colorItem = colorList[params.dataIndex]
                  return new this.$echarts.graphic.LinearGradient(
                    1,
                    0,
@@ -144,22 +144,22 @@
                      },
                    ],
                    false
                  );
                  )
                },
              },
            },
          },
        ],
      };
      this.myChart = this.$echarts.init(document.getElementById('echart6'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
      }
      this.myChart = this.$echarts.init(document.getElementById("echart6"))
      this.myChart.setOption(option)
      window.addEventListener("resize", function () {
        this.myChart.resize()
      })
    },
  },
  created() { },
};
  created() {},
}
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类

 src/components/echart12.vue

@@ -136,22 +136,27 @@
            color: '#fff',
            // fontSize: "22",
          },
          show: false
          // subtextStyle: {
          //   color: "#90979c",
          //   fontSize: "16",
          // },
        },
        //  图表的位置
        // grid: {
        //   top:"4%"
        // },
        grid: {
          top: '10',
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true,
        },

        color: colorArr,
        legend: {
          orient: 'vertical',
          icon: 'circle', //图例形状
          data: legendData,
          top: 10,
          top: 0,
          right: 0,
          itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
          itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
@@ -172,7 +177,7 @@
          radius: 80,
          nameGap: 2, // 图中工艺等字距离图的距离
          splitNumber: 4, // 网格线的个数
          center: ["50%", "65%"], // 图的位置
          center: ["50%", "45%"], // 图的位置

          indicator: indicator,
          splitArea: {

 src/components/echart13.vue

@@ -47,6 +47,7 @@
          textStyle: {
            color: '#fff',
          },
          show: false
        },
        tooltip: {
          trigger: 'axis',
@@ -55,6 +56,7 @@
          },
        },
        grid: {
          top: '10',
          left: '0%',
          right: '0%',
          bottom: '0%',