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

<script>
import { graphic } from "echarts/lib/export";
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        data = 40;
        text = "模拟数据1.0";
      }
    },
    dangerousValue: {
      type: String,
      default: ""
    }
  },
  data: () => ({
    navList: []
  }),
  mounted() {},
  methods: {
    dashboard() {
      let self = this;
      return {
        title: [
          {
            text: self.data.data + "{a|%}",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 36,
              fontWeight: "lighter",
              color: ["#67828c"],
              rich: {
                a: {
                  fontSize: 14,
                  padding: [0, 0, 4, 0]
                }
              }
            }
          },
          {
            text: self.data.text,
            x: "center",
            y: "58%",
            textStyle: {
              fontSize: 12,
              fontWeight: "normal",
              color: "#707693"
            }
          }
        ],
        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: [, self.data.data],
            coordinateSystem: "polar",
            barMaxWidth: 10,
            z: 1,
            name: "B",
            roundCap: true,
            itemStyle: {
              normal: {
                color:
                  self.dangerousValue == "high"
                    ? self.data.data >= 80
                      ? "#e15260"
                      : "#515fe7"
                    : self.data.data > 75
                    ? "#00cfc6"
                    : self.data.data > 50
                    ? "#54cefd"
                    : self.data.data > 25
                    ? "#54cefd"
                    : "#25bdb1"
              }
            },
            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: "#c9cee0",
                width: 1
              },
              length: 4
            }, //刻度样式
            splitLine: {
              show: true,
              length: 6,
              lineStyle: {
                color: "#c9cee0"
              }
            }, //分隔线样式
            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: [, self.data.data]
          }
        ]
      };
    }
  }
};
</script>
<style scoped>
.dashboard {
  width: 100%;
  height: 100%;
}
</style>