55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
|
<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>
|