<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, defineEmits, watchEffect } from 'vue';
const assetEchart: Ref<HTMLElement | null | any> = ref(null);
let { data:{xData,legend,yData:{contractCount,paymentMoney,contractMoney}} } = defineProps(['data'])
let options = reactive( {
  title: {
  subtext: "单位（万元）",
  left: 5,// 距离左边位置
  top: 16,// 距离上面位置
  subtextStyle:{ // 设置二级标题的样式
    color:"#fff"
  }
},
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#fff'
      }
    }
  },
  legend: {
    data: legend,
    textStyle: {
            color: '#fff'
        }
  },
  grid:{
    left:"1%",
    right:"0%",
    bottom:"12%",
    containLabel:true,
  },
  xAxis: [
    {
      type: 'category',
      data: xData,
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
			textStyle: {
				color: '#fff'
			}
    },
    }
  ],
  yAxis: [
    {
      type: 'value',
      min: 0,
      interval:10,
      axisLabel: {
        formatter: '{value}'
      }
    },
    // {
    //   type: 'value',
    //   name: legend[2],
    //   interval: 5,
    //   axisLabel: {
    //     formatter: '{value}'
    //   }
    // }
  ],
  series: [
    {
      barWidth:'18px',
      name: legend[0],
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value ;
        }
      },
      data: paymentMoney,
      itemStyle: {
            color: '#0f69ff'
        }
    },
    // {
    //   name:  legend[1],
    //   type: 'line',
    //   yAxisIndex: 1,
    //   tooltip: {
    //     valueFormatter: function (value) {
    //       return value;
    //     }
    //   },
    //   data: contractMoney,
     
    //   smooth:true,
    //   itemStyle: {
    //     normal: {
    //       color:'#ffa773', //折线点的颜色
    //       borderColor: '#fff', //拐点边框颜色
    //       borderWidth: 5, //拐点边框大小
    //     },
    //   },
    //   lineStyle: {
    //     color:'#ffa773', //折线的颜色
    //   },
    // }
  ]
})
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: 304px;
  margin: 10px 14px 0 16px;
  padding: 24px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>