From 8f048024b02f0af68b43209b9ba0e66069729bc5 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 09 Jun 2021 15:01:21 +0800
Subject: [PATCH] popup弹窗加echarts
---
widgets/searchTabaPopup/Widget.js | 132 +++++++++++++++++++++++++++----------------
1 files changed, 82 insertions(+), 50 deletions(-)
diff --git a/widgets/searchTabaPopup/Widget.js b/widgets/searchTabaPopup/Widget.js
index 488d71a..d00b791 100644
--- a/widgets/searchTabaPopup/Widget.js
+++ b/widgets/searchTabaPopup/Widget.js
@@ -42,58 +42,9 @@
},
onOpen: function () {
- //面板打开的时候触发 （when open this panel trigger）
- // cc
-
// $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
// $('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
- // var str = '';
- // var XQDom = $('.jimu-widget-searchTabaPopup').find('.xiangqing');
- // XQDom.empty();
-
- // str += '<table border="1" cellpadding="100">';
- // str += `<tr>
- // <th>测站名称：</th>
- // <td>南矶山战备湖</td>
- // <th>建设类型：</th>
- // <td>建设</td>
- // </tr>
- // <tr>
- // <th>经度：</th>
- // <td>116.280167</td>
- // <th>纬度：</th>
- // <td>28.918818</td>
- // </tr>
- // <tr>
- // <th>建站时间：</th>
- // <td>2021-05-23 09:52:48</td>
- // <th>纬度：</th>
- // <td>2021-05-23 09:52:48</td>
- // </tr>
- // <tr>
- // <th>所属保护区：</th>
- // <td>鄱阳湖南矶湿地国家级自然保护区</td>
- // <th>地址：</th>
- // <td>暂无</td>
- // </tr>
- // <tr>
- // <th>全景地址：</th>
- // <td colspan="3">北深湖(http://vr.jxpskj.com/pyhyjpt/njsdgjzrbhq/bshenh/</td>
- // </tr>
- // <tr>
- // <th>测站简介：</th>
- // <td class="left" colspan="3">南矶山保护区为国家级湿地自然保护区。位于江西省南昌市新建县南矶乡境内,由南矶山自然保护区管理站管理。南矶山省级自然保护区成立于1997年,2005年晋升为国家级自然保护区。保护对象为候乌及湿地生态系统。南矶山省级自然保护区成立于1997年,2005年晋升为国家级自然保护区。保护对象为候鸟及湿地生态系统。保护区总面积333平方千米,其中核心区面积175平方千米,缓冲区面积55平方千米,实验区面积103平方千米。
- // </td>
- // </tr>
- // <tr>
- // <th>图片：</th>
- // <td class="left" colspan="3"></td>
- // </tr>`;
- // str += '</table>';
-
- // XQDom.append(str);
-
-
+ this.creMyEcharts();
layui.use('laydate', function () {
var laydate = layui.laydate;
@@ -104,8 +55,89 @@
, range: ['#test-startDate-1', '#test-endDate-1']
});
});
+ this.getEchartsData();
},
+ myChart: '',
+ creMyEcharts: function (id) {
+ var dom = document.getElementById('popup-threse-shuiwenEcharts');
+ this.myChart = echarts.init(dom);
+ },
+ getEchartsData: function () {
+ var that = this;
+ var option;
+ console.log(this.myChart);
+
+ option = {
+ // title: {
+ // text: '折线图堆叠'
+ // },
+ dataZoom: [{
+ type: 'slider'
+ }, {
+ type: 'inside'
+ }],
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '12%',
+ containLabel: true
+ },
+ // toolbox: {
+ // feature: {
+ // saveAsImage: {}
+ // }
+ // },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+ },
+ 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]
+ }
+ ]
+ };
+
+ option && that.myChart.setOption(option);
+ },
onClose: function () {
//面板关闭的时候触发 （when this panel is closed trigger）
},
--
Gitblit v1.9.3