-
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数据可视化图表组件库(AxureUX图表+地图)
2022-06-28 16:18:21作品名称:Axure数据可视化图表组件库 作品类型:组件类 主要适用:Web端 软件版本:Axure 8.0 一套数据可视化图表通用组件库,主要由Antv静态图表、Axhub动态图表、地图组件素材三部分内容组成,其中包含了几十种... -
Echarts数据可视化图表案例
2021-01-11 15:47:54Echarts数据可视化图表案例:包括柱图,饼图,折线图,地图等数据展示图表;案例下载后直接使用webstrom或idea打开,在编辑器内打开html -
Excel模板-可视化图表(含目录).zip
2020-07-25 18:17:44Excel模板-可视化图表(含目录).zip -
Axure数据可视化图表组件库.rp
2020-11-18 08:28:50内含57种静态图表、11种动态图表以及全国及各省份地图。有折线图、面积图、柱状图、瀑布图、条形图、环图、饼图、散点图、气泡图、雷达图、漏斗图、热力图、子弹图、仪表盘、水波图等等。 -
Axure数据可视化图表组件库(AxureUX整理)
2021-09-02 15:37:37Axure数据可视化图表组件库(AxureUX整理) -
LIB008 - Axure数据可视化图表组件库(AxureUX整理)
2022-06-28 16:15:37LIB008 - Axure数据可视化图表组件库(AxureUX整理) LIB008 - Axure数据可视化图表组件库(AxureUX整理) LIB008 - Axure数据可视化图表组件库(AxureUX整理) LIB008 - Axure数据可视化图表组件库(AxureUX整理) LIB008 -... -
Axure数据可视化图表组件库.rar
2022-03-29 20:53:33Axure数据可视化图表组件库.rar -
LIB008 - Axure数据可视化图表组件库(AxureUX整理).zip
2021-11-17 16:20:21最新Axure9数据可视化图表组件库,包含运营大屏展示全方位原型设计组件,高保真。 -
50款超值excel可视化图表.zip
2019-07-19 11:04:18可视化图表素材 Excel模板办公表格多彩数据自动生成 ,一共50套,职场人士人手必备一份,万能图表素材,输入数据就可以自动生成,提高办公效率,升职加薪必备神器! -
excle数据可视化图表模板.rar
2020-04-10 15:49:20Excel数据可视化图表模板、PPT变形柱形状、百分比图表、瀑布图、甘特图、仪表图动态折线图、红旗图、滑珠图等。 -
HTML5可互动的可视化图表js插件库
2019-12-13 01:18:26JointJS是一款可以进行互动的HTML5可视化图表js插件库。它可以用来创建静态图表,并且它拥有完全交互式绘图工具和应用程序生成器。jointjs可以很容易地创建各种各样的可视化工具。 -
Axure数据可视化图表组件库(AxureUX整理).rplib
2020-11-16 16:36:27这套全新的作品在移动端元件库v1.0的基础上优化而来的,新版本正式命名为:AxureUX手机移动端交互原型通用元件库。新作品不仅对旧版本中全部的元件进行了重新整理和设计,而且还整合了各类手机端相关的素材和资源,... -
Axure数据可视化图表(内含18种图表及其变形)亲测有效,非常实用,非常好用,方便实用
2020-11-17 11:35:05Axure数据可视化图表(内含18种图表及其变形)亲测有效,非常实用,非常好用,方便实用,数据概览 -
Axure数据可视化图表组件库(AxureUX整理).zip
2020-08-25 15:59:55Axure数据可视化图表组件库(AxureUX整理)。 -
Axure数据的可视化图表.rar
2020-09-14 10:24:10这个文件Axure图表组件,导入就可以直接编辑使用,内含比较、构成、分布3大类18种图表及其变形等。 -
看我用Python批量完成Excel表格的样式设置和可视化图表 部门利润表图表绘制工具.py
2021-04-28 21:45:34Python自动化办公,作为办公文员需要批量操作表格使用会很方便 -
可视化图表通用组件库,主要由Antv静态图表、Axhub动态图表、地图组件素材三部分内容数据可视化图表组件库
2021-05-21 15:43:51本作品是由AxueUX整理的一套数据可视化图表通用组件库,主要由Antv静态图表、Axhub动态图表、地图组件素材三部分内容组成,其中包含了几十种常用图表类型和全国34个省级行政区地图,可以满足大部分的原型设计图表... -
python基于51job数据可视化图表展示源码.zip
2022-05-31 09:12:45python基于51job数据可视化图表展示源码,基于51job工作招聘数据可视化图表展示 web 数据挖掘,ECharts可视化。python基于51job数据可视化图表展示源码,基于51job工作招聘数据可视化图表展示 web 数据挖掘,ECharts... -
使用Python制作疫情数据分析可视化图表(二)
2020-12-22 11:44:28第一章内容发布在(使用Python制作疫情数据分析可视化图表(一))https://blog.csdn.net/yue__yang/article/details/104538235,请自行食用。 二、时间序列与区域划分 1、数据类型转换为时间序列 在数据中,有一个... -
vue-cli和v-charts实现可视化图表过程解析
2020-10-16 06:37:11主要介绍了vue-cli和v-charts实现可视化图表过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 -
Axure数据可视化图表.rplib
2021-06-30 11:42:49Axure数据可视化图表通用组件库, -
4000套 各种十多个行业可视化图表Excel素材.zip
2021-07-22 17:39:49适合财务、人力、行政、销售、工厂生产计划等,可视化;同时适合新手研究Excel模板 -
大数据风组合图-7-年终总结销售分析可视化图表1.zip
2022-05-01 18:44:29大数据风组合图-7-年终总结销售分析可视化图表1.zip -
数据可视化图表多类型18种
2020-11-04 15:30:30当然,你可能想象不到这种数据可视化的技术可以追溯到2500年前世界上的第一张地图,但是,如今利用各种形态的数据可视化图表帮助用户减少分析时间,快速做出决策一直扮演着重要的作用。 在数字经济时代,人们需要对... -
销售数据分析可视化图表 可视化 大屏看板(模板).pdf
2022-03-28 19:38:43销售数据分析可视化图表 可视化 大屏看板(模板).pdf销售数据分析可视化图表 可视化 大屏看板(模板).pdf销售数据分析可视化图表 可视化 大屏看板(模板).pdf销售数据分析可视化图表 可视化 大屏看板(模板).pdf销售数据... -
信息可视化图表设计
2021-02-20 21:34:44信息可视化包括了信息图形、知识、科学、数据等的可视化表现形式,以及视觉可视化设计方面的进步与发展。地图、表格、图形,甚至包括文本在内,都是信息的表现形式,无论它是动态的或是静态的,都可以让我们从中了解... -
所用技术:Flask框架+Python爬虫+echarts可视化图表+MySQL数据库
2022-04-16 10:13:33操作简单,里面有使用方法的文档,按照文档即可运行 可以私信博主,博主免费指导运行