<template>
  <div>
    <div ref="assetEchart" class="asset_echart"></div>
  </div>
</template>
<script setup>
import { init } from "echarts";
import {
  reactive,
  toRefs,
  ref,
  onMounted,
  watchEffect,
} from "vue";
const assetEchart = ref(null);
let {
  data: { xData, yData, title, color, type, areaStyle, tittle, max, interval },
} = defineProps(["data"]);
let options = reactive({
  title: {
    text: tittle,
    left: "selectedOffset",
    top: 0,
    textStyle: {
      //主标题文字样式
      fontStyle: "normal",
      fontWeight: "bold",
      fontFamily: "san-serif",
      fontSize: 16,
    },
  },
  legend: {
    textStyle: {
      fontSize: "14",
    },
  },
  tooltip: {
    trigger: "axis",
    formatter: "{b}<br/>{a}：{c}",
  },
  grid:{
    left:"1%",
    right:"0",
    bottom:"0",
    containLabel:true,
  },
  xAxis: {
    type: "category",
    data: xData,
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      textStyle: {},
    },
    axisLine: {
      lineStyle: {},
    },
  },

  yAxis: {
    type: "value",
    min: 0,
    axisTick: {
      show: false,
    },
    //    max,
    interval,
    splitNumber: 5,
    axisLabel: {
      show: true,
      textStyle: {},
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
      },
    },
    axisLine: {
      lineStyle: {},
    },
  },
  series: [
    {
      data: yData,
      type,
      name: title,
      areaStyle,
      barWidth: "18px",
      smooth:true,
      itemStyle: {
        normal: {
          color:'#126bff', //折线点的颜色
          borderColor: '#ffffff', //拐点边框颜色
          borderWidth: 2, //拐点边框大小
        },
      },
      lineStyle: {
        color:'#126bff', //折线的颜色
      },
      areaStyle: {
        //区域背景色
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color,
            },
            {
              offset: 1,
              color: 'rgba(47,196,154,0.01)',
            },
          ],
          global: false,
        },
    },
  }
  ],
  color: [color],
});
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;
}

onMounted(() => {
  const chart = init(assetEchart.value);
  chart.setOption(options);
  window.addEventListener("resize", () => {
    chart.resize();
  });
});
</script>
<style lang="scss" scoped>
.asset_echart {
  width: 530px;
  height: 364px;
  margin: 10px 14px 0 16px;
  padding: 24px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>