66 lines
1.4 KiB
Vue
66 lines
1.4 KiB
Vue
|
<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>
|