<template>
  <div >
    <Title title="虫害风险">
      <template v-slot:title-slot>
        <div class="slot-unit">单位：比例</div>
      </template>
    </Title>
    <div ref="chartDom"  class="content-box yse-events"></div>
  </div>
</template>


<script setup>
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import Highmaps from 'highcharts/modules/map';
import Title from "../../../components/title";
import {onMounted, ref} from "vue";

//初始化Highcharts
HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);

let chartDom = ref(null);
const btnIndex = ref(null);
const mychat = ref(null);
function getActive(index){
  return btnIndex.value == index ? "active" : "";
}

onMounted(async () => {
  init1()
})
const options =  {
  tooltip:{
    useHTML:true,
    backgroundColor:"#00000000",
    formatter:function(){
      return "<div class='tooltip1'><div>"+this.x+"</div><div>虫害风险指数"+this.y+"</div></div>"
    }
  },
  chart: {
    backgroundColor:"#ffffff00",
    type: 'areaspline',
  },
  title: {
    text: "虫害风险趋势",
    align:"left",
    style:{color:"#ffffff",fontSize:"12px",fontWeight: 400}
  },
  credits: {
    enabled:false,
  },
  xAxis: {
    gridLineWidth: 1,
    type: 'datetime',
    gridLineColor:"#e6e6e630",
    categories: [],
    labels: {
      style: {
        color: '#fff',
        fontSize:'11px',
        fontWeight: 400,
        fontFamily:'PingFangSC-Regular, PingFang SC'
      }
    },
  },
  yAxis: {
    min: 0,
    max: 1,
    tickInterval:0.2,
    title: null,
    gridLineWidth: 1,
    gridLineColor:"#e6e6e630",
    labels: {
      format:"{value}",
      style: {
        color: '#fff',
        fontSize:'11px',
        fontWeight: 400,
        fontFamily:'PingFangSC-Regular, PingFang SC'
      }
    },
  },
  legend: {
    /* 图例显示顺序反转
     * 这是因为堆叠的顺序默认是反转的，可以设置
     * yAxis.reversedStacks = false 来达到类似的效果
     */
    enabled:false,
    reversed: true,
    padding:0,
    itemStyle: {
      color: '#fff',
      fontFamily:'ArialMT'
    }
  },
  plotOptions: {
    areaspline: {
      fillColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 0,
          y2: 1
        },
        stops: [
          [0, '#FF927590'], // start
          [0.5, '#FCBA8A80'], // middle
          [1, '#FAD48B70'] // end
        ]
      },
      marker: {
        radius: 0
      },
      lineWidth: 0,
      states: {
        hover: {
          lineWidth: 1,
          radius: 5
        }
      },
      threshold: null
    }
  },
  series: []
}

function setPer(data){
  let sum = 0;
  for(let i of data){
    sum = sum + i;
  }
  let res = new Array()
  for(let i of data){
    res.push({val:i, y : parseInt((i / sum * 100).toFixed(0))});
  }
  return res;
}

function init1() {
  let date = new Date()

  options.xAxis.categories = [
    '03-02',
    '03-09',
    '03-16',
    '03-23',
    '03-30',
    '04-06',
    '04-13',
    '04-20',
    '04-27',
    '05-04'
  ]
  options.series = [{
    data: [0.65,
      0.78,
      0.77,
      0.61,
      0.55,
      0.63,
      0.76,
      0.78,
      0.9,
      0.94
    ],
    color:"#18f135",
  }];
  mychat.value = new Highcharts.Chart(chartDom.value, options);
}




</script>

<style lang="scss" scoped>
.content-box{
  position: absolute;
  width: 100%;
  height: calc(100% - 48px);
}
.slot-unit{
  color: #f0f0f0;
  text-align: right;
  padding: 10px;
  width: 100%;
}

</style>

