<template>
	<qiun-data-charts 
	    type="column"
	    :opts="opts"
	    :chartData="chartData"
		:canvas2d="true"
	    :ontouch="true"
	/>
</template>

<script lang="ts" setup>
	import { reactive, ref, watch } from 'vue';
	import QiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';

	const props = defineProps<{
		type?:'',
		chartData?:''
	}>()
	
	const chartData = ref({})
	
	const opts = reactive({
			color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
	        padding: [15,15,0,5],
	        touchMoveLimit: 24,
	        enableScroll: false,
			tooltipShow: true,
	        legend: {},
	        xAxis: {
	            disableGrid: true,
	            scrollShow: true,
	            itemCount: 4
	        },
	        yAxis: {
				// disableGrid:true,
	            data: [
	             {
	                 min: 0,
					 // tofix:0
	             }
	            ]
	         },
	        extra: {
	            column: {
					type: props.type,
	                width: 18,
	                activeBgColor: "#000000",
					linearOpacity: 0.9,
					barBorderCircle: true,
	                activeBgOpacity: 0.08,
					seriesGap: 5,
					linearType:"opacity",
					customColor: ["#FA7D8D","#EB88E2"]
	            },
	        }
	  })
	  watch(
		() => props.chartData,
		(val) => {
			chartData.value = val
		}
	  )
</script>

<style>
</style>