<template>
  <div class="instrumentRankingComponent">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="eCharts-max-big-box">
      <div id="instrumentRankingComponentECharts">

      </div>
    </div>
  </div>
</template>
<script>
import {
  reportReportBsEquipRankTopList,

} from "@/api/index";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'instrumentRankingComponent',
    components: {
      titlePageImgComponents
    },
    data () {
      return {
        propsData:{
          title:'大仪使用排行',
          checkType:'instrumentRankingComponent',
        },
        //eCharts定时器
        eChartsTimer:null,
      }
    },
    created(){

    },
    mounted() {
      this.timedRefresh();
    },
    methods: {
      timedRefresh(){
        let self = this;
        self.getData();
        //定时动画
        window.clearInterval(self.eChartsTimer);
        self.eChartsTimer = setInterval(function(){
          self.getData();
        },1000*30);
      },
      getData(){
        reportReportBsEquipRankTopList().then(response => {
          let Data = [];
          let xzData = [];
          let tclData = [];
          let tbData = [];
          for(let i=0;i<response.data.length;i++){
            Data.push(response.data[i].deviceName)
            xzData.push(response.data[i].useTime)
            tclData.push(response.data[i].appointFee)
            tbData.push(response.data[i].testSample)
          }
          this.eChartsMethod(Data,xzData,tclData,tbData,response.data);
        })
      },
      eChartsMethod(Data,xzData,tclData,tbData,response) {
        let option = {
          //你的代码
          tooltip: {//提示框组件
            trigger: 'axis',//触发类型 柱状图
            axisPointer:{type:'shadow'}, //触发效果 移动上去 背景效果
            textStyle: {
              fontSize: 18
            },
            formatter: function (params) {
              let result = params[0].name;
              params.forEach(function (item) {
                let colorData = item.seriesName == '使用机时'?'#35C1C2':(item.seriesName == '预约费用'?'#DF7805':(item.seriesName == '测试样品'?'#CE3A2A':''))
                result += "<br/>";
                // item 是每一个系列的数据
                const seriesName = item.seriesName; // 系列名称
                let value = '';
                if(item.seriesName == '使用机时'){
                  for(let i=0;i<response.length;i++){
                    if(item.value == response[i].useTime){
                      value = response[i].useTimeStr;
                    }
                  }
                }else {
                  value = item.value;
                }
                // const value = item.value; // 数据值
                let a = '<span style="border-radius:50%;background:'
                let b = ';display:inline-block;width:10px;height:10px;">'
                let c = '</span><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;" ></span>'
                result += a+colorData+b+c;
                // result += '<span style="border-radius:50%;background:+colorData+;display:inline-block;width:10px;height:10px;"></span><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;" ></span>';
                // result += `${seriesName}: ${value}<br/>`;
                result += `${seriesName}: ${value}`;
              });
              return result;
              // return `${params.name}:${chartData[params.dataIndex]}`;
            }
          },
          legend: {
            itemWidth: 20,
            itemHeight: 20,
            itemGap:80,
            top: 20,
            icon: 'rect',
            textStyle: {
              fontSize: 18,
              color: '#fff',
            },
          },
          grid: {
            top: '20%',
            left: '5%',
            right: '5%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: Data,
              axisLabel: {
                color: '#ffffff',
                fontSize: 18,
                margin: 20,
                interval: 0,
                formatter: function(value) {
                  var res = value;
                  // 长度超过n个的以省略号显示
                  if(res.length > 4) {
                    res = res.substring(0, 4) + "...";
                  }
                  return res;
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#2D4377'
                }
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#2D4377',
                  type: "dotted",
                },
              },
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: "",
              min: 0,
              position: 'left',
              nameTextStyle: {
                color: "#fff",
                fontSize: 18,
              },
              axisLine: {
                show:false,
                lineStyle: {
                  color: '#2D4377'
                }
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#2D4377',
                  type: "dotted",
                }
              },
              axisLabel: {
                show:false,
                formatter: '{value}',
                textStyle: {
                  color: "#FFFFFF",
                }
              },
            }
          ],
          series: [
            {
              name: '使用机时',
              type: 'bar',
              barWidth: 14,
              data: xzData,
              barGap: '30%', // 设置柱子之间的间隔为类目宽度的50%
              barCategoryGap: '10%', // 设置同一类目下的柱子间隔为类目宽度的40%
              itemStyle: {
                barCategoryGap: '40%',
                color: {//渐变色
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(61,216,216, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(61,216,216,0)",
                    },
                  ],
                },
              },
              showBackground: false,
              backgroundStyle:{
                borderColor: '#002429',
                borderWidth: 14
              }
            },
            {
              name: '预约费用',
              type: 'bar',
              barWidth: 14,
              barGap: '30%', // 设置柱子之间的间隔为类目宽度的50%
              barCategoryGap: '10%', // 设置同一类目下的柱子间隔为类目宽度的40%
              itemStyle: {
                color: {//渐变色
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(255,132,0, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255,132,0, 0)",
                    },
                  ],
                },
              },
              showBackground: false,
              backgroundStyle:{
                borderColor: '#002429',
                borderWidth: 14
              },
              data: tclData
            },
            {
              name: '测试样品',
              type: 'bar',
              barWidth: 14,
              barGap: '30%', // 设置柱子之间的间隔为类目宽度的50%
              barCategoryGap: '10%', // 设置同一类目下的柱子间隔为类目宽度的40%
              itemStyle: {
                color: {//渐变色
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(255,65,44, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255,65,44, 0)",
                    },
                  ],
                },
              },
              showBackground: false,
              backgroundStyle:{
                borderColor: '#002429',
                borderWidth: 14
              },
              data: tbData
            },
          ]
        };

        let echartsBox = this.$echarts.init(document.getElementById('instrumentRankingComponentECharts'));
        echartsBox.clear();
        echartsBox.setOption(option);
      }
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    }
  }
</script>
<style scoped lang="scss">
  .instrumentRankingComponent{
    height: 415px;
    width:1195px;
    .eCharts-max-big-box {
      height:353px;
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      overflow: hidden;
      position: relative;
      #instrumentRankingComponentECharts{
        width:1195px;
        height:353px;

      }
    }
  }
</style>
