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

于 2024-07-05 00:12:15 发布
阅读量396 收藏 9
点赞数 4
文章标签： 信息可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85112749/article/details/140193278
版权 
    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
  }
})
/\*\*\*\*\*\*\*高亮显示结束\*\*\*\*\*\*\*\*\*\*/

});
})();


## 子页面二


**跳转动画展示**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210616110919154.gif)  
 **子页面展示**


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210616110928460.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RpdmluZXJfcw==,size_16,color_FFFFFF,t_70)


### 柱状图

(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);
}

最后

俗话说，好学者临池学书，不过网络时代，对于大多数的我们来说，我倒是觉得学习意识的觉醒很重要，这是开始学习的转折点，比如看到对自己方向发展有用的信息，先收藏一波是一波，比如如果你觉得我这篇文章ok，先点赞收藏一波。这样，等真的沉下心来学习，不至于被找资料分散了心神。慢慢来，先从点赞收藏做起，加油吧！

另外，给大家安排了一波学习面试资料：

image

image

以上就是本文的全部内容，希望对大家的面试有所帮助，祝大家早日升职加薪迎娶白富美走上人生巅峰！
r: 1px solid rgba(25, 186, 139, 0.17);
margin-bottom: 0.1875rem;
background: url(…/images/line.png) rgba(255, 255, 255, 0.03);
}

最后

俗话说，好学者临池学书，不过网络时代，对于大多数的我们来说，我倒是觉得学习意识的觉醒很重要，这是开始学习的转折点，比如看到对自己方向发展有用的信息，先收藏一波是一波，比如如果你觉得我这篇文章ok，先点赞收藏一波。这样，等真的沉下心来学习，不至于被找资料分散了心神。慢慢来，先从点赞收藏做起，加油吧！

另外，给大家安排了一波学习面试资料：

[外链图片转存中…(img-eSvsVHb7-1720109523011)]

[外链图片转存中…(img-h6ZgIUKm-1720109523012)]

以上就是本文的全部内容，希望对大家的面试有所帮助，祝大家早日升职加薪迎娶白富美走上人生巅峰！

2401_85112749
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【无标题】Vue 中 使用 DataV 创建胶囊柱图
weixin_54362826的博客
11-20 3111
官网地址：http://datav.jiaminghi.com/guide/capsuleChart.html#%E5%9F%BA%E6%9C%AC%E7%A4%BA%E4%BE%8B 最终实现效果： 由于需要调接口从后端返回数据，但是将调接口的函数和渲染的柱图写在同一个页面时，无法获取后端数据，于是我将调接口的函数写在了 js 文件中，再在页面中引入 又由于调接口的请求是异步请求，又会导致先渲染页面，后成功调回数据，导致页面数据为空 于是，在调接口时，返回了一个 promise ，只有当成功请求数据后
【matplotlib】数据可视化的重点
捕获完成
02-04 4150
博客已经搬家到“捕获完成”： https://www.v2python.com 数据可视化 刚才有提到，图表设计实际上就是数据可视化设计，在谈图表设计之前，我们先理解下数据可视化的概念。 “数据可视化的目的，是要对数据进行可视化处理，以使得能够明确地、有效地传递信息。” –Vitaly Friedman 通俗一点讲，无非就是将复杂的数据信息进行图形化展示，目的就是为了方便...
每天一个小知识点学习之-tab切换的柱状图的数据构造及调用接口获取数据
HuLuWa1997的博客
01-11 225
1.首先说明我的需求，我需要实现的是通过tab切换，柱状图也变成对应的内容，在切换的时候，柱状图的形式不会发生改变，只是横纵坐标对应的数据发生变化。来看一下实现代码和思路： html部分： <ul class="shizhou-tab-suc"> <li class="active">xxx</li> <li>yyy</li&g
vue中使用echarts实现动态数据绑定、获取后端接口数据
upStar1的博客
06-21 1万+
之前几篇echarts的文章是实现了静态的柱状图、折线图、饼状图、地图，在项目中我们肯定是需要获取后端接口，将后端返回的数据显示在图表上，所以这次就记录一下如何实现echarts的动态数据绑定。......
从后端数据库获取数据并传值到前端vue项目的echarts柱状图/折线图/饼图里
热门推荐
Ava_16的博客
07-17 1万+
不同图表的数据获取有一定的区别 在这些区别上花了不少功夫试验，把最后成功的方法做个记录，如果有类似项目要做的话，也可看看当个参考。 后端 后端都大同小异，方法上没有区别，在这里以柱状图为例。 sql：数据库的表格先写好，名称、类型、数据，然后连接数据库 用的是Navicat写，表名：sys_mapbar 在IDEA里，写XML文件，与数据库调用直接相关的语句 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper
Python数据分析:手把手教你用Pandas生成可视化图表的教程
12-25
大家都知道，Matplotlib 是众多 Python 可视化包的鼻祖，也是Python最常用的标准可视化库，其功能非常强大，同时也非常复杂，想要搞明白并非易事。但自从Python进入3.0时代以后，pandas的使用变得更加普及，它的身影...
【代码分享】手把手教你：基于RFM的用户画像可视化系统
03-07
在本项目中，我们将深入探讨如何使用Python技术栈构建一个基于RFM（Recency, Frequency, Monetary）模型的用户画像可视化系统。RFM模型是一种在市场营销中广泛使用的工具，用于评估客户价值和行为频率，帮助我们更好...
手把手教你选用数据可视化图表
11-16
在日常生活中表格常常用来展示数据，除此之外，还可以用图表来进行指标分析，相对于表格，图表分析数据看起来更加直观，以下总结了一些图表常用的场合以及如何搭配这几种表格，采用的是FineBI的可视化解决方案
手把手教你构建数据集.docx
最新发布
12-16
手把手教你构建数据集.docx
Echarts中的柱状图--与后台接口对接
weixin_43312391的博客
01-24 5365
使用Echarts，与后台接口对接，图表中所展示的值为后端传来的实时值。 1.tempalte中的样式 <div class="content-bottom-right"> <LittleTitle name="服务概况" /> <div class="server-left"> <div class="server-left-box"> <
数据显示方式
麦田里的守望者
12-30 832
从不同的Location来到数据，首先数据格式会有所不同，其次数据的组织方式不一致。后者决定了数据在客户端的显示方式，而数据的显示方式可以有多种，常见的数据显示方式包括表格/树等 数据显示服务提供不同的数据显示组件，包括表格和树。 用户可以指定数据的显示方式，每个Location的数据可以选择一种或多种数据显示方式，用户也可以自己定义数据显示方式。
显示数据列表
长镜头
12-18 547
jsp页面： &lt;c:forEach items="${books}" var="b"&gt; &lt;tr onmouseover="this.style.backgroundColor = 'white'" onmouseout="this.style.backgroundColor = '#F5FAFE';"&gt; &lt;td style="CURSOR
Android手机传感器及实时数据显示
tangqinglin的专栏
10-14 9091
开发环境 Android studio 2.3 最近在学习Android开发，看到传感这里，想看看我的手机有哪些传感器，每个传感器的实时值。写了一个显示所有传感器信息及其实时值的程序，安装在手机显示正常。OK，代码上传，希望对大家有用。工程名字实验其它项目时候取的，别介意。
向web页面显示数据
bulbboy的博客
09-16 8663
1.向web页面显示数据 首先数据库里面要有数据  主要的是连接数据库后再在web上显示数据这一过程   &lt;?php header("content-type:text/html;charset=utf-8"); if($conn=mysql_connect('localhost','root','root')){ }else{ die('数据库连接失败:'.mysql_er...
查询出的数据显示的HTML标签上
weixin_44539055的博客
06-09 4756
查询出的数据显示的HTML标签上 在做项目时，有时候会遇到一些HTML代码写好的表格，是没有数据的，或许是固定数据的，满足不了客户的要求，用户的需求！所以呢我们需要把从控制器查询出数据对应回填到这个写好的表格上，这样就可以按照客户的需求，根据不同用户灵活回填数据！原理和layuiTable.render表单回填数据差不多，然而不同于layuiTable.render表单需要使用插件，他是简单的HT...
JavaScript显示数据的四种方式
wuweiforever的博客
08-16 1万+
JavaScript显示数据的四种方式 1.警告框：使用window.alert()弹出警告框 &lt;html&gt; &lt;body&gt; &lt;p&gt;我的第一个段落。&lt;/p&gt; &lt;script&gt; window.alert(5 + 6); &lt;/script&gt; &lt;/body&gt;
根据状态来显示数据
weixin_44541224的博客
07-07 740
作者：老岑 如何去根据状态来显示我们所需要的数据呢？ 这个东西说起来很抽象，我先放一张图片上来说 我们点击垫付的时候回弹出一个模态框，回填数据，是否垫付，这样的弹出层。 可是我们按垫付之后它又要去到哪里？去到我们的记录表里面去。 可记录表里面有已垫付和未垫付，我们是如何把垫付表格里面的全是未垫付的数据传到记录表格的呢？ 这个时候不罗嗦了，看代码： public ActionResult Sel...
D3.js实战：打造交互式数据可视化图表
它针对的是数据可视化前端工具库D3.js的中文开发教程，D3.js是一个强大的JavaScript库，专为在浏览器中创建交互式数据可视化而设计。这本书旨在帮助读者掌握利用D3进行数据驱动的图形设计，无论是数据分析、统计演示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值