|
@@ -22,7 +22,9 @@ export default {
|
|
|
required: true,
|
|
|
validator(value) {
|
|
|
return (
|
|
|
- ["bar", "pie", "line", "barGroup", "lineGroup"].indexOf(value) !== -1
|
|
|
+ ["bar", "barReverse", "pie", "line", "barGroup", "lineGroup"].indexOf(
|
|
|
+ value
|
|
|
+ ) !== -1
|
|
|
);
|
|
|
}
|
|
|
},
|
|
@@ -33,6 +35,19 @@ export default {
|
|
|
chartTitle: {
|
|
|
type: String,
|
|
|
default: ""
|
|
|
+ },
|
|
|
+ chartColor: {
|
|
|
+ type: Array,
|
|
|
+ default() {
|
|
|
+ return [
|
|
|
+ "#22C0FF",
|
|
|
+ "#41CD7D",
|
|
|
+ "#FF7786",
|
|
|
+ "#4E7CFF",
|
|
|
+ "#6d32f9",
|
|
|
+ "#dd7755"
|
|
|
+ ];
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
@@ -147,7 +162,7 @@ export default {
|
|
|
},
|
|
|
getPieOption(datas) {
|
|
|
if (!datas.chartLabels.length) return;
|
|
|
- var seriesData = datas.chartLabels.map(function(item, index) {
|
|
|
+ const seriesData = datas.chartLabels.map(function(item, index) {
|
|
|
return {
|
|
|
name: item,
|
|
|
value: datas.chartData[0][index]
|
|
@@ -193,9 +208,12 @@ export default {
|
|
|
getBarOption(datas) {
|
|
|
if (!datas.names.length) return;
|
|
|
return {
|
|
|
+ color: this.chartColor,
|
|
|
grid: {
|
|
|
- top: "15%",
|
|
|
- bottom: "18%"
|
|
|
+ top: "20%",
|
|
|
+ bottom: "10%",
|
|
|
+ left: "8%",
|
|
|
+ right: "5%"
|
|
|
},
|
|
|
tooltip: {
|
|
|
show: true
|
|
@@ -203,8 +221,14 @@ export default {
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: datas.names,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(231,234,241,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
axisLabel: {
|
|
|
- fontSize: 14,
|
|
|
+ color: "#7C86A3",
|
|
|
+ fontSize: 12,
|
|
|
fontWeight: "bold"
|
|
|
},
|
|
|
axisTick: {
|
|
@@ -216,16 +240,18 @@ export default {
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
- color: "#e0e0e0"
|
|
|
+ color: "rgba(231,234,241,1)"
|
|
|
}
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: "#333"
|
|
|
+ color: "rgba(231,234,241,1)"
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
- fontSize: 14
|
|
|
+ color: "#7C86A3",
|
|
|
+ fontSize: 12,
|
|
|
+ fontWeight: "bold"
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false
|
|
@@ -233,15 +259,83 @@ export default {
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- name: "差值和",
|
|
|
+ name: this.chartTitle || "值",
|
|
|
type: "bar",
|
|
|
- barWidth: 30,
|
|
|
+ barWidth: 16,
|
|
|
data: datas.dataList,
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: "top",
|
|
|
- color: "#333",
|
|
|
- fontWeight: 600
|
|
|
+ itemStyle: {
|
|
|
+ barBorderRadius: 4
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ getBarReverseOption(datas) {
|
|
|
+ if (!datas.names.length) return;
|
|
|
+ return {
|
|
|
+ color: this.chartColor,
|
|
|
+ grid: {
|
|
|
+ top: "20%",
|
|
|
+ bottom: "10%",
|
|
|
+ left: "12%",
|
|
|
+ right: "5%"
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: datas.names,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(231,234,241,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(231,234,241,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#7C86A3",
|
|
|
+ fontSize: 12,
|
|
|
+ fontWeight: "bold"
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "value",
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(231,234,241,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(231,234,241,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#7C86A3",
|
|
|
+ fontSize: 12,
|
|
|
+ fontWeight: "bold"
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: this.chartTitle || "值",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 16,
|
|
|
+ data: datas.dataList,
|
|
|
+ itemStyle: {
|
|
|
+ barBorderRadius: 4
|
|
|
}
|
|
|
}
|
|
|
]
|
|
@@ -249,21 +343,23 @@ export default {
|
|
|
},
|
|
|
getBarGroupOption(datas) {
|
|
|
if (!datas.names.length) return;
|
|
|
- var onePageMaxBarNum = 20;
|
|
|
- var barNum = datas.names.length * datas.dataList.length;
|
|
|
- var xAxis = datas.dataList.map(function(item) {
|
|
|
+ const onePageMaxBarNum = 20;
|
|
|
+ const barNum = datas.names.length * datas.dataList.length;
|
|
|
+ const xAxis = datas.dataList.map(function(item) {
|
|
|
return item.name;
|
|
|
});
|
|
|
- var series = datas.names.map(function(name, index) {
|
|
|
- var data = datas.dataList.map(function(item) {
|
|
|
+ const series = datas.names.map(function(name, index) {
|
|
|
+ const data = datas.dataList.map(function(item) {
|
|
|
return item.data[index];
|
|
|
});
|
|
|
return {
|
|
|
name: name,
|
|
|
type: "bar",
|
|
|
data: data,
|
|
|
- barMaxWidth: 30,
|
|
|
- barMinHeight: 2
|
|
|
+ barMaxWidth: 8,
|
|
|
+ itemStyle: {
|
|
|
+ barBorderRadius: 2
|
|
|
+ }
|
|
|
// label: {
|
|
|
// show: true,
|
|
|
// position: "top",
|
|
@@ -276,10 +372,13 @@ export default {
|
|
|
};
|
|
|
});
|
|
|
|
|
|
- var options = {
|
|
|
+ const options = {
|
|
|
+ color: this.chartColor,
|
|
|
grid: {
|
|
|
- top: "15%",
|
|
|
- bottom: "10%"
|
|
|
+ top: "20%",
|
|
|
+ bottom: "10%",
|
|
|
+ left: "8%",
|
|
|
+ right: "5%"
|
|
|
},
|
|
|
tooltip: {
|
|
|
show: true,
|
|
@@ -288,8 +387,8 @@ export default {
|
|
|
type: "shadow"
|
|
|
},
|
|
|
formatter: function(params) {
|
|
|
- var label = params[0].axisValueLabel;
|
|
|
- var infos = params.map(function(item) {
|
|
|
+ const label = params[0].axisValueLabel;
|
|
|
+ let infos = params.map(function(item) {
|
|
|
return item.seriesName + ":" + item.value.toFixed(2) + "%";
|
|
|
});
|
|
|
infos.unshift(label);
|
|
@@ -308,7 +407,8 @@ export default {
|
|
|
type: "category",
|
|
|
data: xAxis,
|
|
|
axisLabel: {
|
|
|
- fontSize: 14,
|
|
|
+ color: "#7C86A3",
|
|
|
+ fontSize: 12,
|
|
|
fontWeight: "bold"
|
|
|
},
|
|
|
axisTick: {
|
|
@@ -318,10 +418,20 @@ export default {
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
splitLine: {
|
|
|
- show: false
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(231,234,241,1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(231,234,241,1)"
|
|
|
+ }
|
|
|
},
|
|
|
axisLabel: {
|
|
|
- fontSize: 14,
|
|
|
+ color: "#7C86A3",
|
|
|
+ fontSize: 12,
|
|
|
+ fontWeight: "bold",
|
|
|
formatter: function(value, index) {
|
|
|
return value + "%";
|
|
|
}
|
|
@@ -334,8 +444,8 @@ export default {
|
|
|
};
|
|
|
|
|
|
if (barNum > onePageMaxBarNum) {
|
|
|
- var zoomInitRange = Math.floor((onePageMaxBarNum * 100) / barNum);
|
|
|
- options.grid.bottom = "16%";
|
|
|
+ const zoomInitRange = Math.floor((onePageMaxBarNum * 100) / barNum);
|
|
|
+ options.grid.bottom = "18%";
|
|
|
options.dataZoom = [
|
|
|
{
|
|
|
type: "inside",
|
|
@@ -345,7 +455,8 @@ export default {
|
|
|
{
|
|
|
type: "slider",
|
|
|
start: 0,
|
|
|
- end: zoomInitRange
|
|
|
+ end: zoomInitRange,
|
|
|
+ bottom: "0%"
|
|
|
}
|
|
|
];
|
|
|
}
|
|
@@ -354,14 +465,14 @@ export default {
|
|
|
},
|
|
|
getLineGroupOption(datas) {
|
|
|
if (!datas.length) return;
|
|
|
- var names = datas.map(function(item) {
|
|
|
+ const names = datas.map(function(item) {
|
|
|
return item.name;
|
|
|
});
|
|
|
- var xaxis = datas[0].dataList.map(function(item, index) {
|
|
|
+ const xaxis = datas[0].dataList.map(function(item, index) {
|
|
|
return index;
|
|
|
});
|
|
|
|
|
|
- var series = datas.map(function(item) {
|
|
|
+ const series = datas.map(function(item) {
|
|
|
return {
|
|
|
name: item.name,
|
|
|
type: "line",
|
|
@@ -389,8 +500,8 @@ export default {
|
|
|
type: "shadow"
|
|
|
},
|
|
|
formatter: function(params) {
|
|
|
- var label = params[0].axisValueLabel;
|
|
|
- var infos = params.map(function(item) {
|
|
|
+ const label = params[0].axisValueLabel;
|
|
|
+ let infos = params.map(function(item) {
|
|
|
return item.seriesName + ":" + Math.sqrt(item.value);
|
|
|
});
|
|
|
infos.unshift(label);
|
|
@@ -425,7 +536,7 @@ export default {
|
|
|
axisLabel: {
|
|
|
fontSize: 14,
|
|
|
formatter: function(value) {
|
|
|
- var num = Math.sqrt(value);
|
|
|
+ const num = Math.sqrt(value);
|
|
|
return num % 1 ? "" : parseInt(num);
|
|
|
}
|
|
|
},
|