large_screen/src/views/mining/envTest/waterLevel.vue

<template>
  <!-- 支架压力柱状图 -->
  <div ref="bar" style="height: 150px; width: 500px; margin-left: 40px"></div>
</template>

<script>
/**
 * 工作区水害图
 * @module waterLevel
 */
export default {
  name: "Bars",
  data() {
    return {
      myChart: null,
      option: {
        title: {
          text: "探孔水位/m",
          left: 100,
          top: 10,
          textStyle: {
            fontWeight: "normal", //标题颜色
            color: "#4ADEFE",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: (params) => {
            if (params[0].data > 64) {
              return params[0].marker + "压力过高:" + params[0].data;
            } else {
              return params[0].marker + "压力正常:" + params[0].data;
            }
          },
        },
        color: ["#FF6666", "#99CC66", "#FFFF66"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              color: "rgb（255,255,255）",
              fontSize: 11,
            },
            axisLine: {
              show: true,
              // color: ""
            },
            data: [1, 2],
          },
        ],
        yAxis: [
          {
            type: "value",
            max: 80,
            min: 0,
            axisLabel: {
              color: "#fff",
              fontSize: 11,
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "dotted",
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: "压力过低",
            type: "bar",
            itemStyle: {
              normal: {
                color: function (params) {
                  if (params.data > 64) {
                    return "#FF6666";
                  } else {
                    return "#99CC66";
                  }
                },
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: function (params) {
                      if (params.data > 64) {
                        return "#FF6666";
                      } else {
                        return "#99CC66";
                      }
                    },
                    fontSize: 15,
                  },
                },
              },
            },
            barWidth: "10",
            barCategoryGap: "5%",
            data: [50, 55],
          },
          {
            //这两组数据用来模拟markLine线段开关,data可以为空
            name: "压力超限",
            type: "line",
            markLine: {
              data: [
                {
                  name: "压力超限",
                  yAxis: "60",
                  itemStyle: {
                    normal: {
                      show: true,
                      color: "#FF6666",
                    },
                  },
                },
              ],
            },
          },
        ],
      },
    };
  },
  mounted() {
    console.log(this.$echarts);
    this.myChart = this.$echarts.init(this.$refs.bar);
    this.myChart.setOption(this.option);
    let interval = setInterval(() => {
      let temp = [];
      for (let i = 0; i < 2; i++) {
        temp.push(this.getRandomNum(0, 80));
      }
      this.myChart.setOption({
        series: [
          {
            data: temp,
          },
        ],
      });
    }, 3000);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(interval);
    });
  },
};
</script>

<style></style>