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

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

<script>
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",
            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);
  },
};
</script>

<style>
</style>