<template>
  <div class="rankingCharts" ref="rankingCharts" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: '',
  props: {
    title: {
      type: String,
      default: ''
    },
    yAxisNames: {
      type: Array,
      default: []
    },
    yAxisNumbers: {
      type: Array,
      default: []
    },
    seriesData: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      uEcharts: null,
      uOption: null,
    }
  },
  watch: {
    seriesData: {
      handler(newValue, oldValue){
        console.log(newValue, oldValue)
        if(newValue){
          this.setSeriesData()
        }
      },
      immediate: true
    }
  },
  created () {
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart(){
      this.uEcharts = echarts.init(this.$refs.rankingCharts)

      this.uOption = {
        grid: {
          left: "2%",
          right: "2%",
          bottom: "0",
          top: "2%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return (
              params[0].name +
              "<br/>" +
              "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
              params[0].seriesName +
              " : " +
              Number(
                (params[0].value.toFixed(4) / 10000).toFixed(2)
              ).toLocaleString() +
              " 次<br/>"
            );
          },
        },
        // dataZoom: [
        //     {
        //         type: "inside",
        //         startValue: 0, 
        //         endValue: 2, 
        //         minValueSpan: 2,  
        //         maxValueSpan: 2,  
        //         yAxisIndex: [0],
        //       zoomOnMouseWheel: false,  // 关闭滚轮缩放
        //       moveOnMouseWheel: true, // 开启滚轮平移
        //       moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
        //     },
        //     {
        //       type: 'slider',
        //       realtime: true,
        //       startValue: 0, 
        //       endValue: 2,  
        //       width:  '3.5',
        //       height:  '80%',
        //       yAxisIndex: [0], // 控制y轴滚动
        //       fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
        //       borderColor: "rgba(17, 100, 210, 0.12)", 
        //       backgroundColor: '#cfcfcf',//两边未选中的滑动条区域的颜色
        //       handleSize:0, // 两边手柄尺寸
        //       showDataShadow: false,//是否显示数据阴影 默认auto
        //       showDetail: false, // 拖拽时是否展示滚动条两侧的文字
        //       top:'1%',
        //       right:'5',
        //   }
          
        // ],
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#333",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: this.yAxisNames,
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#333",
                fontSize: "12",
              },
              formatter: function (value) {
                if (value >= 10000) {
                  return (value / 10000).toLocaleString() + "次";
                } else {
                  return value.toLocaleString();
                }
              },
            },
            data: this.yAxisNumbers,
          },
        ],
        series: [
          {
            name: "火情",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgb(92,141,253,1)",
                    // color: "rgb(57,89,255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgb(50,189,209,1)",
                    // color: "rgb(46,200,207,1)",
                  },
                ]),
              },
            },
            barWidth: 20,
            data: this.seriesData,
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 20,
            barGap: "-100%",
            data: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
            itemStyle: {
              normal: {
                color: "#eee",
                barBorderRadius: 30,
              },
            },
          },
        ],
      };

      this.uOption && this.uEcharts.setOption(this.uOption);
      window.addEventListener('resize', ()=>{
        this.uEcharts.resize()
      })
    },
    setSeriesData(){
      console.log()
      console.log(this.uEcharts)
    }
  }
}
</script>

<style lang="less" scoped>
.rankingCharts{
  width: 100%;
  height: 100%;
}
</style>
