feat:组件添加网格线虚线设置

main
liu.shiyi 2 years ago
parent 70a9d7f290
commit bebac0a84b

@ -138,6 +138,12 @@
:active-value="1"
:inactive-value="0"
/>
<el-switch
v-else-if="setting.type === 'switchCustom'"
v-model="setting.value"
:active-value="setting.active"
:inactive-value="setting.inactive"
/>
<el-slider
v-else-if="setting.type === 'slider'"
v-model="setting.value"

@ -171,6 +171,17 @@ const setting = [
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
type: 'switchCustom',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
@ -457,7 +468,7 @@ const data = [
]
// 配置处理脚本
const optionHandler = ''
const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''
@ -549,6 +560,7 @@ const option = {
style: {
stroke: '#d0d0d0',
lineWidth: 1,
lineDash: [4, 5],
strokeOpacity: 0.7
}
}
@ -575,5 +587,6 @@ export default {
name,
option,
setting,
dataHandler
dataHandler,
optionHandler
}

@ -163,6 +163,17 @@ const setting = [
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
type: 'switchCustom',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
@ -446,6 +457,8 @@ const data = [
{ year: '1998', value: 9 },
{ year: '1999', value: 13 }
]
// 配置处理脚本
const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''
@ -534,6 +547,7 @@ const option = {
style: {
stroke: '#d0d0d0',
lineWidth: 1,
lineDash: [4, 5],
strokeOpacity: 0.7
}
}
@ -562,5 +576,6 @@ export default {
name,
option,
setting,
dataHandler
dataHandler,
optionHandler
}

@ -63,6 +63,17 @@ const setting = [
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
type: 'switchCustom',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
@ -349,7 +360,7 @@ const data = [
]
// 配置处理脚本
const optionHandler = ''
const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''
@ -415,6 +426,7 @@ const option = {
style: {
stroke: '#d0d0d0',
lineWidth: 1,
lineDash: [4, 5],
strokeOpacity: 0.7
}
}
@ -441,5 +453,6 @@ export default {
name,
option,
setting,
dataHandler
dataHandler,
optionHandler
}

@ -115,6 +115,17 @@ const setting = [
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
type: 'switchCustom',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
@ -552,7 +563,8 @@ const data = [
const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
'\n if (option.legendEnable) {\n' +
' option.legend.itemName = option.legendItemName\n' +
' }'
' };' +
'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''
@ -614,6 +626,7 @@ const option = {
style: {
stroke: '#d0d0d0',
lineWidth: 1,
lineDash: [4, 5],
strokeOpacity: 0.7
}
}

@ -79,6 +79,17 @@ const setting = [
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
type: 'switchCustom',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
@ -1246,7 +1257,8 @@ const data = [
const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
'\n if (option.legendEnable) {\n' +
' option.legend.itemName = option.legendItemName\n' +
' }'
' };' +
'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''
@ -1319,6 +1331,7 @@ const option = {
style: {
stroke: '#d0d0d0',
lineWidth: 1,
lineDash: [4, 5],
strokeOpacity: 0.7
}
}

@ -75,6 +75,17 @@ const setting = [
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
type: 'switchCustom',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
@ -441,7 +452,8 @@ const data = [
const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
'\n if (option.legendEnable) {\n' +
' option.legend.itemName = option.legendItemName\n' +
' }'
' };' +
'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''
@ -515,6 +527,7 @@ const option = {
style: {
stroke: '#d0d0d0',
lineWidth: 1,
lineDash: [4, 5],
strokeOpacity: 0.7
}
}

@ -131,6 +131,17 @@ const setting = [
step: 1
},
// 网格线 grid
{
label: '虚线',
type: 'switchCustom',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
@ -568,7 +579,8 @@ const data = [
const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
'\n if (option.legendEnable) {\n' +
' option.legend.itemName = option.legendItemName\n' +
' }'
' };' +
'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''
@ -630,6 +642,7 @@ const option = {
style: {
stroke: '#d0d0d0',
lineWidth: 1,
lineDash: [4, 5],
strokeOpacity: 0.7
}
}

@ -140,6 +140,17 @@ const setting = [
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
type: 'switchCustom',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
@ -530,7 +541,8 @@ const data = [
// 配置处理脚本
const optionHandler = '\noption.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
'\nconst radiusNum = setting.find(settingItem=>settingItem.field === \'radiusNum\').value; option.barStyle.radius = [radiusNum,radiusNum,0,0]'
'\nconst radiusNum = setting.find(settingItem=>settingItem.field === \'radiusNum\').value; option.barStyle.radius = [radiusNum,radiusNum,0,0];' +
'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''

@ -128,6 +128,17 @@ const setting = [
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
type: 'switchCustom',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
@ -472,7 +483,7 @@ const data = [
]
// 配置处理脚本
const optionHandler = ''
const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = 'const yFieldValue = setting.find(settingItem=>settingItem.field === \'yField\').value\n' +

@ -115,6 +115,17 @@ const setting = [
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
type: 'switchCustom',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
@ -473,7 +484,8 @@ const data = [
const optionHandler = ' option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;\n' +
' if (option.legendEnable) {\n' +
' option.legend.itemName = option.legendItemName\n' +
' }'
' };' +
'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''
@ -554,6 +566,7 @@ const option = {
style: {
stroke: '#d0d0d0',
lineWidth: 1,
lineDash: [4, 5],
strokeOpacity: 0.7
}
}

@ -115,6 +115,17 @@ const setting = [
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
type: 'switchCustom',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
@ -489,7 +500,8 @@ const data = [
const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
' if (option.legendEnable) {\n' +
' option.legend.itemName = option.legendItemName\n' +
' }'
' };' +
'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''
@ -579,6 +591,7 @@ const option = {
style: {
stroke: '#d0d0d0',
lineWidth: 1,
lineDash: [4, 5],
strokeOpacity: 0.7
}
}

@ -102,6 +102,17 @@ const setting = [
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
type: 'switchCustom',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
@ -407,6 +418,8 @@ const data = [
sales: 38
}
]
// 配置处理脚本
const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''
@ -480,6 +493,7 @@ const option = {
style: {
stroke: '#d0d0d0',
lineWidth: 1,
lineDash: [4, 5],
strokeOpacity: 0.7
}
}
@ -529,5 +543,6 @@ export default {
name,
option,
setting,
dataHandler
dataHandler,
optionHandler
}

@ -115,6 +115,17 @@ const setting = [
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
type: 'switchCustom',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
@ -475,7 +486,8 @@ const data = [
const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
' if (option.legendEnable) {\n' +
' option.legend.itemName = option.legendItemName\n' +
' }'
' };' +
'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''
@ -562,6 +574,7 @@ const option = {
style: {
stroke: '#d0d0d0',
lineWidth: 1,
lineDash: [4, 5],
strokeOpacity: 0.7
}
}

@ -176,6 +176,17 @@ const setting = [
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
type: 'switchCustom',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
@ -469,7 +480,8 @@ const optionHandler = ' let pointEnable = setting.find(settingItem=>settingItem
' option.point = {shape: pointEnable}\n' +
' let pointColor = setting.find(settingItem=>settingItem.field === \'point_color\').value\n' +
' option.point.color = pointColor\n' +
' }'
' };' +
'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''
@ -548,6 +560,7 @@ const option = {
style: {
stroke: '#d0d0d0',
lineWidth: 1,
lineDash: [4, 5],
strokeOpacity: 0.7
}
}

@ -80,6 +80,17 @@ const setting = [
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
type: 'switchCustom',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
@ -571,7 +582,8 @@ const data = [
const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
'\n if (option.legendEnable) {\n' +
' option.legend.itemName = option.legendItemName\n' +
' }'
' };' +
'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''
@ -646,6 +658,7 @@ const option = {
style: {
stroke: '#d0d0d0',
lineWidth: 1,
lineDash: [4, 5],
strokeOpacity: 0.7
}
}

@ -91,6 +91,17 @@ const setting = [
},
// 网格线 grid
{
label: '虚线',
type: 'switchCustom',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
@ -451,7 +462,7 @@ const data = [
{ Date: '2017-01', scales: 145 },
{ Date: '2017-02', scales: 207 }
]
const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''
@ -519,6 +530,7 @@ const option = {
style: {
stroke: '#d0d0d0',
lineWidth: 1,
lineDash: [4, 5],
strokeOpacity: 0.7
}
}
@ -549,5 +561,6 @@ export default {
name,
option,
setting,
dataHandler
dataHandler,
optionHandler
}

Loading…
Cancel
Save