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

Write Preview
Loading…
Cancel
Save