精华内容
下载资源
问答
  • 可视化图表
    万次阅读 多人点赞
    2021-06-16 08:08:07

    数据可视化前言: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开源库。
    评论区留下邮箱,我看到都会发给你的。


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

    更多相关内容
  • 作品名称:Axure数据可视化图表组件库 作品类型:组件类 主要适用:Web端 软件版本:Axure 8.0 一套数据可视化图表通用组件库,主要由Antv静态图表、Axhub动态图表、地图组件素材三部分内容组成,其中包含了几十种...
  • Echarts数据可视化图表案例:包括柱图,饼图,折线图,地图等数据展示图表;案例下载后直接使用webstrom或idea打开,在编辑器内打开html
  • Excel模板-可视化图表(含目录).zip
  • 内含57种静态图表、11种动态图表以及全国及各省份地图。有折线图、面积图、柱状图、瀑布图、条形图、环图、饼图、散点图、气泡图、雷达图、漏斗图、热力图、子弹图、仪表盘、水波图等等。
  • Axure数据可视化图表组件库(AxureUX整理)
  • LIB008 - Axure数据可视化图表组件库(AxureUX整理) LIB008 - Axure数据可视化图表组件库(AxureUX整理) LIB008 - Axure数据可视化图表组件库(AxureUX整理) LIB008 - Axure数据可视化图表组件库(AxureUX整理) LIB008 -...
  • Axure数据可视化图表组件库.rar
  • 最新Axure9数据可视化图表组件库,包含运营大屏展示全方位原型设计组件,高保真。
  • 可视化图表素材 Excel模板办公表格多彩数据自动生成 ,一共50套,职场人士人手必备一份,万能图表素材,输入数据就可以自动生成,提高办公效率,升职加薪必备神器!
  • Excel数据可视化图表模板、PPT变形柱形状、百分比图表、瀑布图、甘特图、仪表图动态折线图、红旗图、滑珠图等。
  • JointJS是一款可以进行互动的HTML5可视化图表js插件库。它可以用来创建静态图表,并且它拥有完全交互式绘图工具和应用程序生成器。jointjs可以很容易地创建各种各样的可视化工具。
  • 这套全新的作品在移动端元件库v1.0的基础上优化而来的,新版本正式命名为:AxureUX手机移动端交互原型通用元件库。新作品不仅对旧版本中全部的元件进行了重新整理和设计,而且还整合了各类手机端相关的素材和资源,...
  • Axure数据可视化图表(内含18种图表及其变形)亲测有效,非常实用,非常好用,方便实用,数据概览
  • Axure数据可视化图表组件库(AxureUX整理)。
  • 这个文件Axure图表组件,导入就可以直接编辑使用,内含比较、构成、分布3大类18种图表及其变形等。
  • Python自动办公,作为办公文员需要批量操作表格使用会很方便
  • 本作品是由AxueUX整理的一套数据可视化图表通用组件库,主要由Antv静态图表、Axhub动态图表、地图组件素材三部分内容组成,其中包含了几十种常用图表类型和全国34个省级行政区地图,可以满足大部分的原型设计图表...
  • python基于51job数据可视化图表展示源码,基于51job工作招聘数据可视化图表展示 web 数据挖掘,ECharts可视化。python基于51job数据可视化图表展示源码,基于51job工作招聘数据可视化图表展示 web 数据挖掘,ECharts...
  • 第一章内容发布在(使用Python制作疫情数据分析可视化图表(一))https://blog.csdn.net/yue__yang/article/details/104538235,请自行食用。 二、时间序列与区域划分 1、数据类型转换为时间序列 在数据中,有一个...
  • 主要介绍了vue-cli和v-charts实现可视化图表过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • Axure数据可视化图表通用组件库,
  • 适合财务、人力、行政、销售、工厂生产计划等,可视化;同时适合新手研究Excel模板
  • 大数据风组合图-7-年终总结销售分析可视化图表1.zip
  • 当然,你可能想象不到这种数据可视化的技术可以追溯到2500年前世界上的第一张地图,但是,如今利用各种形态的数据可视化图表帮助用户减少分析时间,快速做出决策一直扮演着重要的作用。 在数字经济时代,人们需要对...
  • 销售数据分析可视化图表 可视化 大屏看板(模板).pdf销售数据分析可视化图表 可视化 大屏看板(模板).pdf销售数据分析可视化图表 可视化 大屏看板(模板).pdf销售数据分析可视化图表 可视化 大屏看板(模板).pdf销售数据...
  • 信息可视化图表设计

    2021-02-20 21:34:44
    信息可视化包括了信息图形、知识、科学、数据等的可视化表现形式,以及视觉可视化设计方面的进步与发展。地图、表格、图形,甚至包括文本在内,都是信息的表现形式,无论它是动态的或是静态的,都可以让我们从中了解...
  • 操作简单,里面有使用方法的文档,按照文档即可运行 可以私信博主,博主免费指导运行

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 100,915
精华内容 40,366
关键字:

可视化图表