本项目中使用的是echarts图表库,Echarts提供了常规的折线图、柱状图、散点图、饼图、k线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
五步曲 one by one 教你 保你会
- 下载并引入echarts.js文件 地址:Apache ECharts
- 准备一个具备大小的DOM容器
- 初始化echarts实例对象
- 指定配置项和数据(option)
- 将配置项设置给echarts实例对象
下面是一个简单的实例
第一步第二步
第三步
第四步
第五步
最终的效果
仅仅会插入图表也是不够的,通过修改里面的配置项里面的属性来达到项目需求,直接去百度更方便,但是呢我们需要学会去查找文档echarts官网-文档-配置项手册
上面这个小例子就是为了让大家对echarts不迷茫,基本使用要会哟
再回到我们的项目上面,从项目效果可以看出里面的参数很多,如果都去重新定义一个新的变量的话,代码很多容易混淆,占用的空间也很大,这里呢 我们就使用立即执行函数
声明一个函数,并马上调用这个匿名函数就叫做立即执行函数;即立即执行函数是定义函数以后立即执行该函数。()()
里面定义的参数相对于是局部变量,即使变量名相同,也不会有影响的,所以就放心使用吧
项目里面每个盒子的边框不再是中规中矩的border了,之所以看起来很高级,那是因为边框里面有图片哟,大家不要觉得很难,因为它真的很简单
边框效果图:
首先来了解下边框图片需要掌握的属性
属性
说明
border-image-source
用在边框的图片的路径
border-image-slice
图片边框内向偏移 裁剪的尺寸,一定不加单位,上右下左顺序进行裁剪
border-image-width
图片边框的宽度(需要加单位)注意:不是边框的宽度而是边框图片的宽度
border-image-repeat
图片边框是否平铺(repeat)、铺满(round)、或拉伸(stretch)默认拉伸
我们来看看border-image-repeat属性值不同的效果
<style> html { font-size: 80px !important; } .box { width: 200px; height: 200px; position: relative; border: 15px solid transparent; border-width: 0.6375rem 0.475rem 0.25rem 1.65rem; border-image-source: url(../charts-project/images/border.png); border-image-slice: 51 38 20 132; margin-bottom: 0.25rem; } .inner { position: absolute; top: -0.6375rem; left: -1.65rem; right: -0.475rem; bottom: -0.25rem; padding: 0.3rem 0.45rem; font-size: .25rem; color: #fff; } </style></head> <body style="background:url('./images/bg.jpg');"> <div class="box"> <div class="inner">你好</div> </div></body>
分割多少,就以四个角图片的完整度来哟很多人会疑惑🤔 为什么还要在box盒子里面放一个inner盒子呢,注意看由于盒子模型的原因 如果直接写文字,文字的书写位置就达不到我们想要的这种效果,所以通过在边框里面再添加一个子盒子,利用定位 ,里面的内容就可以改变位置啦,快去试一试吧
这里为什么要将字体图标呢,以前我们使用字体图标非常的麻烦 ,这里教给大家一种新的方法:通过类名调用字体图标
使用步骤
- HTML页面引入字体图标中css文件
- 标签直接调用图标对应的类名即可
老规矩,还是用一个简单的例子 这样大家就不用迷茫了,博主辛辛苦苦的为大家书写例题,一定要三步曲哟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../charts-project/fonts/style.css"></head><body> <div class="icon-codeigniter"></div></body></html>
类名是怎么来的呢:直接在style.css里面复制
效果图:
图中的统计图呈现的是一个颜色渐变的效果 看起来很好看 一起来看看它是如何实现的吧
效果图:
注意修改的是option对象里面的color属性哟
方法一:提倡这种方法 比较简单
color:new echarts.graphic.LinearGradient( //(x1,y2)点到点(x2,y2)之间进行渐变 0,0,0,1, [ {offset:0,color:'#00fffb' },//0起始颜色 {offset:1,color:'#0061ce' },//1结束颜色 ]),
方法二:
// 修改线性渐变色方式 2color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], globalCoord: false // 缺省为 false},
这个模块也是这个项目的一个难点;根据年、季、月、周的切换下面的数据相应的改变
效果图 :
前提是给我们的盒子添加对应的属性
<!-- 销售额 --> <div class="sales panel"> <div class="inner"> <div class="caption"> <h3>销售额统计</h3> <a href="javascript:;" class="active" data-type="year">年</a> <a href="javascript:;" data-type="quarter">季</a> <a href="javascript:;" data-type="month">月</a> <a href="javascript:;" data-type="week">周</a> </div> <div class="chart"> <div class="label">单位:万</div> <div class="line"></div> </div> </div> </div>
现将我们的数据提前准备,等我们学到后面的时候,这些数据就是从后台实时获取的,因为现在没有学到,所以现在就是写死我们的数据
var data = { year: [ [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120], [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79] ], quarter: [ [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38], [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34] ], month: [ [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36], [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98] ], week: [ [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53], [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24] ]
年、季、月、周的自动切换
//切换 $('.sales .caption').on('click', 'a', function () { //样式 index = $(this).index() - 1; $(this).addClass("active").siblings("a").removeClass("active"); var currDate = data[this.dataset.type]; console.log(currDate); option.series[0].data = currDate[0]; option.series[1].data = currDate[1]; // 重新配好的数据给实例对象 myChart.setOption(option) })
根据tab的切换 获取相应的数据
var as = $(".sales .caption a"); var index = 0; var timer = setInterval(function () { index++; if (index >= 4) { index = 0; } as.eq(index).click(); }, 1000) //鼠标进入停止定时器,离开,开启定时器 $(".sales").hover(function () { clearInterval(timer); }, function () { clearInterval(timer); timer = setInterval(function () { index++; if (index >= 4) { index = 0; } as.eq(index).click(); }, 1000); })
前面只是教大家如何使用echarts图表,但是这种半圆里面是没有的,需要我们自己自己通过它提供的扇形图 自己修改 ,本质还以一个饼形
效果图:做法:把一个饼形图分成三段,下面一段颜色设置为透明色即可,做一个拱形离不开的是将不透明的那一部分旋转正,在series里面设置调角度 其默认的角度是90度
startAngle :180 /起始角度,支持的范围是[0,360]
注意:此角度不是旋转角度,而是起始角度,
我们先来看看饼图的起始角度
上面这个图是我给大家准备的在线案例图,根据我的这个步骤,不会都很难啊
效果图: 从上面的动图 大家就可以知道这个模块要实现的功能,根据定时器 去切换到各省份相应的数据,与之前不同的是近30日的数据不是在html里面准备好的,而是动态的存储数据得到的,一起来看看它是如何实现的吧
从这个案例中我们要学到的知识点
- 实际开发中,后台返回的真实数据如何渲染到页面中
- ES6模版字符相关知识-拼接字符串
ES6模版字符:
${表达式}
//模版字符串使用返钩号‘’而且允许自动换行 反钩号是tab键上面的那个键
首先准备相关数据
首先来看它里面的属性 city、sales、flag是各省热销的数据 flag的值决定了箭头的方向,true就是箭头向上,反之则向下;
brands数组里面的对象是与城市相对应地数据模块,里面的flag属性和外面的含义一样
var hotData = [ { city: "北京", sales: "25, 179", flag: true, brands: [ // 品牌种类数据 { name: "可爱多", num: "9,086", flag: true }, { name: "哇哈哈", num: "8,341", flag: true }, { name: "喜之郎", num: "7,407", flag: false }, { name: "小旺仔", num: "6,080", flag: false }, { name: "小洋人", num: "6,724", flag: false }, { name: "好多鱼", num: "2,170", flag: true }, ] }, { city: "上海", sales: "20, 760", flag: true, brands: [ // 品牌种类数据 { name: "可爱多", num: "2,345", flag: true }, { name: "哇哈哈", num: "7,109", flag: true }, { name: "喜之郎", num: "3,701", flag: false }, { name: "小旺仔", num: "6,080", flag: false }, { name: "小洋人", num: "2,724", flag: false }, { name: "好多鱼", num: "2,998", flag: true }, ] }, { city: "河北", sales: "21, 180", flag: false, brands: [ // 品牌种类数据 { name: "可爱多", num: "8,907", flag: true }, { name: "哇哈哈", num: "9,541", flag: true }, { name: "喜之郎", num: "9,447", flag: false }, { name: "小旺仔", num: "6,090", flag: false }, { name: "小洋人", num: "5,924", flag: false }, { name: "好多鱼", num: "2,870", flag: true }, ] }, { city: "江苏", sales: "28,148 ", flag: false, brands: [ // 品牌种类数据 { name: "可爱多", num: "9,889", flag: true }, { name: "哇哈哈", num: "7,381", flag: true }, { name: "喜之郎", num: "5,487", flag: false }, { name: "小旺仔", num: "2,080", flag: false }, { name: "小洋人", num: "6,924", flag: false }, { name: "好多鱼", num: "2,770", flag: true }, ] }, { city: "山东", sales: "27, 874", flag: true, brands: [ // 品牌种类数据 { name: "可爱多", num: "9,186", flag: true }, { name: "哇哈哈", num: "6,341", flag: true }, { name: "喜之郎", num: "8,447", flag: false }, { name: "小旺仔", num: "7,087", flag: false }, { name: "小洋人", num: "5,624", flag: false }, { name: "好多鱼", num: "2,370", flag: true }, ] } ]
数据准备好啦,接下来就是将数据渲染到页面中
首先就是遍历上面的数据,index是索引号,item是对应的对象,里面有几个对象,各省里面就有几个li,我们使用字符串的形式将遍历的信息放入到supHTML里面,直接用html()方法添加到sup盒子中,此方法识别标签和换行,ES6模版字符里面不能书写if语句 但是可以用三元表达式,根据flag属性值判断箭头的方向
//(1) 遍历 hotData 对象 var supHTML = ""; $.each(hotData, function (index, item) { supHTML += `<li><span>${item.city}</span><span>${item.sales}<s class=${item.flag ? "icon-arrow-up2" : "icon-arrow-down2"}></s></span></li>`; }); $(".sup").html(supHTML);
此模块实现的功能是使用定时器跟新内容,当鼠标经过的时候定时器就停止,鼠标离开开启定时器
因为当我们鼠标经过和定时器触发都要改变相应城市的数据,何不将这个功能封装到一个函数里面呢,哪里需要就直接调用它
这个函数就是将各城市的数据信息插入到sub盒子里面
hotData[that.index()].brands 里面的that.index()]就是当前城市的索引号,通过城市的索引号找到对应的数组里面的brands数据,还是利用相同的方法添加到sub盒子里面
function render(that) { that.addClass("active").siblings().removeClass(); // console.log(hotData[$(this).index()].brands); var subHTML = ""; $.each(hotData[that.index()].brands, function (i, item) { subHTML += `<li><span>${item.name}</span><span>${item.num}<s class=${item.flag ? "icon-arrow-up2" : "icon-arrow-down2"}></s></span></li>`; }); $(".sub").html(subHTML); }
页面一刷新 就是第一个li设置为鼠标经过事件,
设置一个index遍历 控制显示li,当到达最后一个li的时候,又重第一个li开始高亮显示,所以用一个if语句判断。调用render函数,注意的是里面的实参,不再是this指向 而是当前高亮的是第几个li,对应的li里面渲染数据,再实现用户鼠标经过和离开事件,鼠标经过定时器就停止,鼠标离开,计时器就开启
// 默认把第一个li 处于鼠标经过状态 var lis = $(".province .sup li"); lis.eq(0).mouseenter(); // 开启定时器 var index = 0; var timer = setInterval(function () { index++; if (index >= 5) index = 0; render(lis.eq(index)); }, 2000); $(".province .sup").hover( function () { clearInterval(timer); }, function () { clearInterval(timer); timer = setInterval(function () { index++; if (index >= 5) index = 0; render(lis.eq(index)); }, 2000); } )
当鼠标经过当前的li高亮,此时render里面的实参就是当前的li, index = $(this).index();这句代码是当我们经过li之后,那么我们定时器里面的index就会发生改变,它的下一个li就不再是定时器里面index的顺序了,索引在我们鼠标经过的时候,要将当前的li的索引号给index,确保定时器是从当前li开始执行的
$(".province .sup").on("mouseenter", "li", function () { index = $(this).index(); render($(this)); });
通过一个小的项目,将我们echarts的内容展示出来,echarts很简单 就是要会查阅文档。
以上就是数据可视化项目的全部知识点啦,博主并不是将这个项目的代码复制过来大家欣赏,而是通过根据实际例子来讲解这个项目所用到的技术,所有的方法都教给大家啦,自己动手试试吧,方法会了还怕不会做吗
授之以鱼不如授之以渔
别忘啦 三步曲 点赞👍 评论 ✍️ 收藏 🌟
原网址: 访问
创建于: 2023-01-12 16:41:47
目录: default
标签: 无
未标明原创文章均为采集,版权归作者所有,转载无需和我联系,请注明原出处,南摩阿彌陀佛,知识,不只知道,要得到
最新评论