本项目中使用的是echarts图表库，Echarts提供了常规的折线图、柱状图、散点图、饼图、k线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
一、效果展示图
二、echarts基本使用
五步曲 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结束颜色
]
),方法二：
// 修改线性渐变色方式 2
color: {
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很简单 就是要会查阅文档。
以上就是数据可视化项目的全部知识点啦，博主并不是将这个项目的代码复制过来大家欣赏，而是通过根据实际例子来讲解这个项目所用到的技术，所有的方法都教给大家啦，自己动手试试吧，方法会了还怕不会做吗
授之以鱼不如授之以渔
别忘啦 三步曲 点赞👍 评论 ✍️ 收藏 🌟
1497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
