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

柱状图-渐变色图形功能已添加，支持渐变色

Browse Source
qianming 3 years ago
parent ab8f744038
commit 53c677a980
2 changed files with 157 additions and 99 deletions
Show Stats Download Patch File Download Diff File

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

@ -1887,7 +1887,15 @@ const widgetTools = [
name: 'layerName', name: 'layerName',
required: false, required: false,
placeholder: '', placeholder: '',
value: '柱状图', value: '柱形图-渐变色',
},
{
type: 'el-switch',
label: '竖展示',
name: 'verticalShow',
required: false,
placeholder: '',
value: false,
}, },
{ {
type: 'vue-color', type: 'vue-color',
@ -1898,6 +1906,35 @@ 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: [
@ -2020,20 +2057,20 @@ const widgetTools = [
value: true, value: true,
}, },
{ {
type: 'vue-color', type: 'el-input-number',
label: '坐标名颜色', label: '字号',
name: 'xNameColor', name: 'fontSizeX',
required: false, required: false,
placeholder: '', placeholder: '',
value: '#fff' value: 12,
}, },
{ {
type: 'el-input-number', type: 'vue-color',
label: '字体大小', label: '颜色',
name: 'xNameFontSize', name: 'Xcolor',
required: false, required: false,
placeholder: '', placeholder: '',
value: 12 value: '#fff',
}, },
{ {
type: 'el-slider', type: 'el-slider',
@ -2057,23 +2094,7 @@ const widgetTools = [
name: 'reversalX', name: 'reversalX',
required: false, required: false,
placeholder: '', placeholder: '',
value: '' value: false
},
{
type: 'vue-color',
label: '颜色',
name: 'Xcolor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 12,
}, },
{ {
type: 'vue-color', type: 'vue-color',
@ -2098,7 +2119,6 @@ const widgetTools = [
required: false, required: false,
placeholder: '', placeholder: '',
value: '#fff', value: '#fff',
} }
], ],
}, },
@ -2123,43 +2143,43 @@ const widgetTools = [
}, },
{ {
type: 'vue-color', type: 'vue-color',
label: '坐标名颜色', label: '颜色',
name: 'NameColorY', name: 'colorY',
required: false, required: false,
placeholder: '', placeholder: '',
value: '#fff', value: '#fff',
}, },
{ {
type: 'el-input-number', type: 'el-input-number',
label: '字体大小', label: '字号',
name: 'NameFontSizeY', name: 'fontSizeY',
required: false, required: false,
placeholder: '', placeholder: '',
value: 12, value: 12,
}, },
{ {
type: 'el-switch', type: 'el-slider',
label: '轴反转', label: '文字角度',
name: 'reversalY', name: 'ytextAngle',
required: false, required: false,
placeholder: '', placeholder: '',
value: false value: 0
}, },
{ {
type: 'vue-color', type: 'el-input-number',
label: '颜色', label: '文字间隔',
name: 'colorY', name: 'ytextInterval',
required: false, required: false,
placeholder: '', placeholder: '',
value: '#fff', value: ''
}, },
{ {
type: 'el-input-number', type: 'el-switch',
label: '字号', label: '轴反转',
name: 'fontSizeY', name: 'reversalY',
required: false, required: false,
placeholder: '', placeholder: '',
value: 12, value: false
}, },
{ {
type: 'vue-color', type: 'vue-color',
@ -2187,6 +2207,49 @@ const widgetTools = [
} }
], ],
}, },
{
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: '坐标轴边距设置', name: '坐标轴边距设置',
list: [ list: [
@ -2227,20 +2290,35 @@ const widgetTools = [
{ {
type: 'vue-color', type: 'vue-color',
label: '0%处', label: '0%处',
name: 'barStart', name: 'bar0color',
required: false, required: false,
placeholder: '', placeholder: '',
value: '#00F4FFFF' value: '#00F4FF'
}, },
{ {
type: 'vue-color', type: 'vue-color',
label: '100%处', label: '100%处',
name: 'barEnd', name: 'bar100color',
required: false, required: false,
placeholder: '', placeholder: '',
value: '#004DA7FF' value: '#004DA7'
},
{
type: 'vue-color',
label: '阴影颜色',
name: 'shadowColor',
required: false,
placeholder: '',
value: '#00A0DD'
},
{
type: 'el-input-number',
label: '模糊系数',
name: 'shadowBlur',
required: false,
placeholder: '',
value: 4,
}, },
], ],
}, },
], ],

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

@ -95,12 +95,7 @@ export default {
barWidth: "20px", barWidth: "20px",
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
0,
0,
0,
1,
[
{ {
offset: 0, offset: 0,
color: "rgba(0,244,255,1)" // 0% 处的颜色 color: "rgba(0,244,255,1)" // 0% 处的颜色
@ -112,38 +107,22 @@ export default {
], ],
false false
), ),
barBorderRadius: [30, 30, 30, 30],
shadowColor: "rgba(0,160,221,1)", shadowColor: "rgba(0,160,221,1)",
//模糊细数
shadowBlur: 4 shadowBlur: 4
} }
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
lineHeight: 30, position: ['-10', '-30'],
width: 80,
height: 30,
backgroundColor: "rgba(0,160,221,0.1)",
borderRadius: 200,
position: ["-8", "-60"],
distance: 1, distance: 1,
formatter: [" {d|●}", " {a|{c}} \n", " {b|}"].join( formatter: '{a|{c}}',
","
),
rich: { rich: {
d: {
color: "#3CDDCF"
},
a: { a: {
fontSize: 15,
color: "#fff", color: "#fff",
align: "center" align: "center"
},
b: {
width: 1,
height: 30,
borderWidth: 1,
borderColor: "#234e6c",
align: "left"
} }
} }
} }
@ -171,7 +150,6 @@ export default {
watch: { watch: {
value: { value: {
handler(val) { handler(val) {
console.log(val);
this.optionsStyle = val.position; this.optionsStyle = val.position;
this.optionsData = val.data; this.optionsData = val.data;
this.optionsCollapse = val.setup; this.optionsCollapse = val.setup;
@ -194,10 +172,8 @@ export default {
this.setOptionsTitle(); this.setOptionsTitle();
this.setOptionsX(); this.setOptionsX();
this.setOptionsY(); this.setOptionsY();
// this.setOptionsTop() this.setOptionsTop();
// this.setOptionsTooltip()
this.setOptionsMargin(); this.setOptionsMargin();
// this.setOptionsLegend()
this.setOptionsColor(); this.setOptionsColor();
this.setOptionsData(); this.setOptionsData();
}, },
@ -229,15 +205,11 @@ export default {
type: "category", type: "category",
show: optionsCollapse.hideX, // 坐标轴是否显示 show: optionsCollapse.hideX, // 坐标轴是否显示
name: optionsCollapse.xName, // 坐标轴名称 name: optionsCollapse.xName, // 坐标轴名称
nameTextStyle: {
color: optionsCollapse.xNameColor,
fontSize: optionsCollapse.xNameFontSize
},
nameRotate: optionsCollapse.textAngle, // 文字角度 nameRotate: optionsCollapse.textAngle, // 文字角度
inverse: optionsCollapse.reversalX, // 轴反转 inverse: optionsCollapse.reversalX, // 轴反转
axisLabel: { axisLabel: {
show: true, show: true,
interval: optionsCollapse.textInterval, // 文字角度 interval: optionsCollapse.textInterval, // 文字间隔
rotate: optionsCollapse.textAngle, // 文字角度 rotate: optionsCollapse.textAngle, // 文字角度
textStyle: { textStyle: {
color: optionsCollapse.Xcolor, // x轴 坐标文字颜色 color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
@ -266,15 +238,13 @@ export default {
type: "value", type: "value",
show: optionsCollapse.isShowY, // 坐标轴是否显示 show: optionsCollapse.isShowY, // 坐标轴是否显示
name: optionsCollapse.textNameY, // 坐标轴名称 name: optionsCollapse.textNameY, // 坐标轴名称
nameTextStyle: {
color: optionsCollapse.NameColorY,
fontSize: optionsCollapse.NameFontSizeY
},
inverse: optionsCollapse.reversalY, // 轴反转 inverse: optionsCollapse.reversalY, // 轴反转
axisLabel: { axisLabel: {
show: true, show: true,
interval: optionsCollapse.ytextInterval, // 文字间隔
rotate: optionsCollapse.ytextAngle, // 文字角度
textStyle: { textStyle: {
color: optionsCollapse.colorY, // x轴 坐标文字颜色 color: optionsCollapse.colorY, // y轴 坐标文字颜色
fontSize: optionsCollapse.fontSizeY fontSize: optionsCollapse.fontSizeY
} }
}, },
@ -291,14 +261,12 @@ export default {
} }
} }
}; };
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
// 数值设定 or 柱体设置 // 数值设定 or 柱体设置
setOptionsTop() { setOptionsTop() {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
for (const key in series) { for (const key in series) {
if (series[key].type == "bar") { if (series[key].type == "bar") {
series[key].label = { series[key].label = {
@ -310,7 +278,7 @@ export default {
fontWeight: optionsCollapse.fontWeight fontWeight: optionsCollapse.fontWeight
}; };
series[key].barWidth = optionsCollapse.maxWidth; series[key].barWidth = optionsCollapse.maxWidth;
series[key].barMinHeight = optionsCollapse.minHeight; //series[key].barMinHeight = optionsCollapse.minHeight;
} }
} }
this.options.series = series; this.options.series = series;
@ -358,15 +326,27 @@ export default {
legend.itemWidth = optionsCollapse.lengedWidth; legend.itemWidth = optionsCollapse.lengedWidth;
}, },
// 渐变色 // 渐变色
setOptionsColor() { setOptionsColor(){
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const barStart = {}; const itemStyle = this.options.series[0]['itemStyle']
barStart["offset"] = 0; const normal = {
barStart["color"] = optionsCollapse.barStart; color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
const barEnd = {}; {
barStart["offset"] = 1; offset: 0,
barStart["color"] = optionsCollapse.barEnd; color: optionsCollapse.bar0color // 0% 处的颜色
// this.options.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1,[ barStart, barEnd], false) },
{
offset: 1,
color: optionsCollapse.bar100color // 100% 处的颜色
}
],
false
),
barBorderRadius: optionsCollapse.radius, //圆角
shadowColor: optionsCollapse.shadowColor, // 阴影颜色
shadowBlur: optionsCollapse.shadowBlur //模糊系数
}
itemStyle['normal'] = normal
}, },
// 数据解析 // 数据解析
setOptionsData() { setOptionsData() {

Write Preview
Loading…
Cancel
Save