large_screen/src/views/mining/supporting/suppEchart.vue

<template>
  <div
    ref="testLine"
    style="width: 1650px; height: 240px; margin: -60px 0 0 0"
  ></div>
</template>

<script>
/**
 * 顶板压力图
 * @module suppEchart
 */
import { mapState } from "vuex";

export default {
  data() {
    return {
      zhijiaId: [],
      barData: [],
      currentChartId: 1,
      xData: new Array(30).fill("-"),
      yData: new Array(30).fill("-"),
      count: 0,
      myChart: null,
      option: {
        // backgroundColor: "#0f375f",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
              backgroundColor: "#333",
            },
          },
        },
        title: {
          text: "顶板压力",
          padding: [5, 70],
          textStyle: {
            fontWeight: "normal", //标题颜色
            color: "#4ADEFE",
            fontSize: 18,
          },
        },
        xAxis: {
          data: [],
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        yAxis: {
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 3,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#14c8d4" },
                  { offset: 1, color: "#43eec6" },
                ]),
              },
            },
            data: [],
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["websocketIP"]),
  },
  methods: {
    /**
     * 获取各个支架顶板压力值
     * @function getData
     */
    getData() {
      var count = 0;

      this.barData.shift(this.barData[0]);
      this.barData.push(parseInt(Math.random() * (40 - 25 + 1) + 25, 10));

      console.log(this.barData);
      this.myChart.setOption({
        xAxis: [
          {
            data: this.zhijiaId,
          },
        ],
        series: [
          {
            data: this.barData,
          },
        ],
      });
    },
  },
  created() {
    // this.getData();
    var index = 190;
    for (var i = 0; i < 190; i++) {
      this.zhijiaId.push(index--);
      var data = parseInt(Math.random() * (40 - 25 + 1) + 25, 10);
      this.barData.push(data);
    }
    console.log(this.zhijiaId);
  },
  mounted() {
    // 先画图
    this.myChart = this.$echarts.init(this.$refs.testLine);
    // 获取数据
    this.myChart.setOption(this.option);
    this.timer = setInterval(() => {
      this.getData();
    }, 3000);

    // this.websocket = new WebSocket(
    //   `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
    // );
    // this.initWebSocket();
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>
<style scoped>
.select-veido .el-select {
  width: 100px;
  margin-left: 10px;
}
.select-veido >>> .el-input--small .el-input__inner {
  background: none;
}
.select-veido >>> .el-input__inner {
  border: 0;
}
</style>