vue - 动态统计
vue - 动态统计
intro
- 需求
更具不同配置显示不同统计效果和数据
组件
宽高
组件宽高自行通过盒子实现，项目使用动态布局组件，可从首页导航
列
滚动
尽量避免滚动或自行调整滚动样式
代码及说明
{{ data.stage }}
{{ m.amount }}
{{ m.label }}
{{ v.amount }}
{{ v.label }}
{{ m.amount }}
{{ m.label }}
数据结构
calcList: [
{
showHeader: false,
calcHeight: '32%',
width: 0.5,
data: {
color: '#508AFF',
stage: '立案准备阶段',
list: [
{
label: '待提交审批',
amount: 4215,
point: true, // 重点，图上主题色显示
},
{
label: '待审批',
amount: 4215,
},
{
label: '待申请',
amount: 4215,
point: true, // 重点，图上主题色显示
},
{
label: '已撤销',
amount: 800,
},
],
},
},
{
showHeader: false,
calcHeight: '32%',
width: 0.25,
data: {
color: '#508AFF',
stage: '立案阶段',
list: [
{
label: '待立案',
amount: 6165,
children: [
{
label: '待提交立案审批',
amount: 4215,
},
{
label: '待审批',
amount: 1950,
},
],
},
{
col: true,
label: '待交诉讼费',
amount: 4215,
point: true, // 重点，图上主题色显示
},
{
col: true,
label: '已交诉讼费',
amount: 2800,
},
{
col: true,
label: '已撤回',
amount: 800,
},
{
label: '待立案',
amount: 6165,
children: [
{
label: '待提交立案审批',
amount: 4215,
},
{
label: '待审批',
amount: 1950,
},
],
},
{
col: true,
label: '待交诉讼费',
amount: 4215,
point: true, // 重点，图上主题色显示
},
{
col: true,
label: '已交诉讼费',
amount: 2800,
},
{
col: true,
label: '已撤回',
amount: 800,
},
],
},
},
{
showHeader: false,
calcHeight: '32%',
width: 0.25,
data: {
color: '#F26222',
stage: '庭审准备阶段',
list: [
{
label: '待撤诉处理',
amount: 2150,
},
{
label: '待排期',
amount: 4215,
},
{
label: '待开庭',
amount: 2000,
},
],
},
},
{
showHeader: false,
calcHeight: '32%',
width: 0.25,
data: {
color: '#705AE8',
stage: '庭审阶段',
list: [
{
label: '开庭中',
amount: 8045,
children: [
{
label: '被告到庭',
amount: 4645,
},
{
label: '被告不到庭',
amount: 3400,
},
],
},
],
},
},
{
showHeader: false,
calcHeight: '32%',
width: 0.25,
data: {
color: '#F26222',
stage: '裁判阶段',
list: [
{
label: '当庭宣判',
amount: 960,
point: true, // 重点，图上主题色显示
},
{
label: '非当庭宣判',
amount: 4760,
},
],
},
},
{
showHeader: false,
calcHeight: '32%',
width: 0.5,
data: {
color: '#E23E6A',
stage: '结案阶段',
list: [
{
label: '待结案',
amount: 2760,
point: true, // 重点，图上主题色显示
},
{
label: '已结案',
amount: 8430,
children: [
{
label: '待归档',
amount: 1200,
},
{
label: '已归档',
amount: 2000,
point: true, // 重点，图上主题色显示
},
],
},
{
label: '已生效',
amount: 12645,
children: [
{
label: '待申请执行',
amount: 2500,
point: true, // 重点，图上主题色显示
},
{
label: '已申请执行',
amount: 2500,
point: true, // 重点，图上主题色显示
},
],
},
{
label: '已归集材料',
amount: 2760,
point: true, // 重点，图上主题色显示
},
],
},
},
{
showHeader: false,
calcHeight: '32%',
width: 1,
data: {
color: '#508AFF',
stage: '送达汇总',
list: [
{
label: '已分案-立案文书',
amount: 12215,
children: [
{
label: '待送达',
amount: 2000,
},
{
label: '待交公告费',
amount: 4215,
point: true, // 重点，图上主题色显示
},
{
label: '送达中',
amount: 2000,
},
{
label: '已送达',
amount: 2000,
},
{
label: '送达退回',
amount: 2000,
},
],
},
{
label: '待开庭-开庭文书',
amount: 11815,
children: [
{
label: '待送达',
amount: 2000,
},
{
label: '待交公告费',
amount: 4215,
point: true, // 重点，图上主题色显示
},
{
label: '送达中',
amount: 2000,
},
{
label: '已送达',
amount: 2000,
},
{
label: '送达退回',
amount: 2000,
},
],
},
{
label: '待结案-裁判文书',
amount: 12645,
children: [
{
label: '待送达',
amount: 2000,
},
{
label: '待交公告费',
amount: 4215,
point: true, // 重点，图上主题色显示
},
{
label: '送达中',
amount: 2000,
},
{
label: '已送达',
amount: 2000,
},
{
label: '送达退回',
amount: 2000,
},
],
},
],
},
},
],