<script setup lang="ts">
import * as echarts from 'echarts'

const props = defineProps<{
  ecahrtsData: Object
}>()
// console.log(props.ecahrtsData,"56789")
const chartRef = ref()
onMounted(() => {
  echarts.init(chartRef.value).setOption({
    xAxis: {
    type: 'category',
    data: props.ecahrtsData.xAxis_data
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  yAxis: {
    type: 'value'
    },
    series: [
    {
      data: props.ecahrtsData.series_data,
      type: 'pictorialBar', // 象形柱图
      symbol: 'triangle', // 三角形
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: 'rgba(15,243,221,1)'
        }, {
          offset: 1, color: 'rgba(15,243,221,0)'
        }]
      },
    }
  ]
  })
})
</script>

<template>
  <div ref="chartRef" class="w-full h-full " />
</template>
