<template>
  <div>
    <div ref="assetEchart" class="asset_echart"></div>
  </div>
</template>
<script setup>
import { init } from 'echarts';
import 'echarts-liquidfill/src/liquidFill.js';
const assetEchart = ref(null);
let {
  data: { xData, yData },
} = defineProps(['data']);

const initM = () => {
  const chart = init(assetEchart.value);
  window.addEventListener('resize', () => {
    chart.resize();
  });
  chart.setOption({
    grid: {
      top: 20,
      left: 0,
      bottom: 20,
      right: 40,
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(255,255,255,0)', // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: 'rgba(255,255,255,1)', // 100% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(255,255,255,0)', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,
        axisLabel: {
          margin: 5,
          formatter: '{value}',
          textStyle: {
            color: '#fff',
          },
        },
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
        data: xData,
      },
    ],
    yAxis: [
      {
        type: 'value',
        margin: 5,
        axisLabel: {
          textStyle: {
            color: '#fff',
          },
        },
        nameTextStyle: {
          color: '#fff',
          fontSize: 12,
          lineHeight: 40,
        },
        splitLine: {
          show:true,
          lineStyle: {
            type: 'dashed',
            color: '#1ba6ba',
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff',
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '满意度%',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbolSize: 8,
        zlevel: 3,
        itemStyle: {
                normal: {
                    color: '#3A84FF',
                    lineStyle: {
                        color: "#3A84FF",
                        width: 1
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 1,
                            x2: 0,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(0, 0, 0, 0)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#21da94' // 100% 处的颜色
                            }]
                        }
                    }
                }
            },
        
        data: yData,
      },
    ],
  });
  window.addEventListener(
    'resize',
    () => {
      chart.resize();
    },
    false
  ); // false代表事件句柄在冒泡阶段执行
};

onMounted(() => {
  initM();
});
</script>

<style lang="scss" scoped>
.asset_echart {
  width: 100%;
  height: 260px;

  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>