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

多柱线图静态数据图例调整

Browse Source
qianming 3 years ago
parent 4a92396a31
commit a263bce35f
2 changed files with 62 additions and 57 deletions
Show Stats Download Patch File Download Diff File

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

@ -223,7 +223,7 @@ export const widgetMoreBarLine = {
label: '图例名称', label: '图例名称',
name: 'legendName', name: 'legendName',
required: false, required: false,
placeholder: '多值以英文,隔开', placeholder: '多值以'|'隔开',
value: '' value: ''
}, },
{ {

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

@ -1,15 +1,15 @@
<template> <template>
<div :style="styleObj"> <div :style='styleObj'>
<v-chart :options="options" autoresize/> <v-chart :options='options' autoresize/>
</div> </div>
</template> </template>
<script> <script>
import echarts from "echarts"; import echarts from 'echarts';
export default { export default {
name: "widgetMoreBarLineChart", name: 'widgetMoreBarLineChart',
components: {}, components: {},
props: { props: {
value: Object, value: Object,
@ -36,7 +36,7 @@ export default {
left: '7%', left: '7%',
top: '5%', top: '5%',
textStyle: { textStyle: {
color: "#666666" color: '#666666'
}, },
itemWidth: 15, itemWidth: 15,
itemHeight: 10, itemHeight: 10,
@ -53,7 +53,7 @@ export default {
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "#666666" color: '#666666'
} }
}, },
}, },
@ -71,16 +71,16 @@ export default {
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "#666666" color: '#666666'
} }
}, },
}, },
{ {
type: "value", type: 'value',
nameTextStyle: { nameTextStyle: {
color: "#666666" color: '#666666'
}, },
position: "right", position: 'right',
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#cdd5e2' color: '#cdd5e2'
@ -92,7 +92,7 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: "#666666" color: '#666666'
} }
} }
} }
@ -101,7 +101,6 @@ export default {
{ {
name: '调解成功', name: '调解成功',
type: 'bar', type: 'bar',
barWidth: '12px',
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
@ -119,7 +118,6 @@ export default {
{ {
name: '调解失败', name: '调解失败',
type: 'bar', type: 'bar',
barWidth: '12px',
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
@ -138,7 +136,6 @@ export default {
{ {
name: '调解终止', name: '调解终止',
type: 'bar', type: 'bar',
barWidth: '12px',
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
@ -154,11 +151,11 @@ export default {
data: [] data: []
}, },
{ {
name: "调解成功率", name: '调解成功率',
type: "line", type: 'line',
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用 yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
smooth: false, //平滑曲线显示 smooth: false, //平滑曲线显示
symbol: "circle", //标记的图形为实心圆 symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小 symbolSize: 8, //标记的大小
itemStyle: { itemStyle: {
normal: { normal: {
@ -169,7 +166,7 @@ export default {
}, },
lineStyle: { lineStyle: {
color: "#ffa43a" color: '#ffa43a'
}, },
data: [] data: []
} }
@ -180,11 +177,11 @@ export default {
computed: { computed: {
styleObj() { styleObj() {
return { return {
position: this.ispreview ? "absolute" : "static", position: this.ispreview ? 'absolute' : 'static',
width: this.optionsStyle.width + "px", width: this.optionsStyle.width + 'px',
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + 'px',
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + 'px',
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + 'px',
background: this.optionsSetup.background background: this.optionsSetup.background
}; };
} }
@ -246,7 +243,7 @@ export default {
setOptionsX() { setOptionsX() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const xAxis = { const xAxis = {
type: "category", type: 'category',
show: optionsSetup.hideX, // 坐标轴是否显示 show: optionsSetup.hideX, // 坐标轴是否显示
name: optionsSetup.xName, // 坐标轴名称 name: optionsSetup.xName, // 坐标轴名称
nameTextStyle: { nameTextStyle: {
@ -284,7 +281,7 @@ export default {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const yAxis = [ const yAxis = [
{ {
type: "value", type: 'value',
show: optionsSetup.isShowYLeft, // 坐标轴是否显示 show: optionsSetup.isShowYLeft, // 坐标轴是否显示
name: optionsSetup.textNameYLeft, // 坐标轴名称 name: optionsSetup.textNameYLeft, // 坐标轴名称
nameTextStyle: { // 别名 nameTextStyle: { // 别名
@ -309,8 +306,8 @@ export default {
} }
}, },
{ {
type: "value", type: 'value',
position: "right", position: 'right',
show: optionsSetup.isShowYRight, // 坐标轴是否显示 show: optionsSetup.isShowYRight, // 坐标轴是否显示
name: optionsSetup.textNameYRight, // 坐标轴名称 name: optionsSetup.textNameYRight, // 坐标轴名称
nameTextStyle: { // 别名 nameTextStyle: { // 别名
@ -341,7 +338,7 @@ export default {
setOptionsTooltip() { setOptionsTooltip() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const tooltip = { const tooltip = {
trigger: "item", trigger: 'item',
show: true, show: true,
textStyle: { textStyle: {
color: optionsSetup.lineColor, color: optionsSetup.lineColor,
@ -367,9 +364,9 @@ export default {
const legend = this.options.legend; const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend; legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition; legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto"; legend.top = optionsSetup.longitudinalPosition == 'top' ? 0 : 'auto';
legend.bottom = legend.bottom =
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto"; optionsSetup.longitudinalPosition == 'bottom' ? 0 : 'auto';
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.lengedColor, color: optionsSetup.lengedColor,
@ -377,13 +374,28 @@ export default {
}; };
legend.itemWidth = optionsSetup.lengedWidth; legend.itemWidth = optionsSetup.lengedWidth;
}, },
setOptionsLegendName() { setOptionsLegendName(){
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const legend = this.options.legend; const series = this.options.series;
if (this.optionsData.dataType == 'staticData') {
const legendName = optionsSetup.legendName; const legendName = optionsSetup.legendName;
if (legendName != null) { if (null == legendName || legendName == '') {
const arr = legendName.split("|"); const name = [];
legend.data = arr; name.push('调解成功');
name.push('调解失败');
name.push('调解终止');
name.push('调解成功率');
for (let i = 0; i < name.length; i++) {
series[i].name = name[i];
}
this.options.legend['data'] = name;
}else {
const arr = legendName.split('|');
for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i];
}
this.options.legend['data'] = arr
}
} }
}, },
// 颜色修改 // 颜色修改
@ -397,24 +409,23 @@ export default {
arrColor.push(customColor[i].color); arrColor.push(customColor[i].color);
} }
for (const i in series) { for (const i in series) {
if (series[i].type == "bar") { if (series[i].type == 'bar') {
series[i].itemStyle.normal['color'] = arrColor[i]; series[i].itemStyle.normal['color'] = arrColor[i];
} else { } else {
series[i].lineStyle["color"] = arrColor[i]; series[i].lineStyle['color'] = arrColor[i];
} }
} }
}, },
// 数据处理 // 数据处理
setOptionsData() { setOptionsData() {
const optionsData = this.optionsData; // 数据类型 静态 or 动态 const optionsData = this.optionsData; // 数据类型 静态 or 动态
optionsData.dataType == "staticData" optionsData.dataType == 'staticData'
? this.staticDataFn(optionsData.staticData) ? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
}, },
staticDataFn(val) { staticDataFn(val) {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
const legendName = [];
let axis = []; let axis = [];
let bar1 = []; let bar1 = [];
let bar2 = []; let bar2 = [];
@ -431,10 +442,10 @@ export default {
this.options.xAxis.data = axis; this.options.xAxis.data = axis;
// series // series
for (const i in series) { for (const i in series) {
if (series[i].type == "bar") { if (series[i].type == 'bar') {
series[i].label = { series[i].label = {
show: optionsSetup.isShowBar, show: optionsSetup.isShowBar,
position: "top", position: 'top',
distance: optionsSetup.distanceBar, distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar, fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar, color: optionsSetup.subTextColorBar,
@ -442,7 +453,7 @@ export default {
}; };
series[i].barWidth = optionsSetup.maxWidth; series[i].barWidth = optionsSetup.maxWidth;
series[i].itemStyle.normal['barBorderRadius'] = optionsSetup.radius; series[i].itemStyle.normal['barBorderRadius'] = optionsSetup.radius;
} else if (series[i].type == "line") { } else if (series[i].type == 'line') {
series[i].yAxisIndex = 1; series[i].yAxisIndex = 1;
series[i].showSymbol = optionsSetup.markPoint; series[i].showSymbol = optionsSetup.markPoint;
series[i].symbolSize = optionsSetup.pointSize; series[i].symbolSize = optionsSetup.pointSize;
@ -461,7 +472,7 @@ export default {
}; };
series[i].label = { series[i].label = {
show: optionsSetup.isShowLine, show: optionsSetup.isShowLine,
position: "top", position: 'top',
distance: optionsSetup.distanceLine, distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine, fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine, color: optionsSetup.subTextColorLine,
@ -473,11 +484,6 @@ export default {
series[1].data = bar2; series[1].data = bar2;
series[2].data = bar3; series[2].data = bar3;
series[3].data = line; series[3].data = line;
legendName.push(series[0].name);
legendName.push(series[1].name);
legendName.push(series[2].name);
legendName.push(series[3].name);
this.options.legend["data"] = legendName;
}, },
dynamicDataFn(val, refreshTime) { dynamicDataFn(val, refreshTime) {
if (!val) return; if (!val) return;
@ -500,16 +506,15 @@ export default {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
this.options.xAxis.data = val.xAxis; this.options.xAxis.data = val.xAxis;
const series = []; const series = [];
// this.options.series = val.series;
const legendName = []; const legendName = [];
for (const i in val.series) { for (const i in val.series) {
const obj = {}; const obj = {};
if (val.series[i].type == "bar") { if (val.series[i].type == 'bar') {
obj.name = val.series[i].name; obj.name = val.series[i].name;
obj.type = val.series[i].type; obj.type = val.series[i].type;
obj.label = { obj.label = {
show: optionsSetup.isShowBar, show: optionsSetup.isShowBar,
position: "top", position: 'top',
distance: optionsSetup.distanceBar, distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar, fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar, color: optionsSetup.subTextColorBar,
@ -523,7 +528,7 @@ export default {
}; };
obj.data = val.series[i].data; obj.data = val.series[i].data;
series.push(obj); series.push(obj);
} else if (val.series[i].type == "line") { } else if (val.series[i].type == 'line') {
obj.name = val.series[i].name; obj.name = val.series[i].name;
obj.type = val.series[i].type; obj.type = val.series[i].type;
obj.yAxisIndex = 1; obj.yAxisIndex = 1;
@ -544,7 +549,7 @@ export default {
}; };
obj.label = { obj.label = {
show: optionsSetup.isShowLine, show: optionsSetup.isShowLine,
position: "top", position: 'top',
distance: optionsSetup.distanceLine, distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine, fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine, color: optionsSetup.subTextColorLine,
@ -555,7 +560,7 @@ export default {
} }
legendName.push(val.series[i].name); legendName.push(val.series[i].name);
} }
this.options.legend["data"] = legendName; this.options.legend['data'] = legendName;
this.options.series = series; this.options.series = series;
} }
} }
@ -563,7 +568,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang='scss'>
.echarts { .echarts {
width: 100%; width: 100%;
height: 100%; height: 100%;

Write Preview
Loading…
Cancel
Save