手把手教你做出数据可视化项目(六)动态3D柱状图及其自动旋转
2021-06-12 15:15
399 查看
数据可视化前言:https://blog.csdn.net/diviner_s/article/details/115933789
项目最终效果图:
此篇博客为自己学习pink老师的课后完成的项目的总结与记录,仅供交流参考。版权所有,转载请标注原作者!
使用echarts技术做的可视图,此外其项目包含 的技术有html、css、js、jquerry、ajax、websocket、koa等。
文章目录
动态三维柱状图
今天带来的是超绚丽的一个实用的图表——三维柱状图,注意此图表是在子界面展示的,通过点击右侧第二个南丁格尔图跳转过来的!
如果二维柱状图还不会的话,可以看下我之前写的Apache Echarts常用图表之柱状图
这里有二维柱状图基础的讲解,看完再来看三维的就更容易啦!
三维柱状图数据存储
定义三个数组分别存储x,y,z轴的数据。
注意,此处均为模拟数据不具有参考性。
//x轴 var job = [ "网页UI设计","后期制作","广告设计","软件测试","模型设计","软件开发","动画制作", "教学人员","网络维护","Web开发","保险销售","资金管理","服务业","财务规划","教学人员"]; //y轴 var days = [ "星期一","星期二","星期三","星期四","星期五","星期六","星期天"]; //z轴 var data = [ //对应x,y,z [0,0,1],[0,1,1],[0,2,2],[0,3,4],[0,4,0], [0,5,2.0],[0,6,0],[0,7,1],[0,8,8.0],[0,9,0], [0,10,2],[0,11,0.1],[0,12,0],[0,13,1],[0,14,0.5], [1,0,1.6],[1,1,1.2],[1,2,1],[1,3,3],[1,4,1], [1,5,2.8],[1,6,1],[1,7,0],[1,8,0],[1,9,0], [1,10,1],[1,11,0],[1,12,0],[1,13,0],[1,14,2], [2,0,0.5],[2,1,1],[2,2,0.5],[2,3,1],[2,4,3], [2,5,4.1],[2,6,1],[2,7,0],[2,8,2],[2,9,0], [2,10,2],[2,11,0],[2,12,1],[2,13,1],[2,14,0], [3,0,0.8],[3,1,0.5],[3,2,1],[3,3,4],[3,4,3], [3,5,3.4],[3,6,0],[3,7,0],[3,8,1],[3,9,0], [3,10,3],[3,11,0],[3,12,0],[3,13,0],[3,14,1], [4,0,1],[4,1,1.3],[4,2,4],[4,3,4.8],[4,4,4], [4,5,4.5],[4,6,0],[4,7,0],[4,8,2],[4,9,0], [4,10,2.1],[4,11,0],[4,12,2],[4,13,0],[4,14,0], [5,0,2.1],[5,1,1],[5,2,0],[5,3,3],[5,4,1], [5,5,2.6],[5,6,2],[5,7,0],[5,8,0],[5,9,0], [5,10,0.2],[5,11,0],[5,12,3],[5,13,2],[5,14,0.3], [6,0,1.4],[6,1,0],[6,2,0],[6,3,1],[6,4,0], [6,5,1],[6,6,2],[6,7,0],[6,8,0],[6,9,0], [6,10,0.1],[6,11,0[6,12,4],[6,13,2],[6,14,0.2] ]
柱状图配置
tooltip配置
如图所示:
当点击柱体时显示的对应的标签栏,显示的值与格式在return中。
tooltip: { formatter: function (params) { let series = params.seriesName; let val = params.value; return series + '<br/>' + days[val[1]] + '<br/>' + job[val[0]] + '<br/>工作时长:' + val[2]; } },//val[0]->x轴位置 val[1]->y轴位置 val[2]->z轴位置
xAxis3D配置
xAxis3D: { type: 'category', name: '职业', data: job, axisLabel: { // color:'#6c706f', interval: 0, rotate: 45, //代表逆时针旋转45度 }, },
yAxis3D配置
yAxis3D: { type: 'category', name: '星期', data: days },
zAxis3D配置
zAxis3D: { type: 'value', name: '平均加班时长' },
视角及特效 grid3D配置
grid3D: { top: -70, boxWidth: 220, boxDepth: 90, viewControl: { distance: 300, //视觉距离 autoRotate: true //自动旋转 }, light: { //光照配置 main: { intensity: 1.2, shadow: true }, ambient: { intensity: 0.3 } }, axisLabel: {//坐标轴刻度标签的相关设置 textStyle: { color: '#fff' } }, axisLine: {//坐标轴轴线相关设置 lineStyle: { color: '#fff',//白色 width: 1 } }, axisPointer: { show: false } },
echarts中3D柱状图中配置项
viewcontrol中
autoRotate可以控制图表能否自转,我们将其设置为ture即可。
自动旋转效果
视觉映射组件配置
注意左下角鼠标的移动,选择当前数值时,3D柱状图对用同一维度的数值同时高亮显示
visualMap是视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)。
visualMap解释官网转送门
visualMap: { max: 5, min: 1, calculable: true,//是否显示拖拽用的手柄(手柄能拖拽调整选中范围)。 inRange: {//定义 在选中范围中 的视觉元素 color: ['#50a3ba', '#eac736', '#d94e5d']//蓝--黄--红 }, textStyle: { color: '#fff' } },
首界面跳转到子界面
该子界面是通过点击首界面【本篇博客第一个动态图右边第二个】的南丁格尔图(扇形图)跳转进入该界面。
我们只需要在扇形图后绑定click事件即可实现跳转!
右中扇形图代码及讲解在这里!
我们看代码即可看到如下片段:
myChart.on('click', function (params) { //获取统计数据 window.location.href = '3D.html'; });
3D.html即是三维柱状图的html。
3D.html全部代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <title>加班时间分析</title> <link rel="stylesheet" href="css/3D.css" /> <script src="js/flexible.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/echarts.min.js"></script> <script src="js/echarts-gl.min.js"></script> </head> <body> <!-- 头部的盒子 --> <!-- <div id="xh" style="width: 270px;height: 44px; background: url(images/xh.png); position: absolute;left: 25px;top: 10px; z-index: 999" ; onclick="window.location.href= 'index.html';return false"> </div> --> <header> <h1 onclick="window.location.href= 'index.html';return false">工作平均加班时长分析</h1> <div class="showTime"></div> <script> var t = null; t = setTimeout(time, 1000); //开始运行 function time() { clearTimeout(t); //清除定时器 dt = new Date(); var y = dt.getFullYear(); var mt = dt.getMonth() + 1; var day = dt.getDate(); var h = dt.getHours(); //获取时 var m = dt.getMinutes(); //获取分 var s = dt.getSeconds(); //获取秒 document.querySelector(".showTime").innerHTML = "当前时间:" + y + "年" + mt + "月" + day + "日" + h + ":" + m + ":" + s; t = setTimeout(time, 1000); //设定定时器,循环运行 } </script> </header> <div class="wrapper" id="bar3D"> </div> <script type="text/javascript"> $(function () { /******************* 3D柱形图 ******************/ //初始化echarts实例 const bar3D = echarts.init(document.getElementById("bar3D")); //x轴 var job = [ "网页UI设计","后期制作","广告设计","软件测试","模型设计","软件开发","动画制作", "教学人员","网络维护","Web开发","保险销售","资金管理","服务业","财务规划","教学人员"]; //y轴 var days = [ "星期一","星期二","星期三","星期四","星期五","星期六","星期天"]; //z轴 var data = [ //对应x,y,z [0,0,1],[0,1,1],[0,2,2],[0,3,4],[0,4,0], [0,5,2.0],[0,6,0],[0,7,1],[0,8,8.0],[0,9,0], [0,10,2],[0,11,0.1],[0,12,0],[0,13,1],[0,14,0.5], [1,0,1.6],[1,1,1.2],[1,2,1],[1,3,3],[1,4,1], [1,5,2.8],[1,6,1],[1,7,0],[1,8,0],[1,9,0], [1,10,1],[1,11,0],[1,12,0],[1,13,0],[1,14,2], [2,0,0.5],[2,1,1],[2,2,0.5],[2,3,1],[2,4,3], [2,5,4.1],[2,6,1],[2,7,0],[2,8,2],[2,9,0], [2,10,2],[2,11,0],[2,12,1],[2,13,1],[2,14,0], [3,0,0.8],[3,1,0.5],[3,2,1],[3,3,4],[3,4,3], [3,5,3.4],[3,6,0],[3,7,0],[3,8,1],[3,9,0], [3,10,3],[3,11,0],[3,12,0],[3,13,0],[3,14,1], [4,0,1],[4,1,1.3],[4,2,4],[4,3,4.8],[4,4,4], [4,5,4.5],[4,6,0],[4,7,0],[4,8,2],[4,9,0], [4,10,2.1],[4,11,0],[4,12,2],[4,13,0],[4,14,0], [5,0,2.1],[5,1,1],[5,2,0],[5,3,3],[5,4,1], [5,5,2.6],[5,6,2],[5,7,0],[5,8,0],[5,9,0], [5,10,0.2],[5,11,0],[5,12,3],[5,13,2],[5,14,0.3], [6,0,1.4],[6,1,0],[6,2,0],[6,3,1],[6,4,0], [6,5,1],[6,6,2],[6,7,0],[6,8,0],[6,9,0], [6,10,0.1],[6,11,0[6,12,4],[6,13,2],[6,14,0.2] ]const barOpt = { tooltip: { formatter: function (params) { let series = params.seriesName; let val = params.value; return series + '<br/>' + days[val[1]] + '<br/>' + job[val[0]] + '<br/>工作时长:' + val[2]; } }, visualMap: { max: 5, min: 1, calculable: true,//是否显示拖拽用的手柄(手柄能拖拽调整选中范围)。 inRange: {//定义 在选中范围中 的视觉元素 color: ['#50a3ba', '#eac736', '#d94e5d']//蓝--黄--红 }, textStyle: { color: '#fff' } },grid3D: { top: -70, boxWidth: 220, boxDepth: 90, viewControl: { distance: 300, //视觉距离 autoRotate: true //自动旋转 }, light: { //光照配置 main: { intensity: 1.2, shadow: true }, ambient: { intensity: 0.3 } }, axisLabel: {//坐标轴刻度标签的相关设置 textStyle: { color: '#fff' } }, axisLine: {//坐标轴轴线相关设置 lineStyle: { color: '#fff',//白色 width: 1 } }, axisPointer: { show: false } }, xAxis3D: { type: 'category', name: '', data: job, axisLabel: { // color:'#6c706f', interval: 0, rotate: 45, //代表逆时针旋转45度 }, }, yAxis3D: { type: 'category', name: '', data: days }, zAxis3D: { type: 'value', name: '平均加班时长' }, series: [{ type: 'bar3D', name: 'Bar3D', data: data.map(function (item) { return { value: [item[1], item[0], item[2]] } }), shading: 'lambert', emphasis: { label: { textStyle: { fontSize: 16, color: '#900' } }, itemStyle: { color: '#900' } } }] }; //渲染图表 bar3D.setOption(barOpt); /********** 浏览器窗口改变时,重置报表大小 ****************/ window.onresize = function () { bar3D.resize(); } }); </script> </body> </html>
代码中barOpt可以直接复制走拿去用,不过需要引入echarts.js、jQuery.js、echarts-gl.js开源库。
需要开源库的可以评论区发邮箱,我发给你。
相关文章推荐
- 手把手教你做出数据可视化项目(三)3D地球旋转
- 手把手教你做出数据可视化项目(四)动态模拟航班飞行路线
- python 数据可视化大全(matplotlib库、坐标系、标注、柱状图、等高线、3D、动画)
- 【Python实现数据可视化】创建3D柱状图
- [前端-动态数据可视化]横向柱状图的动态数据可视化
- vue项目中使用Echarts 动态更改图表数据 , Vue 折线图、柱状图等图表动态刷新 ,
- 数据3D可视化简述!
- 【java项目实践】mybatis动态Insert批量插入数据
- python爬虫+数据可视化项目
- Kaggel House Price 数据预处理及其可视化
- python—matplotlib数据可视化实例注解系列-----之柱状图
- C语言 数据结构中的顺序表基本操作及其静态定义,动态定义
- 项目中openlayer中使用,完整解决方案(数据库矢量数据,动态更新,分层,编辑)
- linux平台软件动态分析工具valgrind系列工具及其可视化
- 项目上使用的每月1日自动导出Zabbix性能数据的python脚本
- 第十六讲:字符数据类型(项目十六:字母及其编码)
- Vue项目数据动态过滤实践
- iOS6 横屏项目自动旋转的问题解决 cocos2d
- 从一个小项目了解自动获取、提交网页数据、字符转换、自动注册的过程
- 第十九讲编程项目 字母及其编码,能对齐的数据。