<template>
    <div>
        <div ref="assetEchart" class="asset_echart"></div>
    </div>
</template>
<script setup>
import { init } from 'echarts';
import { reactive, ref, onMounted } from 'vue';
const assetEchart = ref(null);
let { data:{xData,legend,yData:{contractCount,paymentMoney,contractMoney}} } = defineProps(['data'])
let options = reactive( {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    data: legend
  },
  grid:{
    left:"1%",
    right:"9%",
    bottom:"1%",
    containLabel:true,
  },
  xAxis: [
    {
      type: 'category',
      data: xData,
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: legend[0],
      min: 0,
      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: contractMoney,
      itemStyle: {
            color: '#4892ff'
        }
    },
    {
      barWidth:'18px',
      name: legend[1],
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value ;
        }
      },
      data:paymentMoney,
      itemStyle: {
            color: '#04c090'
        }
    },
    {
      name:  legend[2],
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: contractCount,
      smooth:true,
      itemStyle: {
        normal: {
          color:'#ffa773', //折线点的颜色
          borderColor: '#fff', //拐点边框颜色
          borderWidth: 5, //拐点边框大小
        },
      },
      lineStyle: {
        color:'#ffa773', //折线的颜色
      },
    }
  ]
})
onMounted(() => {
  const chart = init(assetEchart.value);
  chart.setOption(options);
  window.addEventListener('resize', () => {
    chart.resize()
  })
})
</script>

<style lang="scss" scoped>
.asset_echart {
    width: 1200px;
    height: 284px;
    margin: 10px 14px 0 6px;
    padding: 24px;
    &_echart {
        width: 100%;
        height: 100%;
    }
}
</style>