yyky_web/src/views/equBigData/aaa.vue

<template>
  <div class="bottom-charts">
    <div class="bc-chart-item">
      <dv-charts class="lc1-chart" :option="option" />
    </div>

    <div class="bc-chart-item">
      <dv-charts class="lc1-chart" :option="option1" />
    </div>

    <div class="bc-chart-item">
      <dv-charts class="lc1-chart" :option="option2" />
    </div>

    <div class="bc-chart-item">
      <dv-charts class="lc1-chart" :option="option3" />
    </div>
  </div>
</template>

<script>
import LabelTag from "./LabelTag";

export default {
  name: "BottomCharts",
  components: {
    LabelTag,
  },
  data() {
    return {
      option: {
        series: [
          {
            type: "gauge",
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 7,
            data: [
              {
                name: "itemA",
                value: 89,
                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                gradient: ["#01dcdf"],
              },
            ],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: "round",
            },
            details: {
              show: true,
              formatter: "{value}",
              style: {
                fill: "#1ed3e5",
                fontSize: 15,
              },
            },
          },
        ],
      },
      option1: {
        series: [
          {
            type: "gauge",
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 7,
            data: [
              {
                name: "itemA",
                value: 34,
                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                gradient: ["#33faaa"],
              },
            ],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: "round",
            },
            details: {
              show: true,
              formatter: "{value}",
              style: {
                fill: "#1ed3e5",
                fontSize: 15,
              },
            },
          },
        ],
      },
      option2: {
        series: [
          {
            type: "gauge",
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 7,
            data: [
              {
                name: "itemA",
                value: 55,
                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                gradient: ["#f7ac20"],
              },
            ],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: "round",
            },
            details: {
              show: true,
              formatter: "{value}",
              style: {
                fill: "#1ed3e5",
                fontSize: 15,
              },
            },
          },
        ],
      },
      option3: {
        series: [
          {
            type: "gauge",
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 7,
            data: [
              {
                name: "itemA",
                value: 67,
                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                gradient: ["#f93496", "#f61967","#f2053e"],
              },
            ],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: "round",
            },
            details: {
              show: true,
              formatter: "{value}",
              style: {
                fill: "#1ed3e5",
                fontSize: 15,
              },
            },
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.bottom-charts {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .bc-chart-item {
    width: 25%;
    height: 100%;
    box-sizing: border-box;
    .lc1-chart {
      height: calc(100% - 80px);
      position: relative;
    }
  }
}
</style>