<template>
  <div>
    <div ref="assetEchart" class="asset_echart"></div>
  </div>
</template>
<script lang="ts" setup>
import { init } from 'echarts';
import { reactive, toRefs, Ref, ref, onMounted, watchEffect } from 'vue';
const assetEchart: Ref<HTMLElement | null | any> = ref(null);
let {
  data: { xData, yData, title, color, type, areaStyle, tittle, max, interval },
} = defineProps(['data']);
let options = reactive({
  title: {
    subtext: '单位（万元）',
    left: 5, // 距离左边位置
    top: 16, // 距离上面位置
    subtextStyle: {
      // 设置二级标题的样式
      color: '#fff',
    },
  },
  // 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: {
      textStyle: {
        color: '#fff',
      },
    },
    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,
      barWidth: '18px',
      smooth: true,
      areaStyle: {
        //区域背景色
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color,
            },
            {
              offset: 1,
              color: '#fff',
            },
          ],
          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 as HTMLElement);
  chart.setOption(options);
  window.addEventListener('resize', () => {
    chart.resize();
  });
});
</script>
<style lang="scss" scoped>
.asset_echart {
  width: 530px;
  height: 440px;
  margin: 10px 14px 0 16px;
  padding: 24px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>