59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div ref="chartRef" :style="{ height, width }"></div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { onMounted, ref, Ref } from 'vue';
|
||
|
|
import { useECharts } from '/@/hooks/web/useECharts';
|
||
|
|
import { basicProps } from './props';
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
...basicProps,
|
||
|
|
});
|
||
|
|
|
||
|
|
const chartRef = ref<HTMLDivElement | null>(null);
|
||
|
|
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||
|
|
onMounted(() => {
|
||
|
|
setOptions({
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
lineStyle: {
|
||
|
|
width: 1,
|
||
|
|
color: '#019680',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: [
|
||
|
|
'1月',
|
||
|
|
'2月',
|
||
|
|
'3月',
|
||
|
|
'4月',
|
||
|
|
'5月',
|
||
|
|
'6月',
|
||
|
|
'7月',
|
||
|
|
'8月',
|
||
|
|
'9月',
|
||
|
|
'10月',
|
||
|
|
'11月',
|
||
|
|
'12月',
|
||
|
|
],
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
max: 8000,
|
||
|
|
splitNumber: 4,
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
|
||
|
|
type: 'bar',
|
||
|
|
barMaxWidth: 80,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|