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: '',
value: '柱状图',
},
{
type: 'el-switch',
label: '竖展示',
name: 'verticalShow',
required: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '背景颜色',
@ -1523,35 +1515,6 @@ const widgetTools = [
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: '标题设置',
list: [
@ -1654,325 +1617,200 @@ const widgetTools = [
},
],
},
// {
// name: 'X轴设置',
// list: [
// {
// type: 'el-input-text',
// label: '名称',
// name: 'xName',
// required: false,
// placeholder: '',
// value: ''
// },
// {
// type: 'el-switch',
// label: '显示',
// name: 'hideX',
// required: false,
// placeholder: '',
// value: true,
// },
// {
// type: 'vue-color',
// label: '坐标名颜色',
// name: 'xNameColor',
// required: false,
// placeholder: '',
// value: '#fff'
// },
// {
// type: 'el-input-number',
// label: '字体大小',
// name: 'xNameFontSize',
// required: false,
// placeholder: '',
// value: 12
// },
// {
// type: 'el-slider',
// label: '文字角度',
// name: 'textAngle',
// required: false,
// placeholder: '',
// value: 0
// },
// {
// type: 'el-input-number',
// label: '文字间隔',
// name: 'textInterval',
// required: false,
// placeholder: '',
// value: ''
// },
// {
// type: 'el-switch',
// label: '轴反转',
// name: 'reversalX',
// required: false,
// placeholder: '',
// value: ''
// },
// {
// type: 'vue-color',
// label: '颜色',
// name: 'Xcolor',
// required: false,
// placeholder: '',
// value: '#fff',
// },
// {
// type: 'el-input-number',
// label: '字号',
// name: 'fontSizeX',
// required: false,
// placeholder: '',
// value: 12,
// },
// ],
// },
// {
// name: 'Y轴设置',
// list: [
// {
// type: 'el-input-text',
// label: '名称',
// name: 'textNameY',
// require: false,
// placeholder: '',
// value: ''
// },
// {
// type: 'el-switch',
// label: '显示',
// name: 'isShowY',
// require: false,
// placeholder: '',
// value: true,
// },
// {
// type: 'vue-color',
// label: '坐标名颜色',
// name: 'NameColorY',
// required: false,
// placeholder: '',
// value: '#fff',
// },
// {
// type: 'el-input-number',
// label: '字体大小',
// name: 'NameFontSizeY',
// required: false,
// placeholder: '',
// value: 12,
// },
// {
// type: 'el-switch',
// label: '轴反转',
// name: 'reversalY',
// required: false,
// placeholder: '',
// value: false
// },
// {
// type: 'vue-color',
// label: '颜色',
// name: 'colorY',
// required: false,
// placeholder: '',
// value: '#fff',
// },
// {
// type: 'el-input-number',
// label: '字号',
// name: 'fontSizeY',
// required: false,
// placeholder: '',
// value: 12,
// },
// ],
// },
// {
// name: '数值设定',
// list: [
// {
// type: 'el-switch',
// label: '显示',
// name: 'isShow',
// required: false,
// placeholder: '',
// value: false
// },
// {
// type: 'el-input-number',
// label: '字体大小',
// name: 'fontSize',
// required: false,
// placeholder: '',
// value: 14
// },
// {
// type: 'vue-color',
// label: '字体颜色',
// name: 'subTextColor',
// required: false,
// placeholder: '',
// value: '#fff'
// },
// {
// type: 'el-select',
// label: '字体粗细',
// name: 'fontWeight',
// required: false,
// placeholder: '',
// selectOptions: [
// { code: 'normal', name: '正常' },
// { code: 'bold', name: '粗体' },
// { code: 'bolder', name: '特粗体' },
// { code: 'lighter', name: '细体' }
// ],
// value: 'normal'
// },
// ],
// },
// {
// name: '提示语设置',
// list: [
// {
// type: 'el-input-number',
// label: '字体大小',
// name: 'fontSize',
// required: false,
// placeholder: '',
// },
// {
// 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' }],
// },
// ],
// },
{
name: 'X轴设置',
list: [
{
type: 'el-input-text',
label: '名称',
name: 'xName',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '显示',
name: 'hideX',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'xNameColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'xNameFontSize',
required: false,
placeholder: '',
value: 12
},
{
type: 'el-slider',
label: '文字角度',
name: 'textAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '文字间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '颜色',
name: 'Xcolor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 12,
},
],
},
{
name: 'Y轴设置',
list: [
{
type: 'el-input-text',
label: '名称',
name: 'textNameY',
require: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '显示',
name: 'isShowY',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'NameColorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'NameFontSizeY',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalY',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '颜色',
name: 'colorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字号',
name: 'fontSizeY',
required: false,
placeholder: '',
value: 12,
},
],
},
{
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: 'vue-color',
label: '0%处',
name: 'barStart',
required: false,
placeholder: '',
value: '#00F4FFFF'
},
{
type: 'vue-color',
label: '100%处',
name: 'barEnd',
required: false,
placeholder: '',
value: '#004DA7FF'
},
],
},
],
],
// 数据

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

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

Write Preview
Loading…
Cancel
Save