<template>
  <view class="charts-box">
    <qiun-data-charts  type="column" :opts="opts" :chartData="chartData" :ontouch="true" :tooltipShow="false"  @getIndex="tap"/>
  </view>
</template>

<script>
import { ref } from "vue";
export default {
	props:['chartData'],
	data() {
		return {
		  opts: { },
		  
		};
	  },
	  setup(props,content) {
	  	const chartData = ref(props.chartData);
		const tap = (e)=>{
			const index = e.currentIndex.index;
			console.log(e)
			content.emit('getIndex',index)
		}
	  	return {chartData,tap}
	  },
  mounted() {
		this.opts = {
			color:['#5F83FF'],
			touchMoveLimit: 24,
			enableScroll: true,
			xAxis: {
				fontSize:10,
				scrollShow: true,
				itemCount: 12,
				format:'xAxisDemo3',
			},
			yAxis:{
				showTitle:true,
				data:[{
					title:'（分钟）',
					titleFontSize:10,
					titleOffsetY:-5
				}]
			},
			legend:{
				show:false
			},
			series:{
				
			},
			extra:{
				tootip:{
					showBox:false,
					showArrow:false
				},
				column:{
					barBorderRadius:[5,5,0,0],
					width: 15,
					activeBgColor:'#000',
					activeBgOpacity:0.05
				}
			}
		};
  },
  methods: {
	  
  }
};
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 100%;
    height: 600rpx;
  }
</style>