浏览代码

waterAnalysisDataVisualization water.js 李欣儒 commit at 2020-10-09

李欣儒 4 年之前
父节点
当前提交
cca199a31a
共有 1 个文件被更改,包括 161 次插入0 次删除
  1. 161 0
      waterAnalysisDataVisualization/externalJs/water.js

+ 161 - 0
waterAnalysisDataVisualization/externalJs/water.js

@@ -388,3 +388,164 @@ function getListData(queryParam = {}) {
                             }
                         }
                     },
+                    series: [{
+                            symbol: "none",
+                            name: "方差",
+                            type: "line",
+                            data: a
+                        },
+                        {
+                            symbol: "none",
+                            name: "标准差",
+                            type: "line",
+                            data: b
+                        }, {
+                            symbol: "none",
+                            name: "平均值",
+                            type: "line",
+                            data: c
+                        }
+                    ]
+                };
+
+                myChart.setOption(option);
+                window.addEventListener("resize", function() {
+                    myChart.resize();
+                });
+
+
+            })();
+
+            // 渗漏隐患排查
+            (function() {
+
+                let leakage_investigation = result.RESULT[0].leakage_investigation;
+
+                // 结论数据渲染
+                var items = '';
+                var conclusion = leakage_investigation.conclusion
+                for (x in conclusion) {
+                    xIndex = x.substr(x.length - 1, 1);
+                    items += `<p>${xIndex}、${conclusion[x]}</p>`
+                }
+                $('.hiddenCheck .summaryDetail').html(items);
+
+                let abnormal_pressure = [];
+                let location_description = [];
+                let start_pressure = [];
+                let end_pressure = [];
+                let leakage_data = leakage_investigation.leakage_data;
+                leakage_data.forEach(function(item, index) {
+
+                    //异常值
+                    abnormal_pressure.push(item.abnormal_pressure)
+
+                    //楼层
+                    location_description.push(item.location_description)
+
+                    //开始值
+                    start_pressure.push(item.start_pressure)
+
+                    //结束值
+                    end_pressure.push(item.end_pressure)
+                });
+
+                var xData = location_description;
+
+                // 基于准备好的dom,初始化echarts实例
+                var myChart = echarts.init(document.querySelector(".bar.hiddenCheck .chart"));
+
+
+                var option = {
+                    backgroundColor: 'transparent',
+                    color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'],
+                    tooltip: {
+                        backgroundColor: '#12DFE0',
+                        //提示框组件
+                        trigger: 'axis',
+                        formatter: function(params) {
+                            // console.log(params)
+                            var res = '位置:' + params[0].axisValue + '<br />异常水压值 :' + abnormal_pressure[params[0].dataIndex] + 'Mpa';
+                            return res;
+                        },
+                        axisPointer: {
+                            type: 'shadow',
+                        },
+                        textStyle: {
+                            fontStyle: 'normal',
+                            fontFamily: '微软雅黑',
+                        },
+                    },
+                    grid: {
+                        left: '0',
+                        right: '0',
+                        bottom: '40',
+                        top: '0',
+                        containLabel: true,
+                    },
+
+                    //添加横线滚动条
+                    dataZoom: {
+                        start: 0, //默认为0
+                        end: 100 - 1500 / 12, //默认为100
+                        type: 'slider',
+                        show: xData.length > 4 ? true : false,
+                        xAxisIndex: [0],
+                        handleSize: 0, //滑动条的 左右2个滑动条的大小
+                        height: 4, //组件高度
+                        left: 20, //左边的距离
+                        right: 20, //右边的距离
+                        bottom: 20, //右边的距离
+                        handleColor: '#CBBCDB', //h滑动图标的颜色
+                        handleStyle: {
+                            borderColor: "#CBBCDB",
+                            borderWidth: "1",
+                            shadowBlur: 2,
+                            background: "#CBBCDB",
+                            shadowColor: "#CBBCDB",
+                        },
+                        textStyle: {
+                            color: "#fff"
+                        },
+
+                        backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜色
+                        showDataShadow: false, //是否显示数据阴影 默认auto
+                        // showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+                        filterMode: 'filter',
+                    },
+
+
+                    xAxis: [{
+                        type: 'category',
+                        //	boundaryGap: true,//坐标轴两边留白
+                        data: xData,
+                        axisLabel: {
+                            interval: 0,
+                            // rotate: 340,
+                            // formatter: function(val) {
+                            //     return val.split("").join("\n");
+                            // }, //横轴信息文字竖直显示
+                            textStyle: {
+                                color: '#AADDFF',
+                                fontStyle: 'normal',
+                                fontFamily: '微软雅黑',
+                                fontSize: 12,
+                            },
+                        },
+
+                        axisTick: {
+                            //坐标轴刻度相关设置。
+                            show: false,
+                        },
+                        axisLine: {
+                            //坐标轴轴线相关设置
+                        },
+                        splitLine: {
+                            //坐标轴在 grid 区域中的分隔线。
+                            show: false,
+                        },
+                    }, ],
+                    yAxis: [{
+                        type: 'value',
+
+                        axisLabel: false,