large_screen/src/components/tunneling/six/two.vue

<template>
  <div
    id="two"
   style="width: 160px; height: 160px"
  ></div>
</template>
 
<script type="text/ecmascript-6">
import { mapState } from "vuex";
export default {
  data() {
    return {
      value:'',
      chartInstance: null,
      allData: null, // 服务器返回的数据

    };
  },
    computed: {
    ...mapState(["websocketIP"]),
  },
  mounted() {
    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/43`);
    this.initWebSocket();
    this.initChart(); //函数调用
    // this.getData();
    this.updateChart();
  },

  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(
        document.getElementById("two")
      );
    },


    updateChart() {

      const option = {
        grid: {
          height: 160,
          left: 0,
          top: 0,
          bottom: 0,
          right: 0,
        },
        series: [
          {
            name: "仪表盘",
            type: "gauge",
            min: 0,
            max: 1200,
            splitNumber: 10,
            // "axisLine": {
            //   "lineStyle": {
            //     "color": [
            //       [
            //         0.2,
            //         "#5DD1FA"
            //       ],
            //       [
            //         1,
            //         "#f7f9fc"
            //       ]
            //     ],
            //     "width": 10
            //   }
            // },
            axisLabel: {
              distance: -60,
              show: true,
            },
            axisTick: {
              show: true,
            },
            splitLine: {
              show: true,
            },
            itemStyle: {
              show: true,
            },
            title: {
              color: "#7f7f7f",
              fontSize: 16,
              fontWeight: "bolder",
            },
            detail: {
              offsetCenter: [0, 0],
              textStyle: {
                fontSize: "18",
                fontWeight: "bolder",
                color: "#F3DB5C",
              },
            },
            pointer: {
              show: true,
            },
            data: [
              {
                // name: "系统电压",
                value: this.value,
                itemStyle: { color: "#00ccee" },
              },
            ],
          },
        ],
      };

      this.chartInstance.setOption(option);
    },
        addData(data) {
      this.value = data.map((item) => item["jiedidianliu_after"])[0];
      this.chartInstance.setOption({
        series: [
          {
            data: [
              {
                value: this.value,
              },
            ],
          },
        ],
      });
    },
    initWebSocket() {
      // 连接错误
      this.websocket.onerror = () => {
        console.log(
          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
        );
      };
      // 连接成功
      this.websocket.onopen = () => {
        console.log(
          "WebSocket连接成功    状态码：" + this.websocket.readyState
        );
      };
      // 收到消息的回调
      this.websocket.onmessage = (event) => {
        // console.log("onmessage", event);
        if (JSON.parse(event.data).length) {
          this.addData(JSON.parse(event.data));
        }
      };
      // 连接关闭的回调
      this.websocket.onclose = () => {
        console.log(
          "WebSocket连接关闭    状态码：" + this.websocket.readyState
        );
      };
      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
      this.$once("hook:beforeDestroy", () => {
        this.websocket.close();
      });
    },

  },
};
</script>
 
<style scoped>
</style>