From df1c052d1f0d368cb78ebb1831980745bca11edc Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Thu, 10 Jun 2021 11:56:18 +0800
Subject: [PATCH] 数据图表的查询渲染
---
images/addL/监控.png | 0
widgets/searchTabaPopup/Widget.js | 195 ++++++++++++++++-----
widgets/searchTabaPopup/Widget.html | 98 ++--------
widgets/searchTabaPopup/css/style.css | 6
images/addL/监测.png | 0
widgets/searchL/Widget.js | 218 +++++++++++++++++------
images/addL/全景.png | 0
7 files changed, 338 insertions(+), 179 deletions(-)
diff --git "a/images/addL/\345\205\250\346\231\257.png" "b/images/addL/\345\205\250\346\231\257.png"
new file mode 100644
index 0000000..f031979
--- /dev/null
+++ "b/images/addL/\345\205\250\346\231\257.png"
Binary files differ
diff --git "a/images/addL/\347\233\221\346\216\247.png" "b/images/addL/\347\233\221\346\216\247.png"
new file mode 100644
index 0000000..622d3e4
--- /dev/null
+++ "b/images/addL/\347\233\221\346\216\247.png"
Binary files differ
diff --git "a/images/addL/\347\233\221\346\265\213.png" "b/images/addL/\347\233\221\346\265\213.png"
new file mode 100644
index 0000000..640279b
--- /dev/null
+++ "b/images/addL/\347\233\221\346\265\213.png"
Binary files differ
diff --git a/widgets/searchL/Widget.js b/widgets/searchL/Widget.js
index cb9525f..43880d5 100644
--- a/widgets/searchL/Widget.js
+++ b/widgets/searchL/Widget.js
@@ -58,7 +58,7 @@
// console.log(2324345)
that.getInputData();
// console.log(that.searchDatas)
- if(typeof that.searchDatas == 'string'){
+ if (typeof that.searchDatas == 'string') {
var han = /^[\u4e00-\u9fa5]+$/;
if (han.test(that.searchDatas) || that.searchDatas == ' ') {
that.getData(0, that.searchDatas);
@@ -68,22 +68,22 @@
//得到各种内置组件
var layer = layui.layer //弹层
// layer.msg('请先填写关键字', { icon: 1, time: 1000, shift: 6 });
- layer.tips('请先填写关键字', '.searchImg',{
- tips: [2,'#FF5722']
+ layer.tips('请先填写关键字', '.searchImg', {
+ tips: [2, '#FF5722']
});
})
$('.searchLMain').hide();
}
- }else{
- if(that.searchDatas[0] && that.searchDatas[1]){
+ } else {
+ if (that.searchDatas[0] && that.searchDatas[1]) {
console.log(that.searchDatas);
- }else{
+ } else {
layui.use(function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
//得到各种内置组件
var layer = layui.layer //弹层
// layer.msg('请先填写关键字', { icon: 1, time: 1000, shift: 6 });
- layer.tips('请先填写完整坐标', '.searchImg',{
- tips: [2,'#FF5722']
+ layer.tips('请先填写完整坐标', '.searchImg', {
+ tips: [2, '#FF5722']
});
})
}
@@ -102,7 +102,7 @@
}
},
getData: function (index, val) {
- val = val == ' '? '': val;
+ val = val == ' ' ? '' : val;
var d = $('.searchLMain').find('.layui-tab-item').hide;
// console.log(d)
var that = this,
@@ -133,6 +133,7 @@
})
},
createDatas: function (d, n) {
+ this.map.entities.removeAll();//清除图标点
if (d == []) {
if (n == 0) {
this.beginLayUi(d);
@@ -145,8 +146,11 @@
var i = 1;
for (var k in d) {
d[k].tableId = i++;
+ //赋图标点
+ this.shiti(d[k], +n + 1);
}
var data = d;
+ console.log(data)
if (n == 0) {
this.beginLayUi(data);
} else if (n == 1) {
@@ -192,12 +196,49 @@
resize: function () {
},
- goOnPosition(arr) {
- // console.log(arr)
+ goOnPosition(arr, i, data) {
+ console.log(data)
this.map.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(Number(lng), Number(lat), Number(gaodu))
destination: Cesium.Cartesian3.fromDegrees(Number(arr[0]), Number(arr[1]), Number(8000))
});
+ },
+ //定位实体位置
+ shiti: function (data, i) {
+ var imgs = i == 1 ? 'images/addL/全景.png' : i == 2 ? 'images/addL/监控.png' : i == 3 ? 'images/addL/监测.png' : '';
+ this.map.entities.add({
+ id: data.id, // 实体ID
+ name: data.name, // 实体名称
+ position: Cesium.Cartesian3.fromDegrees(Number(data.lon), Number(data.lat)), // x,y 实体经纬度
+ // label: {
+ // show: true,
+ // text: item.siteName, // text 与实体相关的文字
+ // font: "700 14px '黑体'",
+ // fillColor: Cesium.Color.DEEPSKYBLUE,
+ // // backgroundColor: Cesium.Color.DEEPSKYBLUE,
+ // style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+ // outlineWidth: 2,
+ // outlineColor: Cesium.Color.fromBytes(255, 255, 255), // 文字轮廓的颜色
+ // verticalOrigin: Cesium.VerticalOrigin.CENTER,//垂直位置
+ // horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
+ // pixelOffset: new Cesium.Cartesian2(10, -10), // 文字位置
+ // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1, entityConfig.showheight),
+ // disableDepthTestDistance: Number.POSITIVE_INFINITY
+ // },
+ billboard: {
+ show: true,
+ // image: 'images/addL/监测.png',
+ image: imgs,
+ // image: entityConfig.img,
+ width: 40,
+ // height: 80,
+ clampToGround: true,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ // rotation: Cesium.Math.toRadians(angle),
+ }
+ })
},
beginLayUi: function (data = 1, data1 = 1, data2 = 1) {
// data.push(...data)
@@ -246,7 +287,7 @@
window.open(obj.data.panAddress);
// console.log(obj.data.panAddress)
} else if (layEvent === 'edit') {
- that.goOnPosition([obj.data.lon, obj.data.lat]);
+ that.goOnPosition([obj.data.lon, obj.data.lat], 1, obj.data);
}
});
}
@@ -296,7 +337,7 @@
$('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
$('.jimu-widget-searchTabaPopup').find('.p-main').eq(0).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
} else if (layEvent === 'edit') {
- that.goOnPosition([obj.data.lon, obj.data.lat]);
+ that.goOnPosition([obj.data.lon, obj.data.lat], 2, obj.data);
}
// console.log(obj.data.name)
});
@@ -337,58 +378,19 @@
// layer.msg('查看操作');
// 监测、测站详情 表格
- var str = '';
- var XQDom = $('.jimu-widget-searchTabaPopup').find('.xiangqing');
- XQDom.empty();
- str += '<table border="1" cellpadding="100">';
- str += `<tr>
- <th>测站名称：</th>
- <td>${obj.data.name}</td>
- <th>建设类型：</th>
- <td>建设</td>
- </tr>
- <tr>
- <th>经度：</th>
- <td>${obj.data.lon}</td>
- <th>纬度：</th>
- <td>${obj.data.lat}</td>
- </tr>
- <tr>
- <th>建站时间：</th>
- <td>${obj.data.accessTime}</td>
- <th>接入时间：</th>
- <td>${obj.data.createTime}</td>
- </tr>
- <tr>
- <th>所属保护区：</th>
- <td>鄱阳湖南矶湿地国家级自然保护区</td>
- <th>地址：</th>
- <td>暂无</td>
- </tr>
- <tr>
- <th>全景地址：</th>
- <td colspan="3">${obj.data.panoramaUrl}/</td>
- </tr>
- <tr>
- <th>测站简介：</th>
- <td class="left" colspan="3">暂无</td>
- </tr>
- <tr>
- <th>图片：</th>
- <td class="left" colspan="3">
- <img src="${obj.data.attList[0].uaOriginPath}" alt="">
- </td>
- </tr>`;
- str += '</table>';
- XQDom.append(str);
+ // console.log(obj.data.stcd)
+ // console.log(axios)
+ that.setXiangqing(obj);//渲染详情
+ that.getshuiwen(obj.data.stcd)//水文实时渲染
+ that.setbiaoti(obj.data)//表格各分部标题渲染
$('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
$('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
// console.log(obj.data.name)
} else if (layEvent === 'edit') {
- that.goOnPosition([obj.data.lon, obj.data.lat]);
+ that.goOnPosition([obj.data.lon, obj.data.lat], 3, obj.data);
}
});
}
@@ -396,7 +398,107 @@
//…
});
},
+ setXiangqing(obj) {
+ var str = '';
+ var XQDom = $('.jimu-widget-searchTabaPopup').find('.xiangqing');
+ XQDom.empty();
+ str += '<table border="1" cellpadding="100">';
+ str += `<tr>
+ <th>测站名称：</th>
+ <td>${obj.data.name}</td>
+ <th>建设类型：</th>
+ <td>建设</td>
+ </tr>
+ <tr>
+ <th>经度：</th>
+ <td>${obj.data.lon}</td>
+ <th>纬度：</th>
+ <td>${obj.data.lat}</td>
+ </tr>
+ <tr>
+ <th>建站时间：</th>
+ <td>${obj.data.accessTime}</td>
+ <th>接入时间：</th>
+ <td>${obj.data.createTime}</td>
+ </tr>
+ <tr>
+ <th>所属保护区：</th>
+ <td>鄱阳湖南矶湿地国家级自然保护区</td>
+ <th>地址：</th>
+ <td>暂无</td>
+ </tr>
+ <tr>
+ <th>全景地址：</th>
+ <td colspan="3">${obj.data.panoramaUrl}/</td>
+ </tr>
+ <tr>
+ <th>测站简介：</th>
+ <td class="left" colspan="3">暂无</td>
+ </tr>
+ <tr>
+ <th>图片：</th>
+ <td class="left" colspan="3">
+ <img src="${obj.data.attList[0].uaOriginPath}" alt="">
+ </td>
+ </tr>`;
+ str += '</table>';
+ XQDom.append(str);
+ },
+ getshuiwen: function (stcd) {
+ var that = this;
+ var url = `http://171.34.76.171:8880/pyh-station/monitorData/queryNewestTimeEleDataByStcd?stcd=${stcd}`,
+ token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjMyNDQxNDQsImV4cCI6MTYyNTgzNjE0NH0.wjtMw7hv8IYGxFKI9b1vo2ozMXD1pE0-02HinfPl-r8l0TYVg1YvMBxW_VzzFKoY1jeC6XByQQT-aC_mAvBnWA';
+ axios.get(url, {
+ headers: {
+ 'token': token
+ }
+ }).then((res) => {
+ if (res.data.code == 200) {
+ var datashuiziyuan = res.data.data.MONITOR_WATER//水资源数据
+ that.setshishidata(datashuiziyuan, stcd);
+ var datakongqi = res.data.data.MONITOR_AIR//空气源数据
+ that.setshishidata(datakongqi, stcd, '#kongqishishi');
+ var dataqixiang = res.data.data.MONITOR_WEATHER//气象源数据
+ that.setshishidata(dataqixiang, stcd, '#qixiangshishi');
+ }
+ })
+ },
+ setshishidata: function (data, stcd, id = '#shuiwenshishi') {
+ var str = '',
+ shuiwenDom = $('.jimu-widget-searchTabaPopup').find(id)
+ shuiwenDom.empty();
+ str = `<table class="layui-table">
+ <colgroup>
+ <col width="150">
+ <col width="150">
+ <col width="200">
+ <col>
+ </colgroup>
+ <thead>
+ <tr>
+ <th>名称</th>
+ <th>数值</th>
+ <th>单位</th>
+ </tr>
+ </thead>
+ <tbody>`
+ for (var k in data) {
+ str += `<tr><td>${data[k].name}</td><td>${data[k].value}</td><td>${data[k].unit}</td></tr>`
+ }
+ str += `</tbody></table>
+ <input type="test" id="userMyStcd" style="display:none" value="${stcd}"/>`//占位传stcd 给图表历史查询用
+ shuiwenDom.append(str);
+
+ },
+ setbiaoti: function (data) {
+ var title = $('.jimu-widget-searchTabaPopup').find('.myOUrtitle');
+ title.empty();
+ title.append(data.name);
+ var time = $('.jimu-widget-searchTabaPopup').find('.myOUrtime');
+ time.empty();
+ time.append(data.createTime);
+ },
destroy: function () {
//销毁的时候触发
diff --git a/widgets/searchTabaPopup/Widget.html b/widgets/searchTabaPopup/Widget.html
index 9381609..e32431c 100644
--- a/widgets/searchTabaPopup/Widget.html
+++ b/widgets/searchTabaPopup/Widget.html
@@ -26,8 +26,8 @@
<div class="layui-tab-item ">
<div class="shishishuju">
<div class="heard">
- <div>当前站点：<span>南矶山备战湖</span> </div>
- <div>监测时间：<span>2021-05-06 10：07:00</span> </div>
+ <div>当前站点：<span class="myOUrtitle">南矶山备战湖</span> </div>
+ <div>监测时间：<span class="myOUrtime">2021-05-06 10：07:00</span> </div>
</div>
<div class="layui-tab">
<ul class="layui-tab-title">
@@ -36,68 +36,11 @@
<li>气象数据</li>
</ul>
<div class="layui-tab-content">
- <div class="layui-tab-item layui-show">
- <table class="layui-table">
- <colgroup>
- <col width="150">
- <col width="150">
- <col width="200">
- <col>
- </colgroup>
- <thead>
- <tr>
- <th>名称</th>
- <th>数值</th>
- <th>单位</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>水温</td>
- <td>0</td>
- <td>℃</td>
- </tr>
- <tr>
- <td>PH值</td>
- <td>0</td>
- <td>无量纲</td>
- </tr>
- <tr>
- <td>溶解氧</td>
- <td>0</td>
- <td>ppm</td>
- </tr>
- <tr>
- <td>电导率</td>
- <td>0</td>
- <td>S/m</td>
- </tr>
- <tr>
- <td>叶绿素a</td>
- <td>0</td>
- <td>ug/L</td>
- </tr>
- <tr>
- <td>浑浊度</td>
- <td>0</td>
- <td>NTU</td>
- </tr>
- <tr>
- <td>化学需氧量</td>
- <td>0</td>
- <td>无量纲</td>
- </tr>
- <tr>
- <td>总磷</td>
- <td>0</td>
- <td>mg/L</td>
- </tr>
-
- </tbody>
- </table>
+ <div class="layui-tab-item layui-show" id="shuiwenshishi">
+ <!-- js数据 -->
</div>
- <div class="layui-tab-item">空气质量数据</div>
- <div class="layui-tab-item">气象数据</div>
+ <div class="layui-tab-item" id="kongqishishi">空气质量数据</div>
+ <div class="layui-tab-item" id="qixiangshishi">气象数据</div>
</div>
</div>
</div>
@@ -105,29 +48,28 @@
<div class="layui-tab-item">
<div class="lishijilv">
<div class="heard">
- <div class="left">
+ <div class="left" id="leftTimesdom">
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
- <!-- <label class="layui-form-label">日期范围</label> -->
- <div class="layui-inline" id="test6">
+ <div class="layui-inline" id="time6">
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="test-startDate-1"
- class="layui-input" placeholder="开始日期">
+ class="layui-input myCHosetimeinput" placeholder="开始日期">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="test-endDate-1"
- class="layui-input" placeholder="结束日期">
+ class="layui-input myCHosetimeinput" placeholder="结束日期">
</div>
</div>
</div>
</div>
</div>
- <button type="button" class="layui-btn layui-btn-normal">查询</button>
- <button type="button" class="layui-btn layui-btn-danger">清空</button>
+ <button type="button" id="query" class="layui-btn layui-btn-normal">查询</button>
+ <button type="button" id="empty" class="layui-btn layui-btn-danger">清空</button>
</div>
- <div class="rights">当前站点：<span>南矶山备战湖</span> </div>
+ <div class="rights">当前站点：<span class="myOUrtitle">南矶山备战湖</span> </div>
</div>
<div class="layui-tab">
<ul class="layui-tab-title">
@@ -137,12 +79,20 @@
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
- <div style="width: 1100px;height:380px;" class="popup-threse-shuiwenEcharts" id="popup-threse-shuiwenEcharts">
+ <div style="width: 1080px;height:380px;" class="popup-threse-shuiwenEcharts" id="popup-threse-shuiwenEcharts">
</div>
</div>
- <div class="layui-tab-item">空气质量数据</div>
- <div class="layui-tab-item">气象数据</div>
+ <div class="layui-tab-item">
+ <div style="width: 1080px;height:380px;" class="popup-threse-shuiwenEcharts" id="popup-threse-shuiwenEcharts1">
+
+ </div>
+ </div>
+ <div class="layui-tab-item">
+ <div style="width: 1080px;height:380px;" class="popup-threse-shuiwenEcharts" id="popup-threse-shuiwenEcharts2">
+
+ </div>
+ </div>
</div>
</div>
</div>
diff --git a/widgets/searchTabaPopup/Widget.js b/widgets/searchTabaPopup/Widget.js
index af7e4d3..626da8c 100644
--- a/widgets/searchTabaPopup/Widget.js
+++ b/widgets/searchTabaPopup/Widget.js
@@ -29,8 +29,32 @@
layers: {},
startup: function () {
// 暴露在外的接
+ var that = this;
$('.cloce').click(() => {
$('.jimu-widget-searchTabaPopup').css({ 'display': 'none' })
+ })
+
+ $('.jimu-widget-searchTabaPopup').find('#query').click(() => {
+ if (that.times[0] != 1) {
+ // console.log(that.times);
+ var stcd = $('.jimu-widget-searchTabaPopup').find('#userMyStcd').val()
+ console.log(stcd);
+ that.getOurData(that.times, stcd);
+ } else {
+ layui.use(function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
+ //得到各种内置组件
+ var layer = layui.layer //弹层
+ // layer.msg('请先填写关键字', { icon: 1, time: 1000, shift: 6 });
+ layer.tips('请先选择时间', '#query', {
+ tips: [1, '#FF5722']
+ });
+ })
+ }
+ })
+
+ $('.jimu-widget-searchTabaPopup').find('#empty').click(() => {
+ $('.myCHosetimeinput').val("");
+ that.times = [1];
})
},
@@ -42,6 +66,7 @@
},
onOpen: function () {
+ var that = this;
// $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
// $('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
this.creMyEcharts();
@@ -49,20 +74,130 @@
var laydate = layui.laydate;
laydate.render({
- elem: '#test6'
+ elem: '#time6'
//设置开始日期、日期日期的 input 选择器
+ , type: 'datetime'
//数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
, range: ['#test-startDate-1', '#test-endDate-1']
+ , done: function (value, date) {
+ let begintime = value.substring(0, 19),
+ endtime = value.substring(22);
+ that.times = [begintime, endtime];
+ // console.log(that.times)
+ }
});
+ // laydate.render({
+ // elem: '#test6'
+ // ,type: 'datetime'
+ // ,range: true
+ // });
});
this.getEchartsData();
},
+ times: [1],
myChart: '',
+ myChart1: '',
+ myChart2: '',
creMyEcharts: function (id) {
var dom = document.getElementById('popup-threse-shuiwenEcharts');
this.myChart = echarts.init(dom);
+ var dom = document.getElementById('popup-threse-shuiwenEcharts1');
+ this.myChart1 = echarts.init(dom);
+ var dom = document.getElementById('popup-threse-shuiwenEcharts2');
+ this.myChart2 = echarts.init(dom);
},
- getEchartsData: function () {
+ getOurData: function (time, stcd) {
+ console.log(time)
+ var that = this
+ , url = `http://171.34.76.171:8880/pyh-station/monitorData/queryStationHistoryMonitorData?stcd=${stcd}&startTime=${time[0]}&endTime=${time[1]}`,
+ token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjMyNDQxNDQsImV4cCI6MTYyNTgzNjE0NH0.wjtMw7hv8IYGxFKI9b1vo2ozMXD1pE0-02HinfPl-r8l0TYVg1YvMBxW_VzzFKoY1jeC6XByQQT-aC_mAvBnWA';
+ axios.get(url, {
+ headers: {
+ 'token': token
+ }
+ }).then((res) => {
+ if (res.data.code == 200) {
+ var shui = res.data.data.MONITOR_WATER//水文
+ , legendData = []
+ , xData = []
+ , seriesData = [];
+ for (var k in shui) {
+ legendData.push(shui[k].name);
+ var once = {
+ name: shui[k].name,
+ type: 'line',
+ stack: '总量',
+ data: [],
+ }
+ var onS = shui[k].valList;
+ for (var o in onS) {
+ once.data.push(onS[o].value);
+ }
+ seriesData.push(once);
+ }
+ var ins = shui[0].valList;
+ for (var i in ins) {
+ xData.push(ins[i].startTime);
+ }
+ that.getEchartsData(legendData, xData, seriesData, 1);//水文
+
+ var air = res.data.data.MONITOR_AIR//空气
+ , legendDataair = []
+ , xDataair = []
+ , seriesDataair = [];
+ for (var k in air) {
+ legendDataair.push(air[k].name);
+ var once = {
+ name: air[k].name,
+ type: 'line',
+ stack: '总量',
+ data: [],
+ }
+ var onS = air[k].valList;
+ for (var o in onS) {
+ once.data.push(onS[o].value);
+ }
+ seriesDataair.push(once);
+ }
+ var ins = air[0].valList;
+ for (var i in ins) {
+ xDataair.push(ins[i].startTime);
+ }
+ // console.log(shui);
+ // console.log(seriesData);
+ // 渲染图表
+ that.getEchartsData(legendDataair, xDataair, seriesDataair, 2);//空气
+
+ var qi = res.data.data.MONITOR_WEATHER//气象
+ , legendDataqi = []
+ , xDataqi = []
+ , seriesDataqi = [];
+ for (var k in qi) {
+ legendDataqi.push(qi[k].name);
+ var once = {
+ name: qi[k].name,
+ type: 'line',
+ stack: '总量',
+ data: [],
+ }
+ var onS = qi[k].valList;
+ for (var o in onS) {
+ once.data.push(onS[o].value);
+ }
+ seriesDataqi.push(once);
+ }
+ var ins = qi[0].valList;
+ for (var i in ins) {
+ xDataqi.push(ins[i].startTime);
+ }
+ // console.log(shui);
+ // console.log(seriesData);
+ // 渲染图表
+ that.getEchartsData(legendDataqi, xDataqi, seriesDataqi, 3);//气象
+ }
+ })
+ },
+ getEchartsData: function (l, x, s, i) {
var that = this;
var option;
@@ -82,62 +217,32 @@
trigger: 'axis'
},
legend: {
- data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
+ data: l
+ // data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
grid: {
- left: '3%',
- right: '4%',
+ left: '1%',
+ right: '3%',
bottom: '12%',
containLabel: true
},
- // toolbox: {
- // feature: {
- // saveAsImage: {}
- // }
- // },
xAxis: {
type: 'category',
boundaryGap: false,
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+ data: x
},
yAxis: {
type: 'value'
},
- series: [
- {
- name: '邮件营销',
- type: 'line',
- stack: '总量',
- data: [120, 132, 101, 134, 90, 230, 210]
- },
- {
- name: '联盟广告',
- type: 'line',
- stack: '总量',
- data: [220, 182, 191, 234, 290, 330, 310]
- },
- {
- name: '视频广告',
- type: 'line',
- stack: '总量',
- data: [150, 232, 201, 154, 190, 330, 410]
- },
- {
- name: '直接访问',
- type: 'line',
- stack: '总量',
- data: [320, 332, 301, 334, 390, 330, 320]
- },
- {
- name: '搜索引擎',
- type: 'line',
- stack: '总量',
- data: [820, 932, 901, 934, 1290, 1330, 1320]
- }
- ]
+ series: s,
};
-
- option && that.myChart.setOption(option);
+ if (i == 1) {
+ option && that.myChart.setOption(option);
+ } else if (i == 2) {
+ option && that.myChart1.setOption(option);
+ } else if (i == 3) {
+ option && that.myChart2.setOption(option);
+ }
},
onClose: function () {
//面板关闭的时候触发 （when this panel is closed trigger）
diff --git a/widgets/searchTabaPopup/css/style.css b/widgets/searchTabaPopup/css/style.css
index 35345ec..99312a7 100644
--- a/widgets/searchTabaPopup/css/style.css
+++ b/widgets/searchTabaPopup/css/style.css
@@ -18,11 +18,13 @@
.jimu-widget-searchTabaPopup .popup {
/* display: none; */
width: 1100px;
- height: 600px;
+ min-height: 600px;
+ max-height: 750px;
+ overflow: auto;
/* border: 1px solid salmon; */
position: relative;
border-radius: 5px;
- top: calc(50% - 300px);
+ top: calc(50% - 380px);
left: calc(50% - 549px);
background-color: rgba(255, 255, 255, 1);
}
--
Gitblit v1.9.3