|
@@ -11,13 +11,8 @@
|
|
|
1点位对多表号功能号:{{ pointData.oneToM }}
|
|
|
<br />
|
|
|
多点为对1表号功能号:{{ pointData.mToOne }}
|
|
|
- <el-button
|
|
|
- @click="showOverview"
|
|
|
- type="info"
|
|
|
- icon="el-icon-arrow-right"
|
|
|
- circle
|
|
|
- style="margin:-25px 0 0 50px;"
|
|
|
- ></el-button>
|
|
|
+ <el-button @click="showOverview" type="info" icon="el-icon-arrow-right" circle
|
|
|
+ style="margin:-25px 0 0 50px;background:rgb(121, 187, 255);color:rgb(233, 233, 235);border:none;"></el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 图形图 -->
|
|
@@ -58,7 +53,7 @@ export default {
|
|
|
barChartData: [],
|
|
|
//表号功能号
|
|
|
pointData: {
|
|
|
- tabFuncNumSum:0,
|
|
|
+ tabFuncNumSum: 0,
|
|
|
oneToM: 0,
|
|
|
mToOne: 0,
|
|
|
disConn: 0
|
|
@@ -75,30 +70,32 @@ export default {
|
|
|
loadChart() {
|
|
|
//获取环形图数据
|
|
|
getIntegrateStatisticsToLoop({}, res => {
|
|
|
- if(res.Result && res.Result == "success"){
|
|
|
+ if (res.Result && res.Result == "success") {
|
|
|
this.pointData = {
|
|
|
tabFuncNumSum: res.Content[0].Sum,
|
|
|
- oneToM: res.Content[0].OtoM,
|
|
|
+ oneToM: res.Content[0].OtoM,
|
|
|
mToOne: res.Content[0].MtoO,
|
|
|
disConn: res.Content[0].Disconn
|
|
|
- };
|
|
|
+ };
|
|
|
}
|
|
|
this.loopChartData = [
|
|
|
{ value: res.Content[0].RelatedCount, name: "已对实例数量" },
|
|
|
{ value: res.Content[0].Sum - res.Content[0].RelatedCount, name: "未对应实例数量" }
|
|
|
];
|
|
|
|
|
|
+ let that = this;
|
|
|
//环形图参数
|
|
|
let loopOption = {
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
|
|
},
|
|
|
+ color: ['rgb(121, 187, 255)', 'rgb(233, 233, 235)'],
|
|
|
legend: {
|
|
|
orient: "vertical",
|
|
|
x: "5%",
|
|
|
y: "top",
|
|
|
- data: this.loopChartData.map(item => item.name)
|
|
|
+ data: that.loopChartData.map(item => item.name)
|
|
|
},
|
|
|
graphic: {
|
|
|
elements: [
|
|
@@ -109,7 +106,7 @@ export default {
|
|
|
style: {
|
|
|
text: (() => {
|
|
|
let s = 0;
|
|
|
- this.loopChartData.map(item => {
|
|
|
+ that.loopChartData.map(item => {
|
|
|
s += item["value"];
|
|
|
});
|
|
|
return s + "\n总数";
|
|
@@ -122,31 +119,32 @@ export default {
|
|
|
]
|
|
|
},
|
|
|
series: [
|
|
|
- {
|
|
|
- name: "实例总数",
|
|
|
- type: "pie",
|
|
|
- radius: ["50%", "70%"],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: false,
|
|
|
- position: "outside"
|
|
|
+ {
|
|
|
+ name: "实例总数",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["50%", "70%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ legendHoverLink: false,
|
|
|
+ selectedOffset: 0,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: "outside"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
},
|
|
|
emphasis: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- fontSize: "15",
|
|
|
- fontWeight: "bold"
|
|
|
+ itemStyle: {
|
|
|
+ // 高亮时点的颜色。
|
|
|
+ color:undefined
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- normal: {
|
|
|
- show: true
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.loopChartData
|
|
|
- }
|
|
|
+ },
|
|
|
+ data: this.loopChartData
|
|
|
+ }
|
|
|
]
|
|
|
};
|
|
|
|
|
@@ -154,11 +152,23 @@ export default {
|
|
|
this.loopChart = echarts.init(this.$refs.loopchart);
|
|
|
//设置参数并加载
|
|
|
this.loopChart.setOption(loopOption);
|
|
|
- });
|
|
|
+ //消除高亮
|
|
|
+ this.loopChart.on('mouseover', function (param) {
|
|
|
+ if (param.dataIndex == 1) {
|
|
|
+ loopOption.series[0].emphasis.itemStyle.color = 'rgb(233, 233, 235)';
|
|
|
+ that.loopChart.setOption(loopOption);
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ loopOption.series[0].emphasis.itemStyle.color = 'rgb(121, 187, 255)';
|
|
|
+ that.loopChart.setOption(loopOption);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
|
|
|
//获取条形图数据
|
|
|
getIntegrateStatisticsToBar({}, res => {
|
|
|
- if(res.Result && res.Result == "success"){
|
|
|
+ if (res.Result && res.Result == "success") {
|
|
|
this.barChartData = res.Content;
|
|
|
}
|
|
|
|
|
@@ -180,6 +190,7 @@ export default {
|
|
|
type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
|
|
|
}
|
|
|
},
|
|
|
+ color: ['rgb(121, 187, 255)', 'rgb(233, 233, 235)'],
|
|
|
legend: {
|
|
|
data: ["已接入", "未接入"]
|
|
|
},
|
|
@@ -266,7 +277,7 @@ export default {
|
|
|
}
|
|
|
.statistics-chart {
|
|
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
|
- min-height:50%;
|
|
|
+ min-height: 50%;
|
|
|
}
|
|
|
.chart-title {
|
|
|
padding: 5px 5%;
|