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

bugfix-多柱线图图例和颜色对应不上

Browse Source
qianming 2 years ago
parent 782f9435e8
commit 31a9b860a8
4 changed files with 71 additions and 65 deletions
Show Stats Download Patch File Download Diff File

14
report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js
Unescape Escape View File

@ -80,6 +80,18 @@ export const widgetBarlinechart = {
placeholder: '',
value: 5,
},
{
type: 'el-select',
label: '点样式',
name: 'symbol',
required: false,
placeholder: '',
selectOptions: [
{code: 'circle', name: '实心点'},
{code: 'emptyCircle', name: '空心点'},
],
value: 'circle'
},
{
type: 'el-switch',
label: '平滑曲线',
@ -855,7 +867,7 @@ export const widgetBarlinechart = {
label: '',
name: 'customColor',
required: false,
value: [{color: '#00F4FFFF'}, {color: '#e68b55'}],
value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
},
],
},

18
report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js
Unescape Escape View File

@ -72,6 +72,18 @@ export const widgetMoreBarLine = {
placeholder: '',
value: 3,
},
{
type: 'el-select',
label: '点样式',
name: 'symbol',
required: false,
placeholder: '',
selectOptions: [
{code: 'circle', name: '实心点'},
{code: 'emptyCircle', name: '空心点'},
],
value: 'circle'
},
{
type: 'el-switch',
label: '平滑曲线',
@ -847,11 +859,7 @@ export const widgetMoreBarLine = {
label: '',
name: 'customColor',
required: false,
value: [
{color: '#4bdfff'},
{color: '#55f49c'},
{color: '#ffa43a'},
],
value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
},
],
},

1
report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue
Unescape Escape View File

@ -303,6 +303,7 @@ export default {
const series = this.options.series;
for (const key in series) {
if (series[key].type == "line") {
series[key].symbol = optionsSetup.symbol;
series[key].showSymbol = optionsSetup.markPoint;
series[key].symbolSize = optionsSetup.pointSize;
series[key].smooth = optionsSetup.smoothCurve;

103
report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue
Unescape Escape View File

@ -31,17 +31,7 @@ export default {
top: '16%',
containLabel: true
},
legend: {
data: ['调解成功', '调解失败', '调解终止', '调解成功率'],
left: '7%',
top: '5%',
textStyle: {
color: '#666666'
},
itemWidth: 15,
itemHeight: 10,
itemGap: 25
},
legend: {},
xAxis: {
type: 'category',
data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
@ -132,23 +122,6 @@ export default {
},
data: []
},
{
name: '调解终止',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#01c871'
}, {
offset: 1,
color: '#55f49c'
}]),
barBorderRadius: 6,
}
},
data: []
},
{
name: '调解成功率',
type: 'line',
@ -156,14 +129,13 @@ export default {
smooth: false, //平滑曲线显示
symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小
itemStyle: {
/*itemStyle: {
normal: {
color: '#ffa43a',
borderColor: 'rgba(255, 234, 0, 0.5)', //圆点透明 边框
borderWidth: 5
},
},
},*/
lineStyle: {
color: '#ffa43a'
},
@ -213,7 +185,6 @@ export default {
this.setOptionsLegend();
this.setOptionsTooltip();
this.setOptionsMargin();
this.setOptionsColor();
this.setOptionsData();
},
// 标题修改
@ -412,7 +383,7 @@ export default {
legend.itemWidth = optionsSetup.legendWidth;
},
// 图例名称设置
setOptionsLegendName(name){
setOptionsLegendName(name) {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
const legendName = optionsSetup.legendName;
@ -422,7 +393,7 @@ export default {
series[i].name = name[i];
}
this.options.legend['data'] = name;
}else {
} else {
const arr = legendName.split('|');
for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i];
@ -430,24 +401,6 @@ export default {
this.options.legend['data'] = arr
}
},
// 颜色修改
setOptionsColor() {
const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor;
const series = this.options.series;
if (!customColor) return;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
for (const i in series) {
if (series[i].type == 'bar') {
series[i].itemStyle.normal['color'] = arrColor[i];
} else {
series[i].lineStyle['color'] = arrColor[i];
}
}
},
// 数据处理
setOptionsData() {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
@ -457,6 +410,12 @@ export default {
},
staticDataFn(val) {
const optionsSetup = this.optionsSetup;
//颜色
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
const series = this.options.series;
let axis = [];
let bar1 = [];
@ -468,11 +427,17 @@ export default {
bar2[i] = val[i].manus;
line[i] = val[i].sales;
}
const legendName = [];
legendName.push('调解成功');
legendName.push('调解失败');
legendName.push('调解成功率');
// x轴
this.options.xAxis.data = axis;
// series
for (const i in series) {
if (series[i].type == 'bar') {
series[i].name = legendName[i];
series[i].type = 'bar';
series[i].label = {
show: optionsSetup.isShowBar,
position: 'top',
@ -483,8 +448,12 @@ export default {
};
series[i].barWidth = optionsSetup.maxWidth;
series[i].itemStyle.normal['barBorderRadius'] = optionsSetup.radius;
series[i].itemStyle.normal['color'] = arrColor[i];
} else if (series[i].type == 'line') {
series[i].name = legendName[i];
series[i].type = 'line';
series[i].yAxisIndex = 1;
series[i].symbol = optionsSetup.symbol;
series[i].showSymbol = optionsSetup.markPoint;
series[i].symbolSize = optionsSetup.pointSize;
series[i].smooth = optionsSetup.smoothCurve;
@ -497,7 +466,13 @@ export default {
opacity: 0
};
}
series[i].itemStyle = {
normal: {
color: arrColor[i],
}
};
series[i].lineStyle = {
color: arrColor[i],
width: optionsSetup.lineWidth
};
series[i].label = {
@ -512,11 +487,7 @@ export default {
}
series[0].data = bar1;
series[1].data = bar2;
series[3].data = line;
const legendName = [];
legendName.push('调解成功');
legendName.push('调解失败');
legendName.push('调解成功率');
series[2].data = line;
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
},
@ -539,10 +510,17 @@ export default {
},
renderingFn(val) {
const optionsSetup = this.optionsSetup;
//颜色
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
this.options.xAxis.data = val.xAxis;
const series = [];
const legendName = [];
for (const i in val.series) {
legendName.push(val.series[i].name);
const obj = {};
if (val.series[i].type == 'bar') {
obj.name = val.series[i].name;
@ -558,6 +536,7 @@ export default {
obj.barWidth = optionsSetup.maxWidth;
obj.itemStyle = {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
}
};
@ -567,6 +546,7 @@ export default {
obj.name = val.series[i].name;
obj.type = val.series[i].type;
obj.yAxisIndex = 1;
obj.symbol = optionsSetup.symbol;
obj.showSymbol = optionsSetup.markPoint;
obj.symbolSize = optionsSetup.pointSize;
obj.smooth = optionsSetup.smoothCurve;
@ -577,9 +557,15 @@ export default {
} else {
obj.areaStyle = {
opacity: 0
};
}
}
obj.itemStyle = {
normal: {
color: arrColor[i],
}
};
obj.lineStyle = {
color: arrColor[i],
width: optionsSetup.lineWidth
};
obj.label = {
@ -593,7 +579,6 @@ export default {
obj.data = val.series[i].data;
series.push(obj);
}
legendName.push(val.series[i].name);
}
this.options.series = series;
this.options.legend['data'] = legendName;

Write Preview
Loading…
Cancel
Save