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

<script>
import { graphic } from "echarts/lib/export";
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: "110%"
        },
        series: [
          {
            type: "bar",
            data: [, 40],
            coordinateSystem: "polar",
            barMaxWidth: 10,
            z: 1,
            name: "B",
            roundCap: true,
            itemStyle: {
              normal: {
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#25bdb1" },
                  { offset: 1, color: "#e7fdfc" }
                ])
              }
            },
            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: "70%",
            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: "#a9aec0",
                width: 1
              },
              length: 4
            }, //刻度样式
            splitLine: {
              show: true,
              length: 6,
              lineStyle: {
                color: "#a9aec0"
              }
            }, //分隔线样式
            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>