tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 3D分组柱状图添加右侧配置项

Browse Source
main
zhu.yawen 2 years ago
parent f31c729569
commit 5044e34670
3 changed files with 519 additions and 93 deletions
Show Stats Download Patch File Download Diff File

574
data-room-ui/packages/Echarts/3D图/3D分组柱状图.js
Unescape Escape View File

@ -39,58 +39,437 @@ const setting = [
tabName: 'data'
},
{
label: '柱子顶部颜色',
type: 'colorPicker', // 设置组件类型
field: 'seriesCustom_barTopColor', // 字段
optionField: 'seriesCustom.barTopColor', // 对应options中的字段
value: '#2DB1EF',
label: '柱子宽度',
type: 'inputNumber', // 设置组件类型
field: 'seriesCustom_barWidth', // 字段
optionField: 'seriesCustom.barWidth', // 对应options中的字段
value: 20,
tabName: 'custom',
groupName: 'graph'
},
// {
// label: '柱子顶部颜色',
// type: 'colorPicker', // 设置组件类型
// field: 'seriesCustom_barTopColor', // 字段
// optionField: 'seriesCustom.barTopColor', // 对应options中的字段
// value: '#2DB1EF',
// tabName: 'custom',
// groupName: 'graph'
// },
// {
// label: '柱子颜色1',
// type: 'colorPicker', // 设置组件类型
// field: 'seriesCustom_barColor1', // 字段
// optionField: 'seriesCustom.barColor1', // 对应options中的字段
// value: '#115ba6',
// tabName: 'custom',
// groupName: 'graph'
// },
// {
// label: '柱子颜色2',
// type: 'colorPicker', // 设置组件类型
// field: 'seriesCustom_barColor2', // 字段
// optionField: 'seriesCustom.barColor2', // 对应options中的字段
// value: '#1db0dd',
// tabName: 'custom',
// groupName: 'graph'
// },
// {
// label: '柱子底部颜色',
// type: 'colorPicker', // 设置组件类型
// field: 'seriesCustom_barBottomColor', // 字段
// optionField: 'seriesCustom.barBottomColor', // 对应options中的字段
// value: '#187dcb',
// tabName: 'custom',
// groupName: 'graph'
// },
// {
// label: '柱子背景顶部颜色',
// type: 'colorPicker', // 设置组件类型
// field: 'seriesCustom_shadowTopColor', // 字段
// optionField: 'seriesCustom.shadowTopColor', // 对应options中的字段
// value: '#142f5a',
// tabName: 'custom',
// groupName: 'graph'
// },
// {
// label: '柱子背景颜色',
// type: 'colorPicker', // 设置组件类型
// field: 'seriesCustom_shadowColor', // 字段
// optionField: 'seriesCustom.shadowColor', // 对应options中的字段
// value: '#041133',
// tabName: 'custom',
// groupName: 'graph'
// },
{
label: '柱子颜色1',
type: 'colorPicker', // 设置组件类型
field: 'seriesCustom_barColor1', // 字段
optionField: 'seriesCustom.barColor1', // 对应options中的字段
value: '#115ba6',
label: '数据标签',
type: 'switch', // 设置组件类型
field: 'series_barColor_label_show', // 字段
optionField: 'series.barColor.label.show', // 对应options中的字段
value: 0,
active: 1,
inactive: 0,
tabName: 'custom',
groupName: 'graph'
},
{
label: '柱子颜色2',
type: 'colorPicker', // 设置组件类型
field: 'seriesCustom_barColor2', // 字段
optionField: 'seriesCustom.barColor2', // 对应options中的字段
value: '#1db0dd',
label: '数据标签位置',
type: 'select', // 设置组件类型
field: 'series_barColor_label_position', // 字段
optionField: 'series.barColor.label.position', // 对应options中的字段
// 是否多选
multiple: false,
value: 'inside',
tabName: 'custom',
options: [
{
label: '顶部',
value: 'top'
},
{
label: '居中',
value: 'inside'
},
{
label: '底部',
value: 'bottom'
}
],
groupName: 'graph'
},
{
label: '柱子底部颜色',
label: '数据标签颜色',
type: 'colorPicker', // 设置组件类型
field: 'seriesCustom_barBottomColor', // 字段
optionField: 'seriesCustom.barBottomColor', // 对应options中的字段
value: '#187dcb',
field: 'series_barColor_label_color', // 字段
optionField: 'series.barColor.label.color', // 对应options中的字段
value: '#ffffff',
tabName: 'custom',
groupName: 'graph'
},
{
label: '柱子背景顶部颜色',
type: 'colorPicker', // 设置组件类型
field: 'seriesCustom_shadowTopColor', // 字段
optionField: 'seriesCustom.shadowTopColor', // 对应options中的字段
value: '#142f5a',
label: '数据标签大小',
// 设置组件类型
type: 'inputNumber',
// 字段
field: 'series_barColor_label_fontSize',
// 对应options中的字段
optionField: 'series.barColor.label.fontSize',
value: 12,
tabName: 'custom',
groupName: 'graph'
},
// 网格线
{
label: '柱子背景颜色',
type: 'colorPicker', // 设置组件类型
field: 'seriesCustom_shadowColor', // 字段
optionField: 'seriesCustom.shadowColor', // 对应options中的字段
value: '#041133',
label: '分隔线',
type: 'switch',
field: 'yAxis_splitLine_show',
optionField: 'yAxis.splitLine.show',
value: 0,
active: 1,
inactive: 0,
tabName: 'custom',
groupName: 'graph'
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
field: 'yAxis_splitLine_lineStyle_width',
optionField: 'yAxis.splitLine.lineStyle.width',
value: 1,
tabName: 'custom',
groupName: 'grid'
},
{
label: '颜色',
type: 'colorPicker',
field: 'yAxis_splitLine_lineStyle_color',
optionField: 'yAxis.splitLine.lineStyle.color',
value: '#fff',
tabName: 'custom',
groupName: 'grid'
},
// x轴 xAxis
{
label: '显示',
type: 'switch',
field: 'xAxis_show',
optionField: 'xAxis.show',
value: 0,
active: 1,
inactive: 0,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '轴线显示',
type: 'switch',
field: 'xAxis_axisLine_show',
optionField: 'xAxis.axisLine.show',
value: 0,
active: 1,
inactive: 0,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '轴线颜色',
type: 'colorPicker',
field: 'xAxis_axisLine_lineStyle_color',
optionField: 'xAxis.axisLine.lineStyle.color',
// 是否多选
multiple: false,
value: '#333',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签显示',
type: 'switch',
field: 'xAxis_axisLabel_show',
optionField: 'xAxis.axisLabel.show',
value: 1,
active: 1,
inactive: 0,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签颜色',
type: 'colorPicker',
field: 'xAxis_axisLabel_textStyle_color',
optionField: 'xAxis.axisLabel.textStyle.color',
// 是否多选
multiple: false,
value: '#8C8C8C',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签大小',
type: 'inputNumber',
field: 'xAxis_axisLabel_textStyle_fontSize',
optionField: 'xAxis.axisLabel.textStyle.fontSize',
value: 14,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签距离',
type: 'inputNumber',
field: 'xAxis_axisLabel_margin',
optionField: 'xAxis.axisLabel.margin',
value: 30,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标题',
type: 'input',
field: 'xAxis_name',
optionField: 'xAxis.name',
value: '',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标题颜色',
type: 'colorPicker',
field: 'xAxis_nameTextStyle_color',
optionField: 'xAxis.nameTextStyle.color',
// 是否多选
multiple: false,
value: '#8C8C8C',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标题大小',
type: 'inputNumber',
field: 'xAxis_nameTextStyle_fontSize',
optionField: 'xAxis.nameTextStyle.fontSize',
value: 12,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标题位置',
type: 'select',
field: 'xAxis_nameLocation',
optionField: 'xAxis.nameLocation',
value: 'start',
tabName: 'custom',
options: [
{
label: '左',
value: 'start'
},
{
label: '中',
value: 'center'
},
{
label: '右',
value: 'end'
}],
groupName: 'xAxis'
},
// Y轴 yAxis
{
label: '显示',
type: 'switch',
field: 'yAxis_show',
optionField: 'yAxis.show',
value: 1,
active: 1,
inactive: 0,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '轴线显示',
type: 'switch',
field: 'yAxis_axisLine_show',
optionField: 'yAxis.axisLine.show',
value: 1,
active: 1,
inactive: 0,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '轴线颜色',
type: 'colorPicker',
field: 'yAxis_axisLine_lineStyle_color',
optionField: 'yAxis.axisLine.lineStyle.color',
// 是否多选
multiple: false,
value: '#333',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '刻度显示',
type: 'switch',
field: 'yAxis_axisTick_show',
optionField: 'yAxis.axisTick.show',
value: 1,
active: 1,
inactive: 0,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '刻度颜色',
type: 'colorPicker',
field: 'yAxis_axisTick_lineStyle_color',
optionField: 'yAxis.axisTick.lineStyle.color',
// 是否多选
multiple: false,
value: '#fff',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '刻度宽度',
type: 'inputNumber',
field: 'yAxis_axisTick_lineStyle_width',
optionField: 'yAxis.axisTick.lineStyle.width',
// 是否多选
multiple: false,
value: 1,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签显示',
type: 'switch',
field: 'yAxis_axisLabel_show',
optionField: 'yAxis.axisLabel.show',
value: 1,
active: 1,
inactive: 0,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签颜色',
type: 'colorPicker',
field: 'yAxis_axisLabel_textStyle_color',
optionField: 'yAxis.axisLabel.textStyle.color',
// 是否多选
multiple: false,
value: '#8C8C8C',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签大小',
type: 'inputNumber',
field: 'yAxis_axisLabel_textStyle_fontSize',
optionField: 'yAxis.axisLabel.textStyle.fontSize',
value: 14,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签距离',
type: 'inputNumber',
field: 'yAxis_axisLabel_margin',
optionField: 'yAxis.axisLabel.margin',
value: 10,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标题',
type: 'input',
field: 'yAxis_name',
optionField: 'yAxis.name',
value: '',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标题颜色',
type: 'colorPicker',
field: 'yAxis_nameTextStyle_color',
optionField: 'yAxis.nameTextStyle.color',
// 是否多选
multiple: false,
value: '#8C8C8C',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标题大小',
type: 'inputNumber',
field: 'yAxis_nameTextStyle_fontSize',
optionField: 'yAxis.nameTextStyle.fontSize',
value: 12,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标题位置',
type: 'select',
field: 'yAxis_nameLocation',
optionField: 'yAxis.nameLocation',
value: 'end',
tabName: 'custom',
options: [
{
label: '下',
value: 'start'
},
{
label: '中',
value: 'center'
},
{
label: '上',
value: 'end'
}],
groupName: 'yAxis'
}
]
@ -100,7 +479,6 @@ const optionHandler = ''
// 数据处理脚本
const dataHandler = ''
// 图表配置 new Line('domName', option)
const xData = ['本年话务总量', '本年人工话务量', '每万客户呼入量', '每万客户呼入量'
]
const yData1 = [300, 1230, 425, 1200]
@ -122,7 +500,7 @@ const option = {
},
graphic: {
type: 'group',
bottom: '8%',
bottom: '5%',
left: '10%',
z: 100,
children: [
@ -131,7 +509,7 @@ const option = {
left: 0,
bottom: 0,
shape: {
width: 400,
width: 418 * 0.9,
height: 10
},
style: {
@ -144,7 +522,7 @@ const option = {
bottom: 10,
shape: {
// 左上、右上、右下、左下
points: [[40, -50], [360, -50], [400, 0], [0, 0]]
points: [[418 / 10, -320 / 6], [418 - 418 / 6, -320 / 6], [418 * 0.9, 0], [0, 0]]
},
style: {
fill: '#303256'
@ -154,23 +532,30 @@ const option = {
},
xAxis: [
{
show: true,
name: '',
type: 'category',
data: xData,
// 坐标轴刻度设置:x轴数据展示
nameTextStyle: {
color: '',
fontSize: 12
},
nameLocation: '',
// 坐标轴刻度设置
axisTick: {
show: true,
show: false,
alignWithLabel: true
},
// 横坐标颜色
nameTextStyle: {
color: '#82b0ec'
},
// 是否显示坐标轴的轴线
axisLine: {
show: false
show: false,
lineStyle: {
color: '#333'
}
},
// 坐标轴刻度标签
axisLabel: {
show: true,
textStyle: {
fontSize: 10,
color: 'rgb(40, 129, 170)'
@ -179,6 +564,7 @@ const option = {
}
},
{
show: false,
type: 'category',
axisLine: {
show: false
@ -198,36 +584,62 @@ const option = {
data: xData
}
],
yAxis: [
{
show: true, // y轴文本标签显示
type: 'value',
axisLabel: {
textStyle: {
color: 'rgb(40, 129, 170)'
}
},
// 分隔线
splitLine: {
show: false // yAxis.show配置为true时，该配置才有效
yAxis: {
name: '',
nameTextStyle: {
color: '',
fontSize: 12
},
nameLocation: 'end',
show: true,
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 12
},
// y轴轴线是否显示
axisLine: {
show: true
margin: 10
},
axisTick: {
show: true,
lineStyle: {
color: '#fff',
width: 1
}
},
// 分隔线
splitLine: {
show: false, // yAxis.show配置为true时，该配置才有效
lineStyle: {
color: '#fff',
width: 1
}
},
// y轴轴线是否显示
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
}
],
},
seriesCustom: {
barTopColor: '#2DB1EF',
barBottomColor: '#187dcb',
barColor1: '#115ba6',
barColor2: '#1db0dd',
shadowColor: '#041133',
shadowTopColor: '#142f5a'
barWidth: 30,
// 顶部菱形颜色
barTopColor: ['#2DB1EF'],
// 底部菱形颜色
barBottomColor: ['#187dcb'],
// 柱子颜色
barColor: ['#1db0dd'],
// 阴影柱子颜色
shadowColor: ['#041133'],
// 阴影柱子顶部颜色
shadowTopColor: ['#142f5a']
},
series: [
{
name: 'y1柱子顶部',
id: 'barTopColor1',
type: 'pictorialBar',
tooltip: { show: false },
symbol: 'diamond',
@ -240,7 +652,7 @@ const option = {
data: yData1
},
{
name: 'y2柱子顶部',
id: 'barTopColor2',
type: 'pictorialBar',
tooltip: { show: false },
symbol: 'diamond',
@ -253,10 +665,10 @@ const option = {
data: yData2
},
{
name: 'y1',
id: ' barColor1',
type: 'bar',
barGap: '20%',
30: 30,
barWidth: 30,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -275,17 +687,19 @@ const option = {
}
},
label: {
show: false
show: true,
position: 'inside',
color: '#fff'
},
zlevel: 2,
z: 12,
data: yData1
},
{
name: 'y2',
id: 'barColor2',
type: 'bar',
// barGap: '60%',
30: 30,
barWidth: 30,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -304,14 +718,16 @@ const option = {
}
},
label: {
show: false
show: true,
position: 'inside',
color: '#fff'
},
zlevel: 2,
z: 12,
data: yData2
},
{
name: 'y1柱子底部',
id: 'barBottomColor1',
type: 'pictorialBar',
tooltip: { show: false },
symbol: 'diamond',
@ -323,7 +739,7 @@ const option = {
data: yData1
},
{
name: 'y2柱子底部',
id: 'barBottomColor2',
type: 'pictorialBar',
tooltip: { show: false },
symbol: 'diamond',
@ -335,14 +751,14 @@ const option = {
data: yData2
},
{
name: '背景柱子1',
id: 'shadowColor1',
type: 'bar',
tooltip: { show: false },
xAxisIndex: 1,
barGap: '20%',
data: maxData1,
zlevel: 1,
30: 30,
barWidth: 30,
itemStyle: {
normal: {
color: 'rgba(9, 44, 76,.8)'
@ -350,14 +766,14 @@ const option = {
}
},
{
name: '背景柱子2',
id: 'shadowColor2',
type: 'bar',
tooltip: { show: false },
xAxisIndex: 1,
barGap: '20%',
data: maxData2,
zlevel: 1,
30: 30,
barWidth: 30,
itemStyle: {
normal: {
color: 'rgba(16, 56, 70,.8)'
@ -365,7 +781,7 @@ const option = {
}
},
{
name: 'y1背景柱子顶部',
id: 'shadowTopColor1',
type: 'pictorialBar',
tooltip: { show: false },
symbol: 'diamond',
@ -378,7 +794,7 @@ const option = {
data: maxData1
},
{
name: 'y2背景柱子顶部',
id: 'shadowTopColor2',
type: 'pictorialBar',
tooltip: { show: false },
symbol: 'diamond',

2
data-room-ui/packages/Echarts/3D图/3D基础柱状图.js
Unescape Escape View File

@ -86,7 +86,7 @@ const setting = [
type: 'switch', // 设置组件类型
field: 'series_barColor_label_show', // 字段
optionField: 'series.barColor.label.show', // 对应options中的字段
value: 0,
value: 1,
active: 1,
inactive: 0,
tabName: 'custom',

36
data-room-ui/packages/EchartsRender/index.vue
Unescape Escape View File

@ -195,29 +195,39 @@ export default {
}
})
} else if (optionField[0] === 'series') {
// 存储要修改的series对象
let changeObject = {}
// 存储改变后的series对象
let changedObject = {}
let changeObject = []
let beforeChange = []
// 如果要配置数据标签相关信息
optionField.forEach((field, index) => {
if (index === 0) {
option = option[field]
} else if (index === 1) {
// 根据id找到对应的type
changeObject = option.find(obj => obj.id === field)
changedObject = changeObject
option = option.filter(obj => obj.id !== field)
// 筛选出需要修改的series对象
changeObject = option.filter(item => item.id.includes(field))
beforeChange = [...changeObject]
option = option.filter(item => !(item.id.includes(field)))
} else if (index === optionField.length - 1) {
// 数据配置时，必须有值才更新
if ((set.tabName === type && type === 'data' && set.value) || (set.tabName === type && type === 'custom')) {
changeObject[field] = set.value
changeObject.map(item => {
item[field] = set.value
})
}
} else {
changeObject = changeObject[field]
const changeResult = []
changeObject.forEach(item => {
const result = { ...item[field] }
changeResult.push(result)
})
changeObject = [...changeResult]
}
})
changeObject = { ...changeObject, ...changedObject }
option.push(changeObject)
// 合并修改后的series对象
changeObject.forEach(
(item, index) => {
beforeChange[index].label = _.cloneDeep(item)
option.push(beforeChange[index])
}
)
} else {
optionField.forEach((field, index) => {
if (index === optionField.length - 1) {

Write Preview
Loading…
Cancel
Save