HwMes/hw-ui/src/views/board/firstFloor/index.vue

<template>
  <div class="app-container">

    <div class="chartBox1">
      <div class="title"></div>
      <div class="chart">
        <Chart ref="chart1"></Chart>
      </div>
    </div>
  </div>
</template>

<script>
import Chart from "@/components/board/Chart";
import * as echarts from 'echarts'

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  name: "Board1",
  components: {
    Chart
  },
  data() {
    return {};
  },
  mounted() {
    this.$refs.chart1.setData({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      grid: {
        left: "0",
        right: "4%",
        bottom: "0",
        top: 20,
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: [1, 2, 3, 4, 5, 6],
        axisLine: {
          lineStyle: {
            color: "white",
          },
        },
        axisLabel: {
          // interval: 0,
          // rotate: 40,
          textStyle: {
            fontFamily: "Microsoft YaHei",
          },
        },
      },

      yAxis: {
        type: "value",
        axisLine: {
          show: false,
          lineStyle: {
            color: "white",
          },
        },
        splitLine: {
          show: false,
        },
        axisLabel: {},
      },
      series: [
        {
          name: '数量',
          label: {
            normal: {
              show: true,
              position: "top",
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 0.75 * vw,
              },
            },
          },
          type: "bar",
          barWidth: "30%",
          barMaxWidth: 50,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#39ffff",
                },
                {
                  offset: 1,
                  color: "#5affa6",
                },
              ]),
            },
          },
          data: [1, 2, 3, 4, 5, 6],
        },
      ],
    })
  },
  methods: {}
};
</script>
<style lang="less" scoped>

.app-container {
  background-image: url("../../../assets/board/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.chartBox1 {
  position: absolute;
  top: 23%;
  left: 51%;
  width: 45%;
  height: 18.5%;
}
</style>