<template>
  <chart :options="dashboard()" class="dashboard" />
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data: () => ({
    navList: []
  }),
  mounted() {},
  methods: {
    dashboard() {
      let self = this;
      return {
        title: {
          text: "20%",
          subtext: "sssss",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 26,
            fontWeight: "normal",
            color: ["#67828c"]
          },
          subtextStyle: {
            color: "#67828c",
            fontSize: 16,
            align: "center"
          }
        },
        angleAxis: {
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          min: 0,
          max: 138,
          boundaryGap: ["0", "100"],
          startAngle: 220,
          endAngle: -40,
        },
        radiusAxis: {
          type: "category",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        polar: {
          radius: "100%"
        },
        series: [
          {
            type: "bar",
            data: [,40],
            coordinateSystem: "polar",
            barMaxWidth: 10,
            z: 1,
            name: "抢修项目",
            roundCap: true,
            color: "#1779ee",
            barGap: "-100%"
          },
          {
            type: "bar",
            data: [,100],
            z: 0,
            silent: true,
            coordinateSystem: "polar",
            barMaxWidth: 10,
            name: "C",
            roundCap: true,
            color: "#ddd",
            barGap: "-100%"
          },
          {
            type: "gauge",
            radius: "55%",
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 220,
            endAngle: -40,
            axisLabel: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [[1, "rgba(0,0,0,0)"]]
              }
            }, //仪表盘轴线
            axisLabel: {
              show: false
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 5,
              lineStyle: {
                color: "#468EFD", //用颜色渐变函数不起作用
                width: 1
              },
              length: -8
            }, //刻度样式
            splitLine: {
              show: true,
              length: -10,
              lineStyle: {
                color: "#468EFD" //用颜色渐变函数不起作用
              }
            }, //分隔线样式
            detail: {
              show: false
            },
            pointer: {
              show: false
            }
          },
          {
            name: "point",
            type: "scatter",
            coordinateSystem: "polar",
            barGap: "-100%",
            zlevel: 0,
            symbol: "circle",
            symbolSize: 6,
            itemStyle: {
              normal: {
                show: true,
                color: "#fff"
              }
            },

            data: [,40]
          }
        ]
      };
    }
  }
};
</script>
<style scoped>
.dashboard {
  width: 100%;
  height: 100%;
}
</style>