Echarts实战案例代码(13):使用layui弹出模态框通过localStorage跨页面函数传递参数

简介: Echarts实战案例代码(13):使用layui弹出模态框通过localStorage跨页面函数传递参数

项目需求

按照地区筛选时,大屏对应的项目进行精准匹配显示数据;点击对应图表的(N)按钮时,弹出图表也相应的显示对应的地区图表;




项目分析

源码分析

<div class="boxall" style="height:240px">
  <div class="alltitle">月收入分布<span class="laybg new6">N</span></div>
      <div class="navboxall" id="income"></div>
 </div>

1.在layui弹出模态框模态框,是没有url链接的,无法使用get形式,即index.php?m=Index&a=gender&township=XX镇的方式传递;

2.如果按照方式1解决,选择框状态改变时,如何同步在不刷新的情况将"XX镇"传给按钮,无解。


localStorage参数

在后端传递参数时,可以选择get、post、cookie和seesion等四种方式,layUI下,get和post方式被直接PASS。JavaScript有cookie和seesion的传递函数吗?


localStorage 创建一个本地存储的 name/value 对,name=“lastname” value=“Smith”, 然后检索 “lastname” 的值,并插入到 id=“result” 的元素上。

1.参数存储;

localStorage.setItem("data", township);

2.参数获取;

localStorage.getItem("data");


解决方案

  • 主页面根据点击事件,储存数据:
        //删除本地储存,防止缓存数据;
        localStorage.removeItem("data");
   //按照区域选择对应函数;
        $("#btn").click(function () {
            var township = $('.township').val();
            if (township == "陵城区") {
                window.location.reload();
            } else {
                localStorage.setItem("data", township);
                getAllData(township);
            }
        })
  • 子页面接受参数,并调用封装方法渲染图表:
     //调用核心图表;
        $(function () {
            var township = localStorage.getItem("data");
            getGender(township);
        })


Done!

相关文章
|
5天前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
71 2
|
8月前
|
缓存 JavaScript 数据可视化
echarts在vue3中的使用——其他页面跳转回echarts图表页面时,不显示图表的问题
echarts在vue3中的使用——其他页面跳转回echarts图表页面时,不显示图表的问题
133 0
|
5天前
|
前端开发 JavaScript Apache
web前端-Echarts-5.3安装配置和案例
web前端-Echarts-5.3安装配置和案例
|
5天前
|
数据可视化
Echarts5.3.2可视化案例-时间轴动态柱形图
Echarts5.3.2可视化案例-时间轴动态柱形图
|
5天前
|
API Windows
解决echarts.apache.org官网不能访问的问题(主要是用于查看配置项API参数细节说明)
解决echarts.apache.org官网不能访问的问题(主要是用于查看配置项API参数细节说明)
|
6月前
echarts插件-从后台请求的数据在页面显示空白的问题
echarts插件-从后台请求的数据在页面显示空白的问题
52 0
|
6月前
|
JavaScript 前端开发
echarts同一页面四个图表切换的js数据交互
echarts同一页面四个图表切换的js数据交互
47 0
|
10月前
|
存储 JSON 数据可视化
ChatGPT工作提效之数据可视化大屏组件Echarts的实战方案(大数据量加载、伪3D饼图、地图各省cp中心坐标属性、map3D材质)
ChatGPT工作提效之数据可视化大屏组件Echarts的实战方案(大数据量加载、伪3D饼图、地图各省cp中心坐标属性、map3D材质)
479 0
|
10月前
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏Echarts高级开发散点图实战案例分析(地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色)
数据可视化大屏Echarts高级开发散点图实战案例分析(地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色)
429 0
|
5天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
33 0