yyky_web/src/views/datav/LeftChart99.vue

<template>
  <div class="left-chart-1">
    <dv-charts class="ring-charts" :option="options" />
    <div class="title">{{ this.title }}</div>
  </div>
</template>

<script>
export default {
  name: "LeftChart99",
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      options: {
        series: [
          {
            type: "gauge",
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 10,
            data: [
              {
                name: "itemA",
                value: 65,
                gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
              },
            ],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: "round",
            },
            details: {
              show: true,
              formatter: "{value}%",
              style: {
                fill: "#1ed3e5",
                fontSize: 10,
              },
            },
          },
        ],
      },
    };
  },
  // methods: {
  //   createData() {
  //     const { randomExtend } = this;

  //     this.card = new Array(5).fill(0).map((foo, i) => ({
  //       title: "测试路段" + (i + i),
  //       total: {
  //         number: [randomExtend(9000, 10000)],
  //         content: "{nt}",
  //         textAlign: "right",
  //         style: {
  //           fill: "#ea6027",
  //           fontWeight: "bold",
  //         },
  //       },
  //       num: {
  //         number: [randomExtend(30, 60)],
  //         content: "{nt}",
  //         textAlign: "right",
  //         style: {
  //           fill: "#26fcd8",
  //           fontWeight: "bold",
  //         },
  //       },
  //       ring: {
  //         series: [
  //           {
  //             type: "gauge",
  //             startAngle: -Math.PI / 2,
  //             endAngle: Math.PI * 1.5,
  //             arcLineWidth: 13,
  //             radius: "80%",
  //             data: [{ name: "资金占比", value: randomExtend(40, 60) }],
  //             axisLabel: {
  //               show: false,
  //             },
  //             axisTick: {
  //               show: false,
  //             },
  //             pointer: {
  //               show: false,
  //             },
  //             backgroundArc: {
  //               style: {
  //                 stroke: "#224590",
  //               },
  //             },
  //             details: {
  //               show: true,
  //               formatter: "资金占比{value}%",
  //               style: {
  //                 fill: "#1ed3e5",
  //                 fontSize: 20,
  //               },
  //             },
  //           },
  //         ],
  //         color: ["#03d3ec"],
  //       },
  //     }));
  //   },
  //   randomExtend(minNum, maxNum) {
  //     if (arguments.length === 1) {
  //       return parseInt(Math.random() * minNum + 1, 10);
  //     } else {
  //       return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
  //     }
  //   },
  // },
  // mounted() {
  //   const { createData } = this;

  //   createData();

  //   setInterval(this.createData, 30000);
  // },
};
</script>

<style lang="scss">
.left-chart-1 {
  // width: 25%;
  height: 100%;
  // float: left;
  // display: flex;
  flex-grow: 0;
  // flex-direction: column;
  // border: 1px solid green;
  .title{
    height: 20%;
    text-align: center;
  }
}
.dv-border-box-8 .border-box-content{
  display: flex;
}
</style>