<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',
          },
          formatter: function (params) {
            let tooltipHtml = params
                .map((item) => {
                  let fixedColor = item.seriesName === '科技新闻政策' ? '#529F65' : '#FFC52F'; // 固定小圆点颜色
                  let marker = `<span style="display:inline-block;margin-right:5px;width:8px;height:8px;background:${fixedColor};border-radius:50%;"></span>`;
                  return `<div>${marker}${item.seriesName}: ${item.value}</div>`;
                })
                .join('');
            return `<div>${tooltipHtml}</div>`;
          },
        },
        legend: {
          right: '5%',
          top: '2.5%',
          itemWidth: 16,
          itemHeight: 8,
          data: ['科技新闻政策', '新兴科技创新'],
          textStyle: {
            color: '#FFFFFF',
            fontSize: 14,
            fontWeight: 'bold',
          },
          itemStyle: {
            color: function (name) {
              return name === '科技新闻政策' ? '#529F65' : '#FFC52F';
            }
          }
        },
        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: '#FFC52F',
            lineStyle: {  // 修改为虚线
              type: 'dashed',
              width: 2, // 线条宽度，可根据需要调整
            },
          },
          {
            name: '产品发布数量',
            smooth: true,
            showSymbol: false,
            type: 'line',
            data: list2,
            lineStyle: {  // 设置折线颜色渐变
              width: 2, // 线条宽度
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#529F65' }, // 渐变起点颜色
                { offset: 1, color: '#66BAD9' }, // 渐变终点颜色
              ]),
            },
            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: '#529F6550',
              }, {
                offset: 1,
                color: '#66BAD920',
              }]),
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
  }
};
</script>
