tcZz-big/src/views/privateOrder/sentiment/components/TransferVolume.vue

<!--
 * @Author: your name
 * @Date: 2021-12-22 10:12:56
 * @LastEditTime: 2023-10-24 16:06:12
 * @LastEditors: JC9527
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \tcingiocpro\src\views\privateOrder\sentiment\components\TransferVolume.vue
-->
<template>
  <div id="box2"></div>
</template>

<script>
import { getyqZblNum } from "@/api/common";
import { sectorZB } from "@/api/wlSafe";
import { dataZb } from "@/api/netWorkYq";

export default {
  data() {
    return {
      lineName: [],
      lineValue: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      dataZb({ pageSize: 5, pageNum: 1 }).then((res) => {
        // console.log(res);
        res.data.forEach((value) => {
          this.lineName.push(value.depName);
          this.lineValue.push(value.count);
        });
        this.lineBox();
      });
    },

    lineBox() {
      const myChart = this.$echarts.init(document.getElementById("box2"));
      const options = {
        animation: true,
        grid: {
          top: "6.5%",
          bottom: "15%",
          right: "5%",
        },
        title: {
          text: "单位:件",
          textStyle: {
            align: "center",
            color: "rgba(255,255,255,0.5)",
            fontSize: 24,
          },
          top: "-4px",
          left: "11%",
        },
        xAxis: {
          data: this.lineName,
          axisLine: {
            show: false, // 隐藏X轴轴线
          },
          axisTick: {
            show: false, // 隐藏X轴轴线
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(77, 128, 254, 0.2)",
              width: 2,
            },
          },
          axisLabel: {
            show: true,
            interval: 0, // 强制显示文字
            margin: 20,
            fontSize: 18,
            textStyle: {
              color: "#65D5FF", // X轴文字颜色
            },
            formatter: function (params) {
              var newParamsName = ""; // 拼接后的新字符串
              var paramsNameNumber = params.length; // 实际标签数
              var provideNumber = 5; // 每行显示的字数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 如需换回，算出要显示的行数
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var i = 0; i < rowNumber; i++) {
                  var tempStr = ""; // 每次截取的字符串
                  var start = i * provideNumber; // 截取位置开始
                  var end = start + provideNumber; // 截取位置结束
                  // 最后一行的需要单独处理
                  if (i === rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }

              return newParamsName;
            },
          },
        },
        yAxis: [
          {
            type: "value",
            gridIndex: 0,
            min: 0,
            max: (value) => {
              if (value.max < 10) {
                return 10;
              } else {
                return Math.ceil(value.max / 10) * 10;
              }
            },
            splitNumber: 5,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(77, 128, 254, 0.2)",
                width: 2,
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(77, 128, 254, 0.2)",
              },
            },
            axisLabel: {
              show: true,
              margin: 14,
              fontSize: 20,
              textStyle: {
                color: "#65D5FF",
              },
            },
          },
        ],
        series: [
          {
            name: "单数",
            type: "bar",
            barWidth: 16,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(146, 225, 255, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 151, 251, 1)",
                  },
                ]),
              },
            },
            data: this.lineValue,
            z: 10,
            zlevel: 0,
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#ffffff",
              },
            },
          },
          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#0F375F",
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 6,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [18, 2],
            symbolPosition: "start",
            symbolOffset: [1, 1],
            data: this.lineValue,
            width: 2,
            z: 0,
            zlevel: 1,
          },
          {
            type: "bar",
            barGap: "-110%", // 设置外框粗细
            data: [10, 10, 10, 10, 10, 10, 10],
            barWidth: 16,
            itemStyle: {
              normal: {
                color: "transparent", // 填充色
                // barBorderRadius: 0, //圆角半径
                label: {
                  // 标签显示位置
                  show: false,
                  position: "top", // insideTop 或者横向的 insideLeft
                },
              },
            },
            z: 0,
          },
          {
            type: "line",
            smooth: true, // 平滑曲线显示
            showAllSymbol: false, // 显示所有图形。
            symbolSize: 0,
            lineStyle: {
              width: 0,
            },
            areaStyle: {
              color: "rgba(0, 151, 251, 0.5)",
            },
            data: this.lineValue,
          },
        ],
        dataZoom: [
          {
            type: "slider",
            show: false,
            xAxisIndex: 0,
            endValue: 4,
            startValue: 0,
          },
        ],
      };
      myChart.setOption(options);
      if (options && typeof options === "object") {
        // 定时自动滚动
        setInterval(() => {
          if (options.dataZoom[0].endValue == this.lineValue?.length) {
            options.dataZoom[0].endValue = 4;
            options.dataZoom[0].startValue = 0;
          } else {
            options.dataZoom[0].endValue = options.dataZoom[0].endValue + 1;
            options.dataZoom[0].startValue = options.dataZoom[0].startValue + 1;
          }
          myChart.setOption(options);
        }, 2000);
      }
   
    },
  },
};
</script>
<style lang='scss' scoped>
#box2 {
  width: 720px;
  height: 440px;
  margin-top: 20px;
}
</style>