<template>
  <div ref="chartContainer" :style="{width: '100%', height: chartHeight}"
  ></div>
</template>

<script>
export default {
  name: 'LineIndex',
  data() {
    return {
      myChart: null,
    };
  },
  props:{
    chartHeight: {
      type: String,
      default: '260px', // 默认值
    }
  },
  watch: {
    chartHeight() {
      if (this.myChart) {
        this.myChart.resize(); // 让 ECharts 重新适应新高度
      }
    }
  },
  mounted() {
    console.log('->>>>')
    this.initChart();
  },
  methods: {
    initChart() {
      this.myChart = this.$echarts.init(this.$refs.chartContainer);
      let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      const list1 = [50, 10, 30, 40, 50, 60, 70, 110, 23, 90, 47, 60];
      const list2 = [22, 10, 120, 10,30, 80, 100, 50, 22, 39, 31, 80];
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          right: '5%',
          top: '2.5%',
          itemWidth: 16,
          itemHeight: 8,
          data: ['科技新闻政策', '新兴科技创新'],
          textStyle: {
            color: '#FFFFFF',
            fontSize: 14,
            fontWeight: 'bold',
          },
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '20%',
          bottom: '30%',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData,
          axisLabel: {
            color: '#85B6BC',
            margin: 10,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#FFFFFF20',
              type: 'dashed',
              width: 1,
            },
          },
        },
        yAxis: {
          type: 'value',
          name: '单位（个）',
          nameTextStyle: {
            fontFamily: 'MicrosoftYaHei',
            fontSize: 12,
            color: '#85B6BC'
          },
          nameGap: 25,
          axisLabel: {
            color: '#85B6BC',
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#FFFFFF20',
              type: 'dashed',
              width: 1,
            },
          },
        },
        series: [
          {
            name: '科技新闻政策',
            // smooth: true,
            // showSymbol: false,
            type: 'line',
            data: list1,
            color: '#28E9DA',
            areaStyle: list1.filter(Boolean).length === 0 ? {} : {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#53DDC550',
              }, {
                offset: 1,
                color: '#53DDC520',
              }]),
            },
          },
          {
            name: '新兴科技创新',
            // smooth: true,
            // showSymbol: false,
            type: 'line',
            data: list2,
            color: '#FEEA42',
            areaStyle: list2.filter(Boolean).length === 0 ? {} : {
              // shadowColor: 'rgba(101, 223, 221, 0.2)',
              // shadowBlur: 100, // 阴影
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#A49E3550',
              }, {
                offset: 1,
                color: '#A49E3520',
              }]),
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
  }
};
</script>
