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

Merge remote-tracking branch 'origin/dev' into dev

Browse Source
Raod 3 years ago
parent 0638e23c5f 10108cea55
commit 9068e531a7
8 changed files with 428 additions and 186 deletions
Show Stats Download Patch File Download Diff File

1
report-ui/src/mixins/queryform.js
Unescape Escape View File

@ -139,6 +139,7 @@ export default {
const seriesData = []; const seriesData = [];
const value = chartProperties[key]; const value = chartProperties[key];
obj["type"] = value; obj["type"] = value;
obj["name"] = key;
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
if (value.startsWith("xAxis")) { if (value.startsWith("xAxis")) {
// 代表为x轴 // 代表为x轴

155
report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js
Unescape Escape View File

@ -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轴设置', name: 'X轴设置',
list: [ 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: '自定义配色', name: '自定义配色',
list: [ list: [

84
report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js
Unescape Escape View File

@ -9,7 +9,7 @@
export const widgetGradientBarchart = { export const widgetGradientBarchart = {
code: 'widget-gradient-color-barchart', code: 'widget-gradient-color-barchart',
type: 'chart', type: 'chart',
label: '柱形图-渐变色', label: '柱状图-渐变色',
icon: 'iconzhuzhuangtu', icon: 'iconzhuzhuangtu',
options: { 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轴设置', name: 'X轴设置',
list: [ list: [

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

@ -48,7 +48,7 @@ export const widgetMoreBarLine = {
name: 'pointSize', name: 'pointSize',
required: false, required: false,
placeholder: '', placeholder: '',
value: 5, value: 3,
}, },
{ {
type: 'el-switch', type: 'el-switch',
@ -56,7 +56,7 @@ export const widgetMoreBarLine = {
name: 'smoothCurve', name: 'smoothCurve',
required: false, required: false,
placeholder: '', placeholder: '',
value: true, value: false,
}, },
{ {
type: 'el-switch', type: 'el-switch',
@ -103,14 +103,6 @@ export const widgetMoreBarLine = {
placeholder: '', placeholder: '',
value: 5, value: 5,
}, },
{
type: 'el-slider',
label: '最小高度',
name: 'minHeight',
require: false,
placeholder: '',
value: 0,
},
], ],
}, },
{ {
@ -229,10 +221,10 @@ export const widgetMoreBarLine = {
{ {
type: 'el-input-text', type: 'el-input-text',
label: '图例名称', label: '图例名称',
name: 'layerName', name: 'legendName',
required: false, required: false,
placeholder: '', placeholder: '多值以'|'隔开',
value: '', value: ''
}, },
{ {
type: 'vue-color', type: 'vue-color',
@ -248,7 +240,7 @@ export const widgetMoreBarLine = {
name: 'lengedFontSize', name: 'lengedFontSize',
required: false, required: false,
placeholder: '', placeholder: '',
value: 16, value: 12,
}, },
{ {
type: 'el-input-number', type: 'el-input-number',
@ -256,7 +248,7 @@ export const widgetMoreBarLine = {
name: 'lengedWidth', name: 'lengedWidth',
required: false, required: false,
placeholder: '', placeholder: '',
value: 15, value: 12,
}, },
{ {
type: 'el-select', type: 'el-select',
@ -265,10 +257,11 @@ export const widgetMoreBarLine = {
required: false, required: false,
placeholder: '', placeholder: '',
selectOptions: [ selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'}, {code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'}, {code: 'right', name: '右对齐'},
], ],
value: '' value: 'center'
}, },
{ {
type: 'el-select', type: 'el-select',
@ -280,7 +273,7 @@ export const widgetMoreBarLine = {
{code: 'top', name: '顶部'}, {code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'}, {code: 'bottom', name: '底部'},
], ],
value: '' value: 'top'
}, },
{ {
type: 'el-select', type: 'el-select',
@ -292,7 +285,7 @@ export const widgetMoreBarLine = {
{code: 'vertical', name: '竖排'}, {code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'}, {code: 'horizontal', name: '横排'},
], ],
value: '未销,核销,总共,比例' value: 'horizontal'
}, },
], ],
}, },
@ -655,7 +648,12 @@ export const widgetMoreBarLine = {
label: '', label: '',
name: 'customColor', name: 'customColor',
required: false, 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', name: 'width',
required: false, required: false,
placeholder: '该容器在1920px大屏中的宽度', placeholder: '该容器在1920px大屏中的宽度',
value: 400, value: 500,
}, },
{ {
type: 'el-input-number', type: 'el-input-number',
@ -753,7 +751,7 @@ export const widgetMoreBarLine = {
name: 'height', name: 'height',
required: false, required: false,
placeholder: '该容器在1080px大屏中的高度', placeholder: '该容器在1080px大屏中的高度',
value: 200, value: 300,
}, },
], ],
} }

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

@ -258,11 +258,11 @@ export default {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const legend = this.options.legend; const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend; legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto"; legend.left = optionsSetup.lateralPosition;
legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto"; legend.right = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto"; legend.top = optionsSetup.longitudinalPosition;
legend.bottom = legend.bottom =
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto"; optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.lengedColor, color: optionsSetup.lengedColor,
@ -270,6 +270,25 @@ export default {
}; };
legend.itemWidth = optionsSetup.lengedWidth; 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() { setOptionsColor() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
@ -331,6 +350,10 @@ export default {
if (series[0].type == "bar") { if (series[0].type == "bar") {
series[0].data = data; series[0].data = data;
} }
const legendName = [];
legendName.push('销售量')
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
}, },
// 动态数据 // 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) { dynamicDataFn(val, refreshTime, optionsSetup) {
@ -365,11 +388,16 @@ export default {
} }
// series // series
const series = this.options.series; const series = this.options.series;
const legendName = [];
for (const i in series) { for (const i in series) {
if (series[i].type == "bar") { if (series[i].type == "bar") {
series[i].name = val.series[i].name;
series[i].data = val.series[i].data; series[i].data = val.series[i].data;
} }
legendName.push(val.series[i].name);
} }
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
} }
} }
}; };

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

@ -134,7 +134,7 @@ export default {
this.setOptionsTitle(); this.setOptionsTitle();
this.setOptionsX(); this.setOptionsX();
this.setOptionsY(); this.setOptionsY();
this.setOptionsTop(); this.setOptionsLine();
this.setOptionsBar(); this.setOptionsBar();
this.setOptionsTooltip(); this.setOptionsTooltip();
this.setOptionsData(); this.setOptionsData();
@ -262,7 +262,7 @@ export default {
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
// 折线设置 数值设置 // 折线设置 数值设置
setOptionsTop() { setOptionsLine() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
for (const key in series) { for (const key in series) {

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

@ -167,6 +167,7 @@ export default {
this.setOptionsX(); this.setOptionsX();
this.setOptionsY(); this.setOptionsY();
this.setOptionsTop(); this.setOptionsTop();
this.setOptionsLegend();
this.setOptionsMargin(); this.setOptionsMargin();
this.setOptionsColor(); this.setOptionsColor();
this.setOptionsData(); this.setOptionsData();
@ -323,11 +324,11 @@ export default {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const legend = this.options.legend; const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend; legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto"; legend.left = optionsSetup.lateralPosition;
legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto"; legend.right = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto"; legend.top = optionsSetup.longitudinalPosition;
legend.bottom = legend.bottom =
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto"; optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.lengedColor, color: optionsSetup.lengedColor,
@ -335,6 +336,25 @@ export default {
}; };
legend.itemWidth = optionsSetup.lengedWidth; 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() { setOptionsColor() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
@ -416,6 +436,10 @@ export default {
if (series[0].type == "bar") { if (series[0].type == "bar") {
series[0].data = data; series[0].data = data;
} }
const legendName = [];
legendName.push('销售量')
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
}, },
// 动态数据 // 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) { dynamicDataFn(val, refreshTime, optionsSetup) {
@ -451,11 +475,16 @@ export default {
// series // series
const series = this.options.series; const series = this.options.series;
const legendName = [];
for (const i in series) { for (const i in series) {
if (series[i].type == "bar") { if (series[i].type == "bar") {
series[i].name = val.series[i].name;
series[i].data = val.series[i].data; series[i].data = val.series[i].data;
} }
legendName.push(val.series[i].name);
} }
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
} }
} }
}; };

257
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, [{
@ -114,12 +113,11 @@ export default {
barBorderRadius: 6, barBorderRadius: 6,
}, },
}, },
data: [400, 400, 300, 300, 300, 400, 400, 400, 300] data: []
}, },
{ {
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, [{
@ -133,12 +131,11 @@ export default {
} }
}, },
data: [400, 500, 500, 500, 500, 400, 400, 500, 500] data: []
}, },
{ {
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, [{
@ -151,15 +148,14 @@ export default {
barBorderRadius: 6, barBorderRadius: 6,
} }
}, },
data: [400, 600, 700, 700, 1000, 400, 400, 600, 700] 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: {
@ -170,9 +166,9 @@ export default {
}, },
lineStyle: { 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: { 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
}; };
} }
@ -215,14 +211,11 @@ export default {
this.setOptionsTitle(); this.setOptionsTitle();
this.setOptionsX(); this.setOptionsX();
this.setOptionsY(); this.setOptionsY();
/* this.setOptionsLegend();
this.setOptionsTop();
this.setOptionsBar();
this.setOptionsTooltip(); this.setOptionsTooltip();
this.setOptionsData();
this.setOptionsMargin(); this.setOptionsMargin();
this.setOptionsLegend(); this.setOptionsColor();
this.setOptionsColor();*/ this.setOptionsData();
}, },
// 标题修改 // 标题修改
setOptionsTitle() { setOptionsTitle() {
@ -249,7 +242,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: {
@ -287,7 +280,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: { // 别名
@ -312,8 +305,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: { // 别名
@ -340,32 +333,11 @@ export default {
]; ];
this.options.yAxis = yAxis; 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 设置 // tooltip 设置
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,
@ -391,9 +363,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;
legend.bottom = legend.bottom =
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto"; optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.lengedColor, color: optionsSetup.lengedColor,
@ -401,45 +373,118 @@ export default {
}; };
legend.itemWidth = optionsSetup.lengedWidth; 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() { setOptionsColor() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor; const customColor = optionsSetup.customColor;
const series = this.options.series;
if (!customColor) return; if (!customColor) return;
const arrColor = []; const arrColor = [];
for (let i = 0; i < customColor.length; i++) { for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color); arrColor.push(customColor[i].color);
} }
this.options.color = arrColor; for (const i in series) {
this.options = Object.assign({}, this.options); if (series[i].type == 'bar') {
series[i].itemStyle.normal['color'] = arrColor[i];
} else {
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 series = this.options.series; const series = this.options.series;
let axis = []; let axis = [];
let bar = []; let bar1 = [];
let bar2 = [];
let bar3 = [];
let line = []; let line = [];
for (const i in val) { for (const i in val) {
axis[i] = val[i].axis; axis[i] = val[i].date;
bar[i] = val[i].bar; bar1[i] = val[i].unsales;
line[i] = val[i].line; bar2[i] = val[i].manus;
bar3[i] = val[i].rework;
line[i] = val[i].sales;
} }
// x轴 // x轴
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].data = bar; series[i].label = {
} else { show: optionsSetup.isShowBar,
series[i].data = line; 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) { dynamicDataFn(val, refreshTime) {
if (!val) return; if (!val) return;
@ -459,23 +504,73 @@ export default {
}); });
}, },
renderingFn(val) { renderingFn(val) {
const optionsSetup = this.optionsSetup;
this.options.xAxis.data = val.xAxis; this.options.xAxis.data = val.xAxis;
// series const series = [];
const series = this.options.series; const legendName = [];
for (const i in series) { for (const i in val.series) {
for (const j in val.series) { const obj = {};
if (series[i].type == val.series[j].type) { if (val.series[i].type == 'bar') {
series[i].data = val.series[j].data; 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> </script>
<style scoped lang="scss"> <style scoped lang='scss'>
.echarts { .echarts {
width: 100%; width: 100%;
height: 100%; height: 100%;

Write Preview
Loading…
Cancel
Save