123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289 |
- <template>
- <div id="integrateStatistics">
- <!-- 环形表 -->
- <div class="statistics-chart">
- <div class="chart-title">表号功能号总数量:{{ pointData.tabFuncNumSum }} <span style="float:right">目前可能断数的数量:{{ pointData.disConn }}</span></div>
- <hr style="width:90%" />
- <div ref="loopchart" class="chart" id="loopchart"></div>
- </div>
- <!-- 图形图 -->
- <div class="statistics-chart" style="border-top:5px solid #eee;min-height: calc(65% - 3px);">
- <div class="chart-title">共包含原始点位:{{ originalPoint }} 个</div>
- <hr style="width:90%" />
- <div style="padding:15px 10%;line-height:2;">
- 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;background:rgb(121, 187, 255);color:rgb(225, 228, 229);border:none;"></el-button>
- </div>
- <hr style="width:90%;margin-top: 1px;" />
- <div ref="barchart" class="chart" id="barchart" :style="{height:barChartData.length * 120 + 'px'}"></div>
- </div>
- <!-- 点位/表号共更好对应总览 -->
- <pointTabOverview ref="overviewDialog"></pointTabOverview>
- </div>
- </template>
- <script>
- //echarts
- import echarts from "echarts";
- import "echarts/lib/chart/bar";
- import "echarts/lib/component/tooltip";
- import "echarts/lib/component/title";
- import {
- getIntegrateStatisticsToLoop,
- getIntegrateStatisticsToBar
- } from "@/api/scan/request";
- import pointTabOverview from "./pointTabOverview";
- export default {
- data() {
- return {
- //环形图
- loopChart: null,
- //条形图
- barChart: null,
- //环形图数据
- loopChartData: [],
- //条形图数据
- barChartData: [],
- //点位-标号功能号数据
- pointData: {
- tabFuncNumSum: 0,//总数
- oneToM: 0,//一对多
- mToOne: 0,//多对一
- disConn: 0//可能断数数量
- },
- //原始点数量
- originalPoint: null
- };
- },
- methods: {
- //加载图表数据
- loadChart() {
- //获取环形图数据
- getIntegrateStatisticsToLoop({}, res => {
- //设置点位-表号功能号数据
- this.pointData = {
- tabFuncNumSum: res.Content[0].Sum,
- 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(225, 228, 229)'],
- graphic: {
- elements: [
- {
- type: "text",
- left: "center",
- top: "center",
- style: {
- text: (() => {
- let s = 0;
- that.loopChartData.map(item => {
- s += item["value"];
- });
- return s;
- })(),
- textAlign: "center",
- fontSize: 32,
- fontWeight: 300
- }
- },
- {
- type: "text",
- left: "center",
- top: "center",
- style: {
- text: (() => {
- let s = 0;
- that.loopChartData.map(item => {
- s += item["value"];
- });
- return "\n\n\n总数";
- })(),
- textAlign: "center",
- fontSize: 16,
- fontWeight: 300
- }
- }
- ]
- },
- series: [
- {
- name: "实例总数",
- type: "pie",
- radius: ["50%", "70%"],
- avoidLabelOverlap: false,
- legendHoverLink: false,
- selectedOffset: 0,
- label:{
- color:'rgb(121, 187, 255)',
- },
- emphasis: {
- itemStyle: {
- // 高亮时点的颜色。
- color: undefined
- }
- },
- data: this.loopChartData
- }
- ]
- };
- setTimeout(() => {
- //实例化
- that.loopChart = echarts.init(document.getElementById("loopchart"));
- //设置参数并加载
- that.loopChart.setOption(loopOption);
- //消除高亮
- that.loopChart.on('mouseover', function (param) {
- if (param.dataIndex == 1) {
- loopOption.series[0].emphasis.itemStyle.color = 'rgb(225, 228, 229)';
- that.loopChart.setOption(loopOption);
- }
- else {
- loopOption.series[0].emphasis.itemStyle.color = 'rgb(121, 187, 255)';
- that.loopChart.setOption(loopOption);
- }
- });
- }, 100);
- })
- //获取条形图数据
- getIntegrateStatisticsToBar({}, res => {
- this.barChartData = res.Content;
- this.originalPoint = (() => {
- let sum = 0;
- this.barChartData.map(item => {
- sum += item["Sum"];
- });
- return sum;
- })();
- //条形图参数
- let barOption = {
- tooltip: {
- trigger: "axis",
- axisPointer: {
- // 坐标轴指示器,坐标轴触发有效
- type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
- }
- },
- color: ['rgb(121, 187, 255)', 'rgb(225, 228, 229)'],
- legend: {
- data: ["已接入", "未接入"]
- },
- grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true
- },
- xAxis: [
- {
- type: "value",
- position: "top"
- }
- ],
- yAxis: [
- {
- type: "category",
- axisTick: { show: false },
- data: this.barChartData.map(item => item.Name)
- }
- ],
- series: [
- {
- name: "已接入",
- type: "bar",
- label: {
- normal: {
- show: true,
- position: "inside"
- }
- },
- data: this.barChartData.map(item => item.Relatedall)
- },
- {
- name: "未接入",
- type: "bar",
- stack: "总量",
- label: {
- normal: {
- show: true
- }
- },
- data: this.barChartData.map(item => item.Notrelatedall)
- }
- ]
- };
- /* 条形图高度随数量变化,延时初始化 */
- let that = this;
- setTimeout(() => {
- that.barChart = echarts.init(document.getElementById("barchart"));
- that.barChart.setOption(barOption);
- }, 100);
- });
- },
- //点位/表号
- showOverview() {
- this.$refs.overviewDialog.loadOverviewData();
- },
- init() {
- this.loadChart();
- }
- },
- mounted() {
- this.init();
- //图表随窗口变化
- let that = this;
- window.onresize = () => {
- if (that.loopChart != null)
- that.loopChart.resize();
- if (that.barChart != null)
- that.barChart.resize();
- };
- },
- components: {
- pointTabOverview
- }
- };
- </script>
- <style lang="less" scoped>
- #integrateStatistics {
- border-top: 5px solid #eee;
- }
- .statistics-chart {
- min-height: calc(35% - 3px);
- }
- .chart-title {
- padding: 5px 5%;
- font-size: 16px;
- font-weight: 500;
- }
- .chart {
- min-height: 200px;
- height: auto;
- width: 100%;
- }
- </style>
|