<template>
  <div>
    <div ref="assetEchart" class="asset_echart"></div>
  </div>
</template>
<script lang="ts" setup>
import { init } from "echarts";
import 'echarts-liquidfill/src/liquidFill.js'
import {
  reactive,
  toRefs,
  Ref,
  ref,
  onMounted,
  watchEffect,
  defineProps,
} from "vue";
const assetEchart: Ref<HTMLElement | null | any> = ref(null);
let {
  data: {  xData,yData},
} = defineProps(["data"]);
// const all=xData.reduce((n,v)=>{ 
//   return n + v.value
// },0)
const initM = () => {
  const chart = init(assetEchart.value as HTMLElement);
  window.addEventListener("resize", () => {
    chart.resize();
  });
  chart.setOption({
    grid: {
        top: 20,
        left:0,
        containLabel: true
    },
    tooltip:{
        trigger: "axis",
    },
    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: {
            lineStyle: {
                type: "dashed",
                color: "#fff"
            }
        },
        axisLine: {
            show: true,
            lineStyle:{
                color:"#fff"
            }
        },
        axisTick: {
            show: false
        }
    }
    ],
    series: [{
        name: "满意度%",
        type: "line",
        smooth: true,
        showSymbol: false,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
            normal: {
                width:2,
                color: "#4487F5",
            }
        },
        areaStyle: {
            normal: {
                color:'#143468 '
            }
        },
        data: yData
    }]
} );
window.addEventListener('resize', () => {
    chart.resize();
}, false); // false代表事件句柄在冒泡阶段执行

};
function chartSize(container, charts) {
  function getStyle(el, name) {
    if (window.getComputedStyle) {
      return window.getComputedStyle(el, null);
    } else {
      return el.currentStyle;
    }
  }
  const hi = getStyle(container, "height").height;
  charts.style.height = hi;
}
watchEffect(() => {});
onMounted(() => {
  initM();
});
</script>

<style lang="scss" scoped>
.asset_echart {
  width: 390px;
  height: 240px;
  // margin: 10px 14px 0 16px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>