<template>
	<view class="charts-box">
	<qiun-data-charts 
	      type="bar"
	      :opts="opts"
	      :chartData="chartData"
		  :canvas2d="true"
	    />
	</view>	
</template>

<script lang="ts" setup>
	import { reactive, ref, watch } from 'vue';
	
	const props = defineProps<{
		chartData?:''
	}>()

	const chartData = ref({})
	
	const opts = reactive({
		color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
		        padding: [15,30,0,5],
		        enableScroll: false,
		        legend: {},
		        xAxis: {
		          boundaryGap: "justify",
		          disableGrid: false,
		          min: 0,
				  // max:10,
		          axisLine: false,
		        },
		        yAxis: {},
		        extra: {
		          bar: {
		            type: "stack",
		            width: 15,
		            meterBorde: 1,
		            meterFillColor: "#FFFFFF",
		            activeBgColor: "#000000",
		            activeBgOpacity: 0.08,
		            categoryGap: 3
		          }
		        }
	})
	watch(
		() => props.chartData,
		(val) => {
			chartData.value = val
		}
	)
</script>

<style>
</style>