popup弹窗加echarts

liuyg

2021-06-09 8f048024b02f0af68b43209b9ba0e66069729bc5

 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）
         },