31 changed files with 366 additions and 238 deletions
@ -1,34 +1,88 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div class="w-[500px] h-[300px]"> |
||||
<q-btn label="弹出" @click="click"></q-btn> |
<w-echarts |
||||
<w-drawer |
:option="{ |
||||
ref="drawerRef" |
title: { |
||||
title="xxx" |
left: 'center', |
||||
:maximized="false" |
text: '资产余额', |
||||
:buttons="[ |
|
||||
{ |
|
||||
label: '测试', |
|
||||
}, |
}, |
||||
]" |
tooltip: { |
||||
> |
trigger: 'axis', |
||||
1111 |
axisPointer: { |
||||
<template #buttons> <q-btn label="xxx"></q-btn> </template> |
type: 'shadow', |
||||
</w-drawer> |
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
dataZoom: [ |
||||
|
{ |
||||
|
type: 'slider', |
||||
|
show: true, // 是否显示滚动条 |
||||
|
borderColor: '#2563eb', // 边框颜色 |
||||
|
showDetail: false, // 是否显示detail，即拖拽时显示详细数值信息 |
||||
|
startValue: 0, // 开始数值 |
||||
|
endValue: 10, // 结束数值 |
||||
|
filterMode: 'empty', |
||||
|
width: '80%', // 滚动条宽度 |
||||
|
height: 8, // 滚动条高度 |
||||
|
left: 'center', // 居中显示 |
||||
|
zoomLoxk: true, // 是否锁定选择区域的大小 |
||||
|
handleSize: 0, // 控制手柄的尺寸 |
||||
|
bottom: 0, // 距离容器下侧的距离 |
||||
|
}, |
||||
|
{ |
||||
|
type: 'inside', |
||||
|
zoomOnMouseWheel: false, // 滚动不触发缩放 |
||||
|
moveOnMouseMove: true, // 鼠标移动触发平移 |
||||
|
moveOnMouseWheel: true, // 鼠标滚动触发平移 |
||||
|
}, |
||||
|
], |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: [ |
||||
|
'黄浦支行', |
||||
|
'徐汇支行', |
||||
|
'长宁支行', |
||||
|
'静安支行', |
||||
|
'普陀支行', |
||||
|
'虹口支行', |
||||
|
'杨浦支行', |
||||
|
'浦东支行', |
||||
|
'闵行支行', |
||||
|
'宝山支行', |
||||
|
'嘉定支行', |
||||
|
'金山支行', |
||||
|
'松江支行', |
||||
|
'青浦支行', |
||||
|
'奉贤支行', |
||||
|
'崇明支行', |
||||
|
], |
||||
|
axisTick: { |
||||
|
alignWithLabel: true, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '单位：万元', |
||||
|
}, |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'bar', |
||||
|
barWidth: '10%', |
||||
|
data: [1700, 1600, 1500, 1400, 1300, 1200, 1100, 1000, 900, 800, 600, 500, 400, 300, 200, 100], |
||||
|
}, |
||||
|
], |
||||
|
}" |
||||
|
></w-echarts> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
<script setup lang="ts"> |
|
||||
import { ref, reactive, onMounted } from 'vue'; |
|
||||
import { IconEnum } from '@/platform/enums'; |
|
||||
|
|
||||
const drawerRef = ref(); |
|
||||
|
|
||||
const aa = ref(50); |
|
||||
const aaaaa = (e) => { |
|
||||
console.info('dddddddddddddd', e); |
|
||||
}; |
|
||||
const click = () => { |
|
||||
drawerRef.value.show(); |
|
||||
}; |
|
||||
|
|
||||
onMounted(() => {}); |
<script setup lang="ts"></script> |
||||
</script> |
|
||||
|
|||||
Loading…
Reference in new issue