多彩柱状完成

This commit is contained in:
aixianling
2024-03-25 18:49:22 +08:00
parent 5273f300ea
commit 03cd857bf3
6 changed files with 63 additions and 5 deletions

View File

@@ -3,7 +3,7 @@
<ai-dialog-btn :modal="false" dialog-title="选择图表模板" :customFooter="false"
@confirm="handleConfirm" @open="handleOpenDialog">
<template #btn>
<img class="pointer" v-if="current.thumb" :src="current.thumb"/>
<img class="pointer thumb" v-if="current.thumb" :src="current.thumb"/>
<el-button v-else type="text">选择图表</el-button>
</template>
<div class="charts">
@@ -62,6 +62,11 @@ export default {
cursor: pointer;
}
.thumb {
width: 200px;
height: 90px;
}
.charts {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
@@ -74,6 +79,7 @@ export default {
& > img {
width: 100%;
height: 90px;
}
&.selected, &:hover {

View File

@@ -41,7 +41,7 @@
</config-item>
<template v-if="/Chart/.test(config.type)">
<config-item label="图表模板">
<chart-picker v-model="config.config" @input="v=>config.echartOps=$copy($echartTpls[v])"/>
<chart-picker v-model="config.config" @input="v=>config.echartOps=$echartTpls[v]"/>
</config-item>
<config-item label="图表配置项" top-label>
<json-editor v-model="config.echartOps"/>
@@ -101,7 +101,7 @@
<config-item label="表格行数" v-if="config.type !== 'AiDvTable'">
<el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"/>
</config-item>
<config-item v-if="config.type === 'AiDvTable'" v-for="(item, i) in config.config" :label="`第${i+1}列`">
<config-item v-if="config.type === 'AiDvTable'" v-for="(item, i) in config.config" :key="i" :label="`第${i+1}列`">
<el-select size="mini" style="width: 80px;" v-model="item.align" placeholder="请选择" clearable>
<el-option label="居中" value="center"></el-option>
<el-option label="居左" value="left"></el-option>

View File

@@ -163,7 +163,19 @@ export const chartTpl = [{
staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
config: 'barChart9',
dynamicData: []
}]
}, {
type: 'barChart10',
label: '柱状图8',
title: '柱状图8',
border: 'border13',
width: 500,
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar10.png',
height: 300,
dataType: 'staticData',
staticData: [{name: '阿斯达', v1: 23}, {name: '水电费', v1: 12}, {name: '凡哥', v1: 67}, {name: '党费', v1: 98}],
config: 'barChart10'
},
]
}, {
label: '折线图', type: 'line', list: [{
code: 'widget-linechart',