ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WidgetGradientColorBarchart

Browse Source
Raod 3 years ago
parent 813f36619c
commit fee68de551
2 changed files with 208 additions and 384 deletions
Show Stats Download Patch File Download Diff File

550
report-ui/src/views/report/bigscreen/designer/tools.js
Unescape Escape View File

@ -1506,14 +1506,6 @@ const widgetTools = [
placeholder: '', placeholder: '',
value: '柱状图', value: '柱状图',
}, },
{
type: 'el-switch',
label: '竖展示',
name: 'verticalShow',
required: false,
placeholder: '',
value: false,
},
{ {
type: 'vue-color', type: 'vue-color',
label: '背景颜色', label: '背景颜色',
@ -1523,35 +1515,6 @@ const widgetTools = [
value: '' value: ''
}, },
[ [
// {
// name: '柱体设置',
// list: [
// {
// type: 'el-slider',
// label: '最大宽度',
// name: 'maxWidth',
// required: false,
// placeholder: '',
// value: 10,
// },
// {
// type: 'el-slider',
// label: '圆角',
// name: 'radius',
// require: false,
// placeholder: '',
// value: 5,
// },
// {
// type: 'el-slider',
// label: '最小高度',
// name: 'minHeight',
// require: false,
// placeholder: '',
// value: 0,
// },
// ],
// },
{ {
name: '标题设置', name: '标题设置',
list: [ list: [
@ -1654,325 +1617,200 @@ const widgetTools = [
}, },
], ],
}, },
// { {
// name: 'X轴设置', name: 'X轴设置',
// list: [ list: [
// { {
// type: 'el-input-text', type: 'el-input-text',
// label: '名称', label: '名称',
// name: 'xName', name: 'xName',
// required: false, required: false,
// placeholder: '', placeholder: '',
// value: '' value: ''
// }, },
// { {
// type: 'el-switch', type: 'el-switch',
// label: '显示', label: '显示',
// name: 'hideX', name: 'hideX',
// required: false, required: false,
// placeholder: '', placeholder: '',
// value: true, value: true,
// }, },
// { {
// type: 'vue-color', type: 'vue-color',
// label: '坐标名颜色', label: '坐标名颜色',
// name: 'xNameColor', name: 'xNameColor',
// required: false, required: false,
// placeholder: '', placeholder: '',
// value: '#fff' value: '#fff'
// }, },
// { {
// type: 'el-input-number', type: 'el-input-number',
// label: '字体大小', label: '字体大小',
// name: 'xNameFontSize', name: 'xNameFontSize',
// required: false, required: false,
// placeholder: '', placeholder: '',
// value: 12 value: 12
// }, },
// { {
// type: 'el-slider', type: 'el-slider',
// label: '文字角度', label: '文字角度',
// name: 'textAngle', name: 'textAngle',
// required: false, required: false,
// placeholder: '', placeholder: '',
// value: 0 value: 0
// }, },
// { {
// type: 'el-input-number', type: 'el-input-number',
// label: '文字间隔', label: '文字间隔',
// name: 'textInterval', name: 'textInterval',
// required: false, required: false,
// placeholder: '', placeholder: '',
// value: '' value: ''
// }, },
// { {
// type: 'el-switch', type: 'el-switch',
// label: '轴反转', label: '轴反转',
// name: 'reversalX', name: 'reversalX',
// required: false, required: false,
// placeholder: '', placeholder: '',
// value: '' value: ''
// }, },
// { {
// type: 'vue-color', type: 'vue-color',
// label: '颜色', label: '颜色',
// name: 'Xcolor', name: 'Xcolor',
// required: false, required: false,
// placeholder: '', placeholder: '',
// value: '#fff', value: '#fff',
// }, },
// { {
// type: 'el-input-number', type: 'el-input-number',
// label: '字号', label: '字号',
// name: 'fontSizeX', name: 'fontSizeX',
// required: false, required: false,
// placeholder: '', placeholder: '',
// value: 12, value: 12,
// }, },
// ], ],
// }, },
// { {
// name: 'Y轴设置', name: 'Y轴设置',
// list: [ list: [
// { {
// type: 'el-input-text', type: 'el-input-text',
// label: '名称', label: '名称',
// name: 'textNameY', name: 'textNameY',
// require: false, require: false,
// placeholder: '', placeholder: '',
// value: '' value: ''
// }, },
// { {
// type: 'el-switch', type: 'el-switch',
// label: '显示', label: '显示',
// name: 'isShowY', name: 'isShowY',
// require: false, require: false,
// placeholder: '', placeholder: '',
// value: true, value: true,
// }, },
// { {
// type: 'vue-color', type: 'vue-color',
// label: '坐标名颜色', label: '坐标名颜色',
// name: 'NameColorY', name: 'NameColorY',
// required: false, required: false,
// placeholder: '', placeholder: '',
// value: '#fff', value: '#fff',
// }, },
// { {
// type: 'el-input-number', type: 'el-input-number',
// label: '字体大小', label: '字体大小',
// name: 'NameFontSizeY', name: 'NameFontSizeY',
// required: false, required: false,
// placeholder: '', placeholder: '',
// value: 12, value: 12,
// }, },
// { {
// type: 'el-switch', type: 'el-switch',
// label: '轴反转', label: '轴反转',
// name: 'reversalY', name: 'reversalY',
// required: false, required: false,
// placeholder: '', placeholder: '',
// value: false value: false
// }, },
// { {
// type: 'vue-color', type: 'vue-color',
// label: '颜色', label: '颜色',
// name: 'colorY', name: 'colorY',
// required: false, required: false,
// placeholder: '', placeholder: '',
// value: '#fff', value: '#fff',
// }, },
// { {
// type: 'el-input-number', type: 'el-input-number',
// label: '字号', label: '字号',
// name: 'fontSizeY', name: 'fontSizeY',
// required: false, required: false,
// placeholder: '', placeholder: '',
// value: 12, value: 12,
// }, },
// ], ],
// }, },
// { {
// name: '数值设定', name: '坐标轴边距设置',
// list: [ list: [
// { {
// type: 'el-switch', type: 'el-slider',
// label: '显示', label: '左边距(像素)',
// name: 'isShow', name: 'marginLeft',
// required: false, required: false,
// placeholder: '', placeholder: '',
// value: false value: 10,
// }, }, {
// { type: 'el-slider',
// type: 'el-input-number', label: '顶边距(像素)',
// label: '字体大小', name: 'marginTop',
// name: 'fontSize', required: false,
// required: false, placeholder: '',
// placeholder: '', value: 50,
// value: 14 }, {
// }, type: 'el-slider',
// { label: '右边距(像素)',
// type: 'vue-color', name: 'marginRight',
// label: '字体颜色', required: false,
// name: 'subTextColor', placeholder: '',
// required: false, value: 40,
// placeholder: '', }, {
// value: '#fff' type: 'el-slider',
// }, label: '底边距(像素)',
// { name: 'marginBottom',
// type: 'el-select', required: false,
// label: '字体粗细', placeholder: '',
// name: 'fontWeight', value: 10,
// required: false, },
// placeholder: '', ],
// selectOptions: [ },
// { code: 'normal', name: '正常' }, {
// { code: 'bold', name: '粗体' }, name: '渐变色',
// { code: 'bolder', name: '特粗体' }, list: [
// { code: 'lighter', name: '细体' } {
// ], type: 'vue-color',
// value: 'normal' label: '0%处',
// }, name: 'barStart',
// ], required: false,
// }, placeholder: '',
// { value: '#00F4FFFF'
// name: '提示语设置', },
// list: [ {
// { type: 'vue-color',
// type: 'el-input-number', label: '100%处',
// label: '字体大小', name: 'barEnd',
// name: 'fontSize', required: false,
// required: false, placeholder: '',
// placeholder: '', value: '#004DA7FF'
// }, },
// {
// type: 'vue-color', ],
// label: '字体颜色', },
// name: 'lineColor',
// required: false,
// placeholder: '',
// },
// ],
// },
// {
// name: '坐标轴边距设置',
// list: [
// {
// type: 'el-slider',
// label: '左边距(像素)',
// name: 'marginLeft',
// required: false,
// placeholder: '',
// value: 10,
// }, {
// type: 'el-slider',
// label: '顶边距(像素)',
// name: 'marginTop',
// required: false,
// placeholder: '',
// value: 50,
// }, {
// type: 'el-slider',
// label: '右边距(像素)',
// name: 'marginRight',
// required: false,
// placeholder: '',
// value: 40,
// }, {
// type: 'el-slider',
// label: '底边距(像素)',
// name: 'marginBottom',
// required: false,
// placeholder: '',
// value: 10,
// },
// ],
// },
// {
// name: '图例操作',
// list: [
// {
// type: 'el-switch',
// label: '图例',
// name: 'isShowLegend',
// required: false,
// placeholder: '',
// value: true,
// },
// {
// type: 'vue-color',
// label: '字体颜色',
// name: 'lengedColor',
// required: false,
// placeholder: '',
// value: '#fff',
// },
// {
// type: 'el-input-number',
// label: '字体大小',
// name: 'lengedFontSize',
// required: false,
// placeholder: '',
// value: 16,
// },
// {
// type: 'el-input-number',
// label: '图例宽度',
// name: 'lengedWidth',
// required: false,
// placeholder: '',
// value: 15,
// },
// {
// type: 'el-select',
// label: '横向位置',
// name: 'lateralPosition',
// required: false,
// placeholder: '',
// selectOptions: [
// { code: 'left', name: '左对齐' },
// { code: 'right', name: '右对齐' },
// ],
// value: ''
// },
// {
// type: 'el-select',
// label: '纵向位置',
// name: 'longitudinalPosition',
// required: false,
// placeholder: '',
// selectOptions: [
// { code: 'top', name: '顶部' },
// { code: 'bottom', name: '底部' },
// ],
// value: ''
// },
// {
// type: 'el-select',
// label: '布局前置',
// name: 'layoutFront',
// required: false,
// placeholder: '',
// selectOptions: [
// { code: 'vertical', name: '竖排' },
// { code: 'horizontal', name: '横排' },
// ],
// value: ''
// },
// ],
// },
// {
// name: '自定义配色',
// list: [
// {
// type: 'customColor',
// label: '',
// name: 'customColor',
// required: false,
// value: [{ color: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }],
// },
// ],
// },
], ],
], ],
// 数据 // 数据

42
report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue
Unescape Escape View File

@ -16,7 +16,7 @@
data() { data() {
return { return {
options: { options: {
backgroundColor: '#00265f', // backgroundColor: '#00265f',
"title": { "title": {
"text": "政策补贴额度", "text": "政策补贴额度",
x: "center", x: "center",
@ -176,13 +176,13 @@
// 修改图标options属性 // 修改图标options属性
editorOptions() { editorOptions() {
this.setOptionsTitle() this.setOptionsTitle()
// this.setOptionsX() this.setOptionsX()
// this.setOptionsY() this.setOptionsY()
// this.setOptionsTop() // this.setOptionsTop()
// this.setOptionsTooltip() // this.setOptionsTooltip()
// this.setOptionsMargin() this.setOptionsMargin()
// this.setOptionsLegend() // this.setOptionsLegend()
// this.setOptionsColor() this.setOptionsColor()
this.setOptionsData() this.setOptionsData()
}, },
// 标题修改 // 标题修改
@ -331,29 +331,17 @@
} }
legend.itemWidth = optionsCollapse.lengedWidth legend.itemWidth = optionsCollapse.lengedWidth
}, },
// 图例颜色修改 // 渐变色
setOptionsColor() { setOptionsColor() {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const customColor = optionsCollapse.customColor const barStart = {}
if (!customColor) return barStart['offset'] = 0
const arrColor = [] barStart['color'] = optionsCollapse.barStart
for (let i = 0; i < customColor.length; i++) { const barEnd = {}
arrColor.push(customColor[i].color) barStart['offset'] = 1
} barStart['color'] = optionsCollapse.barEnd
const itemStyle = { // this.options.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1,[ barStart, barEnd], false)
normal: {
color: (params) => {
return arrColor[params.dataIndex]
},
barBorderRadius: optionsCollapse.radius,
},
}
for (const key in this.options.series) {
if (this.options.series[key].type == 'bar') {
this.options.series[key].itemStyle = itemStyle
}
}
this.options = Object.assign({}, this.options)
}, },
// 数据解析 // 数据解析
setOptionsData() { setOptionsData() {
@ -419,8 +407,6 @@
.echarts { .echarts {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-width: 200px;
min-height: 200px;
overflow: hidden; overflow: hidden;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save