<template>
    <div :id="id"
         style="width: 100%; height: 100%"></div>
  </template>
  <script>
  import * as echarts from 'echarts';
  import { guid } from '@/utils/ruoyi';
  import { reactive, toRefs, onMounted, watch } from 'vue';
  export default {
    name: 'line-chart',
    props: {
      data: Object,
      refresh: Number,
    },
    setup (props) {
      const allData = reactive({
        series: [],
        legend: [],
        id: guid(),
        chart: null,
      });
      const resizeTheChart = () => {
        if (allData.chart) {
          allData.chart.resize();
        }
      };
  
      const init = () => {
        let chartDom = echarts.init(document.getElementById(allData.id));
  
        var shadowYData = [100, 100];
        var color = "rgba(31,227,249,1)";
        var shadowColor = "#0b5767";
        var barWidth = 12;
  
        var option;
        option = {
          color: ["#3FFFC2", "#FFF21C"],
          
          tooltip: {
            trigger: "axis",
            // formatter: "{b}：{c}㎡",
            // feature: {
            //   mark: { show: true },
            //   dataView: { show: true, readOnly: false },
            //   magicType: { show: true, type: ['line', 'bar'] },
            //   restore: { show: true },
            //   saveAsImage: { show: true }
            // },
            // axisPointer: {
            //   type: "cross",
            //   textStyle: {
            //     color: "#fff"
            //   }
            // },
            formatter: (params) => {
              // console.log(params);
              var relVal = '' + params[0].name
              for (var i = 0, l = params.length; i < l; i++) {
                if (params[i].seriesName) {
                  let unit = params[i].seriesName == '多年月均降雨量' ? 'mm' : '天'
                  relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit
                }
              }
              return relVal
            }
          },
          grid: {
            top: 50,
            bottom: 30,
          },
          legend: {
              
              data: ['多年月均降雨量', '月降雨天数'],
              textStyle: {
              color: '#fff'
          }
          },
          xAxis: [
            {
              type: "category",
              axisLine: {
                show: false,
                lineStyle: {
                  width: 2,
                  color: "#58b2ed",
                }
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: "rgba(255,255,255,1)",
                fontSize: 14,
                fontFamily: "AlibabaPuHuiTi",
              },
              data: props.data.xAxis,
            }
          ],
          yAxis: [
            {
              name: '降雨量(mm)',
              type: 'value',
              axisLabel: {
                color: '#fff',
                show: true,
              },
              nameTextStyle: {
                color: '#fff',
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color: '#60C2FF',
                },
              },
              alignTicks: true,
            },
  
            {
              name: '天数',
              type: 'value',
              nameTextStyle: {
                color: '#fff',
              },
                    min: 0,
                  max: 20,
                  interval: 5,
              axisLabel: {
                show: true,
                color: '#fff',
              },
              splitLine: {
                lineStyle: {
                  color: '#D1DEEE',
                  type: 'dashed',
                  color: '#53D8FB',
                },
              },
              alignTicks: true,
            },
  
          ],
          dataZoom: [
            {
              // show: true,
              show: false,
              height: 4,
              bottom: 18,
              start: 0,
              end: 100,
              handleSize: '100%',
              fillerColor: "#94FA41",
              borderColor: "transparent",
              backgroundColor: "rgba(148, 250, 65, 0.2)",
              handleStyle: {
                color: "#94FA41",
              },
              moveHandleSize: 0,
              textStyle: {
                color: "#fff"
              },
            },
            {
              type: "inside",
              show: true,
              height: 15,
              start: 1,
              end: 35
            }
          ],
          "series": [
  
  
            {
              name: '多年月均降雨量',
              type: 'bar',
              "barWidth": barWidth,
              barGap: '10%', // Make series be overlap
              barCateGoryGap: '10%',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                    offset: 0,
                    color: "rgba(24, 255, 255, 1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(188, 255, 255, 1)"
                  }
                  ]),
                },
              },
              data: props.data.yAxis
            },
            {
              // smooth: true, //变为曲线 默认false折线
              name: "月降雨天数",
              type: "line",
              data: props.data.yAxis2,
              yAxisIndex: 1,
              color: "#FFF21C",
            },
          ]
  
        };
        option && chartDom.setOption(option, true);
        allData.chart = chartDom;
      };
      watch(
        () => props.refresh,
        () => {
          if (allData.chartDom) {
            allData.chartDom.dispose();
            allData.chartDom = null;
          }
          setTimeout(() => {
            init();
          }, 0);
        }
      );
      onMounted(() => {
        init();
        window.addEventListener('resize', resizeTheChart);
  
  
      });
      return {
        ...toRefs(allData),
        resizeTheChart,
        init,
      };
    },
  };
  </script>