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

数据可视化_Echarts 专栏收录该内容
22 篇文章 113 订阅

数据可视化前言: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 用于存储 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 = document.cookie.split(';')[0];

在这里插入图片描述

子页面一

跳转动画展示
在这里插入图片描述
子页面展示
在这里插入图片描述
子页面给出两个图表,分别是关于行业分布的柱状图和关于行业班级比例的扇形图。

纵向柱状图

图表还不会配置的来这里!,后面直接放代码。
数据来源:采用Ajax的get(url,function())请求获取数据
这里需要注意的是:function是回调函数需要获取数据后存放在ret后,在done中进行数据的解析。

(function () {
	// 使用cookie存点击的数据
  var jsonstr = document.cookie.split(';')[0];

  console.log("cookie:" + jsonstr);
  
  //ajax的get请求获取数据
  $.get("data/case0", function (ret, status) {

    var job = []
    var number = []
    console.log("data长度:" + ret[jsonstr].length)
    console.log(ret)
    var maxn = 0;
    for (var i = 0; i < ret[jsonstr].length; i++) {
      var name = ret[jsonstr][i].name
      var num = ret[jsonstr][i].number
      if (maxn < num) maxn = num
      console.log(name + " " + num + "  ==== ")
      job.push(name)
      number.push(num)
    }
    // console.log(job)
    // console.log(number)

    var mCharts1 = echarts.init(document.getElementById("div1"))
    option1 = {
      grid: { containLabel: true },
      xAxis: {
        type: 'value',
        axisLabel: {
          color: '#fff',
          fontSize: "15"
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#fff',//左边线的颜色
            //width:'1'
          }
        }
      },
      yAxis: {
        name: '职业',
        type: 'category',
        axisLabel: {
          //color: "rgba(255,255,255,.6) ",
          color: '#fff',
          fontSize: "20"
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#fff',//左边线的颜色
            //width:'1'
          }
        },
        data: job,
      },
      visualMap: { //控制颜色渐变
        orient: ' ',
        left: 'center',
        min: 1,
        max: maxn,
        textStyle: {
          fontSize: 20,
          color: '#fff'
        },
        text: ['', '就业人数:'],
        // Map the score column to color
        dimension: 0,
        inRange: {
          color: ['#65B581', '#FFCE34', '#FD665F']
        }
      },
      
      series: [{
        data: number,
        type: 'bar',
        barWidth: "50%",
        label: {
          show: false
        },
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 10
        }
      }],
    };

    mCharts1.setOption(option1)

  });
})();

环形图

(function () {
  var jsonstr = document.cookie.split(';')[0];

  //console.log("cookie2:" + jsonstr);

  $.get("http://127.0.0.1:8888/api/banjibili", function (ret, status) {

    console.log(ret)
    console.log(ret[jsonstr])
    var mCharts2 = echarts.init(document.getElementById("div2"))
    option2 = {
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)'
      },
      color: [
        "#FE642E",
        "#FE9A2E",
        "#F4FA58",
        "#ACFA58",
        "#01DFD7",
        "#0096ff",
        "#8258FA",
        "#FE2E9A"
      ],
      legend: {
        top: "bottom",
        left: "center",
        //bottom: '0',
        textStyle: {
          color: '#fff',
          fontSize: 18
        }
      },
      series: [
        {
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: ret[jsonstr]
        }
      ]
    };
    mCharts2.setOption(option2);

    /*******高亮显示开始**********/
    var _this2 = this
    var isSet2 = true // 为了做判断:当鼠标移动上去的时候,自动高亮就被取消
    var currentIndex2 = 0

    // 2、鼠标移动上去的时候的高亮动画
    mCharts2.on('mouseover', function (param) {
      isSet2 = false
      clearInterval(_this2.startCharts)
      // 取消之前高亮的图形
      mCharts2.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: currentIndex2
      })
      // 高亮当前图形
      mCharts2.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: param.dataIndex
      })
      // 显示 tooltip
      mCharts2.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: param.dataIndex
      })
    })
    // 3、自动高亮展示
    chartHover = function () {
      var dataLen = mCharts2.getOption().series[0].data.length //计算总的数组长度
      // 取消之前高亮的图形
      mCharts2.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: currentIndex2
      })
      currentIndex2 = (currentIndex2 + 1) % dataLen
      // 高亮当前图形
      mCharts2.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: currentIndex2
      })
      // 显示 tooltip
      mCharts2.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: currentIndex2
      })
    }
    _this2.startCharts = setInterval(chartHover, 1000)
    // 4、鼠标移出之后,恢复自动高亮
    mCharts2.on('mouseout', function (param) {
      if (!isSet2) {
        _this2.startCharts = setInterval(chartHover, 1000)
        isSet2 = true
      }
    })
    /*******高亮显示结束**********/


  });
})();

子页面二

跳转动画展示
在这里插入图片描述
子页面展示

在这里插入图片描述

柱状图

(function () {
  //不同就业去向
  var jsonstr = document.cookie.split(';')[0];
  console.log("cookie:" + jsonstr);
  $.get("http://127.0.0.1:8888/api/nannv", function (ret, status) {

    var data1 = ret[jsonstr].data;
    var myChart = echarts.init(document.getElementById("div1"));
    var option = {
      legend: {
        bottom: "0%",
        textStyle: {
          color: "write"
        }
      },
      tooltip: {},
      dataset: {
        dimensions: ['product', '男', '女'],
        source: data1
      },

      xAxis: {
        type: 'category',
        axisLabel: {
          color: '#fff',
          fontSize: "20"
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#fff',
          }
        },
      },
      yAxis: {
        name: "人数",
        axisLabel: {
          color: '#fff',
          fontSize: "20"
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#fff',
          }
        },
      },
      barWidth: "30%",
      series: [
        {
          type: 'bar', itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(0, 221, 255)'
            }, {
              offset: 1,
              color: 'rgba(77, 119, 255)'
            }])
          },
          label: {
            show: true,
            position: 'top',
            color: "white",
            fontSize: 20
          },
          barGap: "20%"
        },
        {
          type: 'bar', color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(255, 0, 135)'
          }, {
            offset: 1,
            color: 'rgba(135, 0, 157)'
          }]),
          label: {
            show: true,
            position: 'top',
            color: "white",
            fontSize: 20
          },
        },

      ]
    };
    myChart.setOption(option);
  })
})();

饼图

(function () {
  //班级男生人数
  var jsonstr = document.cookie.split(';')[0];
  $.get("http://127.0.0.1:8888/api/nannv", function (ret, status) {
    var data1 = ret[jsonstr].nan;
    //班级女生人数
    var data2 = ret[jsonstr].nv;
    var myChart = echarts.init(document.getElementById('div2'));
    var option;
    option = {
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          // do some thing
          console.log(params)
          return params.name + ":" + params.value + "人"
        }
      },
      // legend: {
      //   orient: 'vertical',
      //   left: 'left',
      //   bottom: "0%",
      //   itemWidth: 30,
      //   itemHeight: 30,
      //   textStyle: {
      //     color: "write"
      //   }
      // },
      series: [
        {
          type: 'pie',
          radius: '60%',
          itemStyle: {
            normal: {
              label: {
                fontSize: 20,
                show: true,
                position: [0, -20],
                color: '#ddd',
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  total += data1 + data2;
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== '') {
                    return params.name + ':' + percent + '%';
                  } else {
                    return '';
                  }
                },
              },
              labelLine: {
                length: 15,
                length2: 10,
                show: true,
                color: '#00ffff',
              },
            },
          },

          data: [
            {
              value: data1, name: '男',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0, 221, 255)'
                }, {
                  offset: 1,
                  color: 'rgba(77, 119, 255)'
                }])
              }
            },
            {
              value: data2, name: '女',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(255, 0, 135)'
                }, {
                  offset: 1,
                  color: 'rgba(135, 0, 157)'
                }])
              }
            }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    myChart.setOption(option)

  })
})()

CSS界面布局

两个子界面使用的同一个CSS布局

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}
body {
  background: url(../images/bg.jpg) no-repeat top center;
  line-height: 1.15;
  overflow:hidden;
}
header {
  position: relative;
  height: 1.25rem;
  background: url(../images/head_bg.png) no-repeat;
  background-size: 100% 100%;
}
header h1 {
  font-size: 0.475rem;
  color: #fff;
  text-align: center;
  line-height: 1rem;
}
header .showTime {
  position: absolute;
  right: 0.375rem;
  top: 0;
  line-height: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.25rem;
}
.mainbox {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 1.4rem 0.125rem 0;
}
.mainbox .column {
  flex: 5;
}
.mainbox .column:nth-child(2) {
  flex: 3;
  margin: 0 0.125rem 0.1875rem;
  overflow: hidden;
}
.mainbox .panel {
  position: relative;
  height: 9rem;
  padding: 0 0.1875rem 0.1rem 0.5rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  margin-bottom: 0.1875rem;
  background: url(../images/line.png) rgba(255, 255, 255, 0.03);
}
.mainbox .panel::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.mainbox .panel::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.mainbox .panel .panel-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.mainbox .panel .panel-footer::before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}
.mainbox .panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}
.mainbox .panel h2 {
  height: 0.6rem;
  color: #fff;
  line-height: 1.6rem;
  text-align: center;
  font-size: 0.45rem;
  font-weight: 400;
}

.mainbox .panel .chart {
  height: 8rem;
}




有不懂的可以私聊我,有需要echarts.js、jQuery.js、echarts-gl.js开源库。
评论区留下邮箱,我看到都会发给你的。


项目源码我放在我的分享的资源里了,需要请自取

相关推荐
<p style="font-size:16px;"> <span style="font-size:18px;"><span style="background-color:#FFFFFF;">Python 数据分析+pyecharts 可视化 + Flask Web端服务 + 2大真实项目 手把手实战教程.</span></span> </p> <p style="font-size:16px;"> Python数据分析课程以Python为核心工具,结合其工具包pyecharts+开发IDEA pycharm + web 框架Flask。课程以案例为中心,结合案例讲解让同学们更清晰的掌握每一个知识点的应用与工作流程。 </p> <p style="font-size:16px;"> <strong>2大项目案例: 重点讲解 开发架构 + 部署上线流程,手把手实战教学。 </strong> </p> <p style="font-size:16px;"> 1. 开发架构 </p> <p style="font-size:16px;"> (1)基于PyCharm + Flask + Echarts + Python+Pandas 组合进行数据分析全栈开发 </p> <p style="font-size:16px;"> (2)PyCharm: 项目开发的IDEA; </p> <p style="font-size:16px;"> (3)Flask:作为WEB框架,主要连接后端服务数据。主要演示: 前后端分离架构 + 模板直接渲染架构; </p> <p style="font-size:16px;"> (4)Echarts: 这里使用pyecharts 作为可视化数据展示; </p> <p style="font-size:16px;"> (5)Python: 作为后端数据生成的语言; </p> <p style="font-size:16px;"> (6)Pandas: 主要作为数据分析库; </p> <p style="font-size:16px;"> 2 部署线上服务案例 </p> <p style="font-size:16px;"> (1)资讯类项目-基于Flask 模板渲染 词云; </p> <p style="font-size:16px;"> (2)人口统计项目-基于Flask 前后端分离 Line 和 Bar 组合 数据统计; </p> <p style="font-size:16px;"> <strong>课程特色</strong> </p> <p style="font-size:16px;"> 课程风格通俗易懂 </p> <p style="font-size:16px;"> 案例内容持续更新 </p> <p style="font-size:16px;"> 简单易懂,接地气的案例 </p> <p style="font-size:16px;"> 有效,提供所有数据和代码 </p> <p style="font-size:16px;"> <img src="https://img-bss.csdn.net/201908291440447128.png" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdn.net/201908291440543352.png" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdn.net/201908291441085943.png" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdn.net/201908291441198368.png" alt="" /> </p>
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值