diff --git a/report-ui/src/mixins/queryform.js b/report-ui/src/mixins/queryform.js
index 62d8273d..4454041d 100644
--- a/report-ui/src/mixins/queryform.js
+++ b/report-ui/src/mixins/queryform.js
@@ -139,6 +139,7 @@ export default {
const seriesData = [];
const value = chartProperties[key];
obj["type"] = value;
+ obj["name"] = key;
for (let i = 0; i < data.length; i++) {
if (value.startsWith("xAxis")) {
// 代表为x轴
diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js
index eb7b110c..d7f401c5 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js
@@ -170,6 +170,88 @@ export const widgetBarchart = {
},
],
},
+ {
+ name: '图例操作',
+ list: [
+ {
+ type: 'el-switch',
+ label: '图例显示',
+ name: 'isShowLegend',
+ required: false,
+ placeholder: '',
+ value: true,
+ },
+ {
+ type: 'el-input-text',
+ label: '图例名称',
+ name: 'legendName',
+ required: false,
+ placeholder: '',
+ value: ''
+ },
+ {
+ type: 'vue-color',
+ label: '字体颜色',
+ name: 'lengedColor',
+ required: false,
+ placeholder: '',
+ value: '#fff',
+ },
+ {
+ type: 'el-input-number',
+ label: '字体字号',
+ name: 'lengedFontSize',
+ required: false,
+ placeholder: '',
+ value: 12,
+ },
+ {
+ type: 'el-input-number',
+ label: '图例宽度',
+ name: 'lengedWidth',
+ required: false,
+ placeholder: '',
+ value: 12,
+ },
+ {
+ type: 'el-select',
+ label: '横向位置',
+ name: 'lateralPosition',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'center', name: '居中'},
+ {code: 'left', name: '左对齐'},
+ {code: 'right', name: '右对齐'},
+ ],
+ value: 'center'
+ },
+ {
+ type: 'el-select',
+ label: '纵向位置',
+ name: 'longitudinalPosition',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'top', name: '顶部'},
+ {code: 'bottom', name: '底部'},
+ ],
+ value: 'top'
+ },
+ {
+ type: 'el-select',
+ label: '布局前置',
+ name: 'layoutFront',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'vertical', name: '竖排'},
+ {code: 'horizontal', name: '横排'},
+ ],
+ value: 'horizontal'
+ },
+ ],
+ },
{
name: 'X轴设置',
list: [
@@ -484,79 +566,6 @@ export const widgetBarchart = {
},
],
},
- {
- 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: [
diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js
index 7a6c7696..6b1dac1a 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js
@@ -9,7 +9,7 @@
export const widgetGradientBarchart = {
code: 'widget-gradient-color-barchart',
type: 'chart',
- label: '柱形图-渐变色',
+ label: '柱状图-渐变色',
icon: 'iconzhuzhuangtu',
options: {
// 配置
@@ -162,6 +162,88 @@ export const widgetGradientBarchart = {
},
],
},
+ {
+ name: '图例操作',
+ list: [
+ {
+ type: 'el-switch',
+ label: '图例显示',
+ name: 'isShowLegend',
+ required: false,
+ placeholder: '',
+ value: true,
+ },
+ {
+ type: 'el-input-text',
+ label: '图例名称',
+ name: 'legendName',
+ required: false,
+ placeholder: '',
+ value: ''
+ },
+ {
+ type: 'vue-color',
+ label: '字体颜色',
+ name: 'lengedColor',
+ required: false,
+ placeholder: '',
+ value: '#fff',
+ },
+ {
+ type: 'el-input-number',
+ label: '字体字号',
+ name: 'lengedFontSize',
+ required: false,
+ placeholder: '',
+ value: 12,
+ },
+ {
+ type: 'el-input-number',
+ label: '图例宽度',
+ name: 'lengedWidth',
+ required: false,
+ placeholder: '',
+ value: 12,
+ },
+ {
+ type: 'el-select',
+ label: '横向位置',
+ name: 'lateralPosition',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'center', name: '居中'},
+ {code: 'left', name: '左对齐'},
+ {code: 'right', name: '右对齐'},
+ ],
+ value: 'center'
+ },
+ {
+ type: 'el-select',
+ label: '纵向位置',
+ name: 'longitudinalPosition',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'top', name: '顶部'},
+ {code: 'bottom', name: '底部'},
+ ],
+ value: 'top'
+ },
+ {
+ type: 'el-select',
+ label: '布局前置',
+ name: 'layoutFront',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'vertical', name: '竖排'},
+ {code: 'horizontal', name: '横排'},
+ ],
+ value: 'horizontal'
+ },
+ ],
+ },
{
name: 'X轴设置',
list: [
diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js
index 1b6b2713..c85aa512 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js
@@ -48,7 +48,7 @@ export const widgetMoreBarLine = {
name: 'pointSize',
required: false,
placeholder: '',
- value: 5,
+ value: 3,
},
{
type: 'el-switch',
@@ -56,7 +56,7 @@ export const widgetMoreBarLine = {
name: 'smoothCurve',
required: false,
placeholder: '',
- value: true,
+ value: false,
},
{
type: 'el-switch',
@@ -103,14 +103,6 @@ export const widgetMoreBarLine = {
placeholder: '',
value: 5,
},
- {
- type: 'el-slider',
- label: '最小高度',
- name: 'minHeight',
- require: false,
- placeholder: '',
- value: 0,
- },
],
},
{
@@ -229,10 +221,10 @@ export const widgetMoreBarLine = {
{
type: 'el-input-text',
label: '图例名称',
- name: 'layerName',
+ name: 'legendName',
required: false,
- placeholder: '',
- value: '',
+ placeholder: '多值以'|'隔开',
+ value: ''
},
{
type: 'vue-color',
@@ -248,7 +240,7 @@ export const widgetMoreBarLine = {
name: 'lengedFontSize',
required: false,
placeholder: '',
- value: 16,
+ value: 12,
},
{
type: 'el-input-number',
@@ -256,7 +248,7 @@ export const widgetMoreBarLine = {
name: 'lengedWidth',
required: false,
placeholder: '',
- value: 15,
+ value: 12,
},
{
type: 'el-select',
@@ -265,10 +257,11 @@ export const widgetMoreBarLine = {
required: false,
placeholder: '',
selectOptions: [
+ {code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
- value: ''
+ value: 'center'
},
{
type: 'el-select',
@@ -280,7 +273,7 @@ export const widgetMoreBarLine = {
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
- value: ''
+ value: 'top'
},
{
type: 'el-select',
@@ -292,7 +285,7 @@ export const widgetMoreBarLine = {
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
- value: '未销,核销,总共,比例'
+ value: 'horizontal'
},
],
},
@@ -655,7 +648,12 @@ export const widgetMoreBarLine = {
label: '',
name: 'customColor',
required: false,
- value: [{color: '#00F4FFFF'}, {color: '#e68b55'}],
+ value: [
+ {color: '#4bdfff'},
+ {color: '#5dc1fd'},
+ {color: '#55f49c'},
+ {color: '#ffa43a'},
+ ],
},
],
},
@@ -745,7 +743,7 @@ export const widgetMoreBarLine = {
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
- value: 400,
+ value: 500,
},
{
type: 'el-input-number',
@@ -753,7 +751,7 @@ export const widgetMoreBarLine = {
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
- value: 200,
+ value: 300,
},
],
}
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
index ed8a08bd..74090891 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
@@ -258,11 +258,11 @@ export default {
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend;
- legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
- legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
- legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+ legend.left = optionsSetup.lateralPosition;
+ legend.right = optionsSetup.lateralPosition;
+ legend.top = optionsSetup.longitudinalPosition;
legend.bottom =
- optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+ optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
@@ -270,6 +270,25 @@ export default {
};
legend.itemWidth = optionsSetup.lengedWidth;
},
+ // 图例名称设置
+ setOptionsLegendName(name){
+ const optionsSetup = this.optionsSetup;
+ const series = this.options.series;
+ const legendName = optionsSetup.legendName;
+ // 图例没有手动写则显示原值，写了则显示新值
+ if (null == legendName || legendName == '') {
+ 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
+ }
+ },
// 图例颜色修改
setOptionsColor() {
const optionsSetup = this.optionsSetup;
@@ -331,6 +350,10 @@ export default {
if (series[0].type == "bar") {
series[0].data = data;
}
+ const legendName = [];
+ legendName.push('销售量')
+ this.options.legend['data'] = legendName;
+ this.setOptionsLegendName(legendName);
},
// 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) {
@@ -365,11 +388,16 @@ export default {
}
// series
const series = this.options.series;
+ const legendName = [];
for (const i in series) {
if (series[i].type == "bar") {
+ series[i].name = val.series[i].name;
series[i].data = val.series[i].data;
}
+ legendName.push(val.series[i].name);
}
+ this.options.legend['data'] = legendName;
+ this.setOptionsLegendName(legendName);
}
}
};
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue
index ecdceb1a..c605d19f 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue
@@ -134,7 +134,7 @@ export default {
this.setOptionsTitle();
this.setOptionsX();
this.setOptionsY();
- this.setOptionsTop();
+ this.setOptionsLine();
this.setOptionsBar();
this.setOptionsTooltip();
this.setOptionsData();
@@ -262,7 +262,7 @@ export default {
this.options.yAxis = yAxis;
},
// 折线设置 数值设置
- setOptionsTop() {
+ setOptionsLine() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
index 9daadfc5..b3b02b79 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
@@ -167,6 +167,7 @@ export default {
this.setOptionsX();
this.setOptionsY();
this.setOptionsTop();
+ this.setOptionsLegend();
this.setOptionsMargin();
this.setOptionsColor();
this.setOptionsData();
@@ -323,11 +324,11 @@ export default {
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend;
- legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
- legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
- legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+ legend.left = optionsSetup.lateralPosition;
+ legend.right = optionsSetup.lateralPosition;
+ legend.top = optionsSetup.longitudinalPosition;
legend.bottom =
- optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+ optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
@@ -335,6 +336,25 @@ export default {
};
legend.itemWidth = optionsSetup.lengedWidth;
},
+ // 图例名称设置
+ setOptionsLegendName(name){
+ const optionsSetup = this.optionsSetup;
+ const series = this.options.series;
+ const legendName = optionsSetup.legendName;
+ // 图例没有手动写则显示原值，写了则显示新值
+ if (null == legendName || legendName == '') {
+ 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
+ }
+ },
// 渐变色
setOptionsColor() {
const optionsSetup = this.optionsSetup;
@@ -416,6 +436,10 @@ export default {
if (series[0].type == "bar") {
series[0].data = data;
}
+ const legendName = [];
+ legendName.push('销售量')
+ this.options.legend['data'] = legendName;
+ this.setOptionsLegendName(legendName);
},
// 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) {
@@ -451,11 +475,16 @@ export default {
// series
const series = this.options.series;
+ const legendName = [];
for (const i in series) {
if (series[i].type == "bar") {
+ series[i].name = val.series[i].name;
series[i].data = val.series[i].data;
}
+ legendName.push(val.series[i].name);
}
+ this.options.legend['data'] = legendName;
+ this.setOptionsLegendName(legendName);
}
}
};
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue
index 460d153d..c2b8f485 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue
@@ -1,15 +1,15 @@
<template>
- <div :style="styleObj">
- <v-chart :options="options" autoresize/>
+ <div :style='styleObj'>
+ <v-chart :options='options' autoresize/>
</div>
</template>
<script>
-import echarts from "echarts";
+import echarts from 'echarts';
export default {
- name: "widgetMoreBarLineChart",
+ name: 'widgetMoreBarLineChart',
components: {},
props: {
value: Object,
@@ -36,7 +36,7 @@ export default {
left: '7%',
top: '5%',
textStyle: {
- color: "#666666"
+ color: '#666666'
},
itemWidth: 15,
itemHeight: 10,
@@ -53,7 +53,7 @@ export default {
},
axisLabel: {
textStyle: {
- color: "#666666"
+ color: '#666666'
}
},
},
@@ -71,16 +71,16 @@ export default {
},
axisLabel: {
textStyle: {
- color: "#666666"
+ color: '#666666'
}
},
},
{
- type: "value",
+ type: 'value',
nameTextStyle: {
- color: "#666666"
+ color: '#666666'
},
- position: "right",
+ position: 'right',
axisLine: {
lineStyle: {
color: '#cdd5e2'
@@ -92,7 +92,7 @@ export default {
axisLabel: {
show: true,
textStyle: {
- color: "#666666"
+ color: '#666666'
}
}
}
@@ -101,7 +101,6 @@ export default {
{
name: '调解成功',
type: 'bar',
- barWidth: '12px',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
@@ -114,12 +113,11 @@ export default {
barBorderRadius: 6,
},
},
- data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
+ data: []
},
{
name: '调解失败',
type: 'bar',
- barWidth: '12px',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
@@ -133,12 +131,11 @@ export default {
}
},
- data: [400, 500, 500, 500, 500, 400, 400, 500, 500]
+ data: []
},
{
name: '调解终止',
type: 'bar',
- barWidth: '12px',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
@@ -151,15 +148,14 @@ export default {
barBorderRadius: 6,
}
},
- data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
+ data: []
},
{
- name: "调解成功率",
- type: "line",
+ name: '调解成功率',
+ type: 'line',
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
smooth: false, //平滑曲线显示
-
- symbol: "circle", //标记的图形为实心圆
+ symbol: 'circle', //标记的图形为实心圆
symbolSize: 8, //标记的大小
itemStyle: {
normal: {
@@ -170,9 +166,9 @@ export default {
},
lineStyle: {
- color: "#ffa43a"
+ color: '#ffa43a'
},
- data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5]
+ data: []
}
]
}
@@ -181,11 +177,11 @@ export default {
computed: {
styleObj() {
return {
- position: this.ispreview ? "absolute" : "static",
- width: this.optionsStyle.width + "px",
- height: this.optionsStyle.height + "px",
- left: this.optionsStyle.left + "px",
- top: this.optionsStyle.top + "px",
+ position: this.ispreview ? 'absolute' : 'static',
+ width: this.optionsStyle.width + 'px',
+ height: this.optionsStyle.height + 'px',
+ left: this.optionsStyle.left + 'px',
+ top: this.optionsStyle.top + 'px',
background: this.optionsSetup.background
};
}
@@ -215,14 +211,11 @@ export default {
this.setOptionsTitle();
this.setOptionsX();
this.setOptionsY();
- /*
- this.setOptionsTop();
- this.setOptionsBar();
+ this.setOptionsLegend();
this.setOptionsTooltip();
- this.setOptionsData();
this.setOptionsMargin();
- this.setOptionsLegend();
- this.setOptionsColor();*/
+ this.setOptionsColor();
+ this.setOptionsData();
},
// 标题修改
setOptionsTitle() {
@@ -249,7 +242,7 @@ export default {
setOptionsX() {
const optionsSetup = this.optionsSetup;
const xAxis = {
- type: "category",
+ type: 'category',
show: optionsSetup.hideX, // 坐标轴是否显示
name: optionsSetup.xName, // 坐标轴名称
nameTextStyle: {
@@ -287,7 +280,7 @@ export default {
const optionsSetup = this.optionsSetup;
const yAxis = [
{
- type: "value",
+ type: 'value',
show: optionsSetup.isShowYLeft, // 坐标轴是否显示
name: optionsSetup.textNameYLeft, // 坐标轴名称
nameTextStyle: { // 别名
@@ -312,8 +305,8 @@ export default {
}
},
{
- type: "value",
- position: "right",
+ type: 'value',
+ position: 'right',
show: optionsSetup.isShowYRight, // 坐标轴是否显示
name: optionsSetup.textNameYRight, // 坐标轴名称
nameTextStyle: { // 别名
@@ -340,32 +333,11 @@ export default {
];
this.options.yAxis = yAxis;
},
- // 柱体设置 数值设置
- setOptionsBar() {
- const optionsSetup = this.optionsSetup;
- const series = this.options.series;
- for (const key in series) {
- if (series[key].type == "bar") {
- series[key].label = {
- show: optionsSetup.isShowBar,
- position: "top",
- distance: optionsSetup.distanceBar,
- fontSize: optionsSetup.fontSizeBar,
- color: optionsSetup.subTextColorBar,
- fontWeight: optionsSetup.fontWeightBar
- };
- series[key].barWidth = optionsSetup.maxWidth;
- series[key].barMinHeight = optionsSetup.minHeight;
- series[key].itemStyle.barBorderRadius = optionsSetup.radius;
- }
- }
- this.options.series = series;
- },
// tooltip 设置
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
- trigger: "item",
+ trigger: 'item',
show: true,
textStyle: {
color: optionsSetup.lineColor,
@@ -391,9 +363,9 @@ export default {
const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
- legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+ legend.top = optionsSetup.longitudinalPosition;
legend.bottom =
- optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+ optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
@@ -401,45 +373,118 @@ export default {
};
legend.itemWidth = optionsSetup.lengedWidth;
},
+ // 图例名称设置
+ setOptionsLegendName(name){
+ const optionsSetup = this.optionsSetup;
+ const series = this.options.series;
+ const legendName = optionsSetup.legendName;
+ // 图例没有手动写则显示原值，写了则显示新值
+ if (null == legendName || legendName == '') {
+ 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
+ }
+ },
// 颜色修改
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);
}
- this.options.color = arrColor;
- this.options = Object.assign({}, this.options);
+ 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 动态
- optionsData.dataType == "staticData"
+ optionsData.dataType == 'staticData'
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
+ const optionsSetup = this.optionsSetup;
const series = this.options.series;
let axis = [];
- let bar = [];
+ let bar1 = [];
+ let bar2 = [];
+ let bar3 = [];
let line = [];
for (const i in val) {
- axis[i] = val[i].axis;
- bar[i] = val[i].bar;
- line[i] = val[i].line;
+ axis[i] = val[i].date;
+ bar1[i] = val[i].unsales;
+ bar2[i] = val[i].manus;
+ bar3[i] = val[i].rework;
+ line[i] = val[i].sales;
}
// x轴
this.options.xAxis.data = axis;
// series
for (const i in series) {
- if (series[i].type == "bar") {
- series[i].data = bar;
- } else {
- series[i].data = line;
+ if (series[i].type == 'bar') {
+ series[i].label = {
+ show: optionsSetup.isShowBar,
+ position: 'top',
+ distance: optionsSetup.distanceBar,
+ fontSize: optionsSetup.fontSizeBar,
+ color: optionsSetup.subTextColorBar,
+ fontWeight: optionsSetup.fontWeightBar
+ };
+ series[i].barWidth = optionsSetup.maxWidth;
+ series[i].itemStyle.normal['barBorderRadius'] = optionsSetup.radius;
+ } else if (series[i].type == 'line') {
+ series[i].yAxisIndex = 1;
+ series[i].showSymbol = optionsSetup.markPoint;
+ series[i].symbolSize = optionsSetup.pointSize;
+ series[i].smooth = optionsSetup.smoothCurve;
+ if (optionsSetup.area) {
+ series[i].areaStyle = {
+ opacity: optionsSetup.areaThickness / 100
+ };
+ } else {
+ series[i].areaStyle = {
+ opacity: 0
+ };
+ }
+ series[i].lineStyle = {
+ width: optionsSetup.lineWidth
+ };
+ series[i].label = {
+ show: optionsSetup.isShowLine,
+ position: 'top',
+ distance: optionsSetup.distanceLine,
+ fontSize: optionsSetup.fontSizeLine,
+ color: optionsSetup.subTextColorLine,
+ fontWeight: optionsSetup.fontWeightLine
+ };
}
}
+ series[0].data = bar1;
+ series[1].data = bar2;
+ series[2].data = bar3;
+ series[3].data = line;
+ const legendName = [];
+ legendName.push('调解成功');
+ legendName.push('调解失败');
+ legendName.push('调解终止');
+ legendName.push('调解成功率');
+ this.options.legend['data'] = legendName;
+ this.setOptionsLegendName(legendName);
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
@@ -459,23 +504,73 @@ export default {
});
},
renderingFn(val) {
+ const optionsSetup = this.optionsSetup;
this.options.xAxis.data = val.xAxis;
- // series
- const series = this.options.series;
- for (const i in series) {
- for (const j in val.series) {
- if (series[i].type == val.series[j].type) {
- series[i].data = val.series[j].data;
+ const series = [];
+ const legendName = [];
+ for (const i in val.series) {
+ const obj = {};
+ if (val.series[i].type == 'bar') {
+ obj.name = val.series[i].name;
+ obj.type = val.series[i].type;
+ obj.label = {
+ show: optionsSetup.isShowBar,
+ position: 'top',
+ distance: optionsSetup.distanceBar,
+ fontSize: optionsSetup.fontSizeBar,
+ color: optionsSetup.subTextColorBar,
+ fontWeight: optionsSetup.fontWeightBar
+ };
+ obj.barWidth = optionsSetup.maxWidth;
+ obj.itemStyle = {
+ normal: {
+ barBorderRadius: optionsSetup.radius,
+ }
+ };
+ obj.data = val.series[i].data;
+ series.push(obj);
+ } else if (val.series[i].type == 'line') {
+ obj.name = val.series[i].name;
+ obj.type = val.series[i].type;
+ obj.yAxisIndex = 1;
+ obj.showSymbol = optionsSetup.markPoint;
+ obj.symbolSize = optionsSetup.pointSize;
+ obj.smooth = optionsSetup.smoothCurve;
+ if (optionsSetup.area) {
+ obj.areaStyle = {
+ opacity: optionsSetup.areaThickness / 100
+ };
+ } else {
+ obj.areaStyle = {
+ opacity: 0
+ };
}
+ obj.lineStyle = {
+ width: optionsSetup.lineWidth
+ };
+ obj.label = {
+ show: optionsSetup.isShowLine,
+ position: 'top',
+ distance: optionsSetup.distanceLine,
+ fontSize: optionsSetup.fontSizeLine,
+ color: optionsSetup.subTextColorLine,
+ fontWeight: optionsSetup.fontWeightLine
+ };
+ obj.data = val.series[i].data;
+ series.push(obj);
}
+ legendName.push(val.series[i].name);
}
- }
+ this.options.series = series;
+ this.options.legend['data'] = legendName;
+ this.setOptionsLegendName(legendName);
+ },
}
};
</script>
-<style scoped lang="scss">
+<style scoped lang='scss'>
.echarts {
width: 100%;
height: 100%;