<template>
  <div id="home">
    <div
      style="
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
      "
    >
    <div
      class="my-charts"
      style="height: 500px; width: 500px"
      ref="myChart"
    ></div>
    <p style="font-size: 28px;">后台项目进度</p></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart);
      // 绘制图表
      myChart.setOption({
        series: [
          {
            type: "gauge",
            progress: {
              show: true,
              width: 14,
            },
            axisLine: {
              lineStyle: {
                width: 14,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 15,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            axisLabel: {
              distance: 25,
              color: "#999",
              fontSize: 20,
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 21,
              itemStyle: {
                borderWidth: 10,
              },
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              fontSize: 50,
              offsetCenter: [0, "70%"],
            },
            data: [
              {
                value: 60,
              },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
.cals {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}
</style>