<template>
  <div class="page_testDetails">
    <p class="testTitle">指标趋势</p>
    <div style="width:100%;overflow-x:auto">
      <bar-chart :options="options" :height="height"></bar-chart>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import BarChart from "../components/BarChart";
export default {
  components: {
    BarChart
  },
  data() {
    return {
      height: "200px",
      options: {
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {},
        legend: {
          data: ["达标率%"],
          left: 0
        },
        xAxis: {
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
        },
        yAxis: {
          axisLabel: {
            formatter: "{value} %"
          },
          show: false
        },
        series: [
          {
            name: "达标率%",
            type: "line",
            data: [
              "78.57",
              "50",
              "80",
              "93.33",
              "92.86",
              "100",
              "12",
              "77",
              "37"
            ],
            barWidth: 30,
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}%"
              }
            },
            //配置样式
            itemStyle: {
              //通常情况下：

              //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              normal: {
                color: function(params) {
                  //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                  var colorList = [
                    ["#A9E0F3", "#9FBDFC"],

                    ["#FFD7C0", "#FF9994"]
                  ];

                  var index = params.dataIndex;
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex % colorList.length;
                  }

                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: colorList[index][0] },
                    // { offset: 0.5, color: colorList[index][1] },
                    { offset: 1, color: colorList[index][1] }
                  ]);
                },
                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
              },

              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };
  },
  methods: {
    clickQuality(index) {
      this.quality = index;
    }
  }
};
</script>


<style lang="scss" scoped>
.page_testDetails {
  padding-left: 1rem;
  .testTitle {
    font-size: 1rem;
    font-weight: bold;
    margin: 1.25rem 0 1rem;
  }
  .qualityBox {
    display: flex;
    flex-wrap: nowrap;
    min-width: 50rem;
    .qualityOne {
      width: 4.5rem;
      height: 4.5rem;
      border-radius: 0.3125rem;
      border: 1px solid rgba(229, 229, 229, 1);
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-right: 0.875rem;
      //   justify-content: space-around;
      .gth {
        color: #ff974a;
        font-size: 1.25rem;
      }
      .gou {
        color: #5cd924;
        font-size: 1.25rem;
      }
      p {
        width: 100%;
        margin-top: 1.25rem;
        margin-bottom: 0.625rem;
        font-weight: bold;
        color: #666666;
        font-size: 0.875rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .active {
      background: #5b98ff;
      p {
        color: #fff;
      }
      .gth {
        color: #fff;
        font-size: 1.25rem;
      }
      .gou {
        color: #fff;
        font-size: 1.25rem;
      }
    }
  }
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>
