手把手教你做出数据可视化项目（七）可视化图表数据动态获取及界面跳转

数据可视化前言：https://blog.csdn.net/diviner_s/article/details/115933789
Apache Echarts简介：https://blog.csdn.net/diviner_s/article/details/115934089
项目最终效果图：

此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！
使用echarts技术做的可视图，此外其项目包含 的技术有html、css、js、jquerry、ajax、websocket、koa等。

写到这里我们的系列文也到了前端最后一个界面，做左侧第一个柱状图跳转子界面。

预告：下一篇开始就我们将前后端进行分离以及实现前后端交互。

文章目录

• 实现数据动态获取
• • cookie存储信息
  • cookie创建
  • cookie读取
• 子页面一
• • 纵向柱状图
  • 环形图
• 子页面二
• • 柱状图
  • 饼图
• CSS界面布局

实现数据动态获取

目的是使用同一个界面图表模板，通过点击不同的元素实现传输对应的不同数据进行展示。

左侧跳转界面不同数据展示

右侧跳转界面不同数据展示

cookie存储信息

Cookie 用于存储 web 页面的用户信息。在这里我们用cookie存储首页面点击柱状图元素下标

如上图，我们继续看针对左上柱状图的每个柱状体都对应着不同下标，因此我们使用cookie暂时存储下标。

cookie创建

• 创建cookie：document.cookie = params.dataIndex默认情况下，cookie 在浏览器关闭时删除。
  我们现在首页左上柱状图试验一下：
  这段代码位置：
  
  我们使用如下代码，打印获取的dataIndex和cookie值：

        //4.点击柱状图跳转
        myChart1.on('click', function (params) {
          console.log('dataIndex: ' + params.dataIndex);
          document.cookie = params.dataIndex;
          console.log('cookie: ' + document.cookie);
          //cookie传递params的数组下标
          //获取统计数据
          
  		//先将跳转界面注释掉			
          //  window.location.href = 'childpage.html';
        });
  

点击不同柱体打印的就是不同cookie值，看右侧打印情况：

因此我们已经将对应index存入cookie，接下来就是读取cookie。

cookie读取

在 JavaScript 中, 可以使用var x = document.cookie来读取 cookie。

注意：document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

返回格式是字符串+；返回，因此我们使用分隔符取“‘；”前的数。

var jsonstr = doc