hyyfScreen/src/views/BioSafety/chart/ChartBar.vue

<template>
  <div :id="'chartBar-' + data.id" style="width: 100%; height: 100%;"></div>
</template>

<script>
export default {
  name: "ChartBar",
  props: {
    data: {
      type: Object,
      default: function () {
        return {
          id: 0,
          time: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '测试月'],
          data: [120, 132, 101, 134, 90, 230, 210, 210, 245, 203, 124, 214, 210],
          name: '默认',
          unit: '%'
        }
      }
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  methods: {
    init() {
      let max = Math.max(...this.data.data);
      let max1 = max + 30;
      // 获取当前数组的数量并push 成新数组
      let data1 = new Array(this.data.data.length).fill(max1);
      let options = {
        // title: {
        //   text: `用水监测`,
        //   x: "center",
        //   y: "top",
        //   textStyle: {
        //     fontSize: 16,
        //     color: "#ffffff",
        //   },
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: "5%",
          left: "5%",
          right: "5%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.data.time,
          axisLabel: {
            color: "#fff",
          },
          nameTextStyle: {
            color: "#fff",
          },
          axisLine: {
            lineStyle: {
              color: "#FFF",
            },
          },
        },
        yAxis: {
          splitLine: { show: false },
          axisLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#fff", //左边线的颜色
              width: "2", //坐标线的宽度
            },
          },
          axisLabel: {
            formatter: `{value}${this.data.unit}`,
            textStyle: {
              color: "#fff",

              fontSize: 12,
            },
          },
          nameTextStyle: {
            fontSize: 12,
          },
          // axisLabel: {
          //   textStyle: {
          //     color: "#fff",
          //
          //     fontSize: 12,
          //   },
          // },
        },
        series: [
          {
            type: "pictorialBar",
            symbol: "rect",
            itemStyle: {
              color: "#0369df",
              barBorderRadius: 3,
            },
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              textStyle: {
                //数值样式
                color: "#fff",
                fontSize: 14,
              },
              formatter: "{c}",
            },
            symbolRepeat: true,
            symbolSize: [20, 3],
            symbolMargin: 3,
            data: this.data.data,
          },
          {
            type: "pictorialBar",
            symbol: "rect",
            itemStyle: {
              color: "#022a62",
              barBorderRadius: 3,
            },
            symbolRepeat: true,
            symbolSize: [20, 3],
            symbolMargin: 3,
            z: -10,
            data: data1,
          },
        ],
      }
      this.myChart.setOption(options)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('chartBar-' + this.data.id));
    this.init()
    let that = this;
    window.addEventListener('resize', function () {
      that.myChart.resize()
    })
  }
}
</script>

<style scoped>

</style>