<template>
  <div>
    <el-breadcrumb separator="/" class="bread_crumb1">
      <el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.dataAnalysis") }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $t("lang.myServiceDataAnalysis") }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="in_analysis">
      <!-- 可横向铺满 -->
      <el-col :span="6" class="in_left">
        <el-row>
          <el-col :span="24" class="in_block">
            <block-radius class="block left_1">
              <div ref="left_1_l" class="left_1_l"></div>
              <div ref="left_1_r" class="left_1_r"></div>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block"></block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block"></block-radius>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12" class="in_center">
        <el-row>
          <el-col :span="24" class="in_block">
            <block-radius class="block"></block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block"></block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block"></block-radius>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" class="in_right">
        <el-row>
          <el-col :span="24" class="in_block">
            <block-radius class="block"></block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block"></block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block"></block-radius>
          </el-col>
        </el-row>
      </el-col>
      <!-- 不可横向铺满，一般为最后一行 -->
      <el-col :span="6" class="in_block">
        <block-radius class="block"></block-radius>
      </el-col>
      <el-col :span="18" class="in_block default">
        <block-radius class="block">
          <img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
        </block-radius>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BlockRadius from "@/components/block-radius";
export default {
  components: {
    BlockRadius
  },
  data: () => ({
    navList: []
  }),
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(this.$refs.left_1_l);
      // 绘制图表
      myChart.setOption({
        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: 160,
          boundaryGap: ["0", "100"],
          startAngle: 225
        },
        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%",
            label: {
              normal: {
                show: true,
                fontSize: 18,
                fontWeight: "bold",
                color: "#333",
                position: "top"
              }
            }
          },
          {
            type: "bar",
            data: [, 20],
            coordinateSystem: "polar",
            barMaxWidth: 10,
            z: 2,
            name: "抢修项目",
            roundCap: true,
            color: "#fff",
            barGap: "-100%",
            label: {
              normal: {
                show: true,
                fontSize: 18,
                fontWeight: "bold",
                color: "#333",
                position: "top"
              }
            }
          },
          {
            type: "bar",
            data: [, 120],
            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: 225,
            endAngle: -45,
            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
            }
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
.in_analysis {
  padding: 0 10px 10px;
  height: 100%;
}
.in_l {
}
.in_r {
}
.in_c {
}
.in_block {
  height: 300px;
  padding: 10px;
}
.block {
  width: 100%;
  height: 100%;
}
.left_1 {
  display: flex;
}
.left_1_l {
  width: 50%;
  height: 100%;
  display: inline-block;
}
.left_1_r {
  width: 50%;
  height: 100%;
  display: inline-block;
}
.default {
  text-align: center;
}
.default_img {
  width: 330px;
  height: 230px;
}
</style>