本文介绍了Echarts的使用步骤，包括下载引入、DOM容器准备、实例化、配置项设置等，并展示了配置项如标题、提示框、图例的详细说明。此外，还探讨了项目中的适配方案，如宽高等比例适配和rem单位的使用，以及实战中的技巧，如边框图片、字体图标、立即执行函数、Tab切换、订单区域动态切换和销售统计图表的切换效果。最后，提到了ES6模板字符的运用和Echarts地图的使用。
温馨提示，图片未转存加载，建议看后面的PDF文件
数据可视化
使用场景：通用报表 ，移动端图表，大屏可视化，图编辑分析，地理可视化
常见的JS库D3,js（入手难）、echarts.js(WPS)、highcharts.js(OFFICE)
承上启下的作用。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oTKcDiNn-1626595121658)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210713095741495.png)]
一、使用五部曲
1、下载并引入echarts.js文件
浏览器下载
npm下载
在线定制
2、装备一个具备大小的DOM容器——生成的图标会放到这个容器中
3、初始化实例对象——实例化echarts对象
4、指定配置项和数据
5、将配置项设置给实例对象
以下是一个上手示例
<!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,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>Echarts体验</title>
<style>
.box{
width: 500px;
height: 500px;
background-color: rgb(172, 153, 153);
}
</style>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div class="box"></div>
<script>
var myChart = echarts.init(document.querySelector('.box'));//实例化echarts对象
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
//将配置项给实例对象
myChart.setOption(option);
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OKaZIsF9-1626595121660)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210713103341532.png)]
二、配置项相关说明
title 标题
tooltip 提示框组件
legend 图例组件
toolbox 工具栏
grid 网格containlabel是刻度
xAxis x轴
yAxis y轴
color 调色盘
color:[ ' pink'，'blue'，‘green '，' skyblue'， 'red'],
serise 系列列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zja1OItr-1626595121661)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210713141505635.png)]
type 类型
line线 bar柱 pie饼
name 系列名字
data 数据的一个数组（相关说明）
stack 数据堆叠
第二个=第一个+第二个
第三个=第一个+第二个 +第三个
未涉及属性找文档
三、项目阶段
1、目标项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gsvNcsvQ-1626595121662)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210713143118487.png)]
2、项目适配方案
宽高等比例适配1024-1920px---------flexble.js (插件)+rem单位（配合cssrem插件）+flex布局
●设计稿是1920px
●PC端适配:宽度在1024-1920之间页面元素宽高自适应
-
flexible.js 把屏幕分为24等份
-
cssrem插件的基准值是80px
插件-配置按钮–配置扩展设置–Root Font Size里面设置。
但是别忘记重启vscode软件保证生效 -
3.要把屏幕宽度约束在1024-1920之间有适配,实现代码:
/* // 实现rem适配 */
@media screen and (max-width: 1024px) {
html {
font-size: 42.66px !important;
}
}
@media screen and (min-width: 1920px) {
html {
font-size: 80px !important;
}
}
3、实战中的知识点
3.1边框图片border-image
盒子大小不一,但是边框样式相同,此时就需要边框图片来完成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-klSWpESY-1626595121662)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210713194739596.png)]
border-image-source 边框图片的路径
border-image-slice 边框图片向内偏移（裁剪的尺寸）上右下左（一定不要加单位）
border-image-width 边框图片的宽度（要加单位）并不等于边框的宽度，不会挤压框内文字
border-image-repeat 边框图片是否平铺repeat、铺满round、拉伸stretch（默认）
3.2通过类名调用字体图标
1、引入css文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Wa4QE7h-1626595121663)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210713215556564.png)]
2、标签直接调用图标对应的类名
3.3立即执行函数用法
为了防止变量污染，采用立即执行函数策略
（function（）{}）（）；
多个立即执行函数之间必须加上逗号分隔
3.4 Tab栏切换
功能实现步骤：
- 绑定 标签页点击 事件
- 当前容器加active其他容器移除active
- index对应的内容容器显示其他容器隐藏
// 切换
$(".monitor .tabs").on("click", "a", function() {
$(this).addClass("active").siblings("a").removeClass("active");
// console.log($(this).index());
// 选取对应索引号的content
$(".monitor .content").eq($(this).index()).show().siblings(".content").hide();
});
动画功能：
- 实现思路：
- 先克隆列表，追加在后面
- marquee-view 占满剩余高度，溢出隐藏
- 绝对定位，top 1.6rem bottom 0
- 宽度100%，溢出隐藏
- 使用animation实现动画
- 使用 translateY 向上位移 50%
- 动画时间15s，匀速播放，循环执行。
js代码：
// 动画
$(".marquee-view .marquee").each(function() {
// console.log($(this));
var rows = $(this).children().clone();
$(this).append(rows);
});
css代码：
/* 通过CSS3动画滚动marquee */
.marquee-view .marquee {
animation: move 15s linear infinite;
}
@keyframes move {
0% {
}
100% {
transform: translateY(-50%);
}
}
/* 3.鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {
animation-play-state: paused;
}
3.5订单区域（order）-效果
实现步骤：
- 提前准备数据
- 点击后切tab激活样式
- 点击后切换数据内容
- 开启定时器动态切换数据
// 订单功能
(function(){
// 1. 准备数据
var data = {
day365: { orders: '20,301,987', amount: '99834' },
day90: { orders: '301,987', amount: '9834' },
day30: { orders: '1,987', amount: '3834' },
day1: { orders: '987', amount: '834' }
}
// 获取显示 订单数量 容器
var $h4Orders = $('.order h4:eq(0)')
// 获取显示 金额数量 容器
var $h4Amount = $('.order h4:eq(1)')
$('.order').on('click','.filter a',function(){
// 2. 点击切换激活样式
$(this).addClass('active').siblings().removeClass('active')
// 3. 点击切换数据
var currdata = data[this.dataset.type]
$h4Orders.html(currdata.orders)
$h4Amount.html(currdata.amount)
})
// 4. 开启定时器切换数据
var index = 0
var $allTab = $('.order .filter a')
setInterval(function(){
index ++
if (index >= 4) index = 0
$allTab.eq(index).click()
},5000)
})();
注意啊：：：为了获取自定义属性的值，必须要用xx.dataset.type//不可用xx.dataset.set你已经被坑过了
为了再次强调上述过程，接下来更加详细……
3.6销售统计( sales )-切换效果
实现步骤：
-
- 准备切换需要依赖的数据 4组
-
- 绑定点击事件
- 切换激活 tab 的样式
- 切换图表依赖的数据（重新渲染图表）
-
- 开启定时器，进行切换， 鼠标经过sales停止定时器，离开开启定时器
第一步：准备数据，使用数据
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]
]
}
series: [{
name:'预期销售额',
data: data.year[0],
type: 'line',
smooth: true,
itemStyle: {
color: '#00f2f1'
}
},{
name:'实际销售额',
data: data.year[1],
type: 'line',
smooth: true,
itemStyle: {
color: '#ed3f35'
}
}]
第二步：点击后切换
// 切换 $('.sales').on('click', '.caption a', function(){ // 样式 $(this).addClass('active').siblings().removeClass('active') // currData 当前对应的数据 // this.dataset.type 标签上的data-type属性值，对应data中的属性 var currData = data[this.dataset.type] // 修改图表1的数据 option.series[0].data = currData[0] // 修改图表2的数据 option.series[1].data = currData[1] // 重新设置数据 让图标重新渲染 myChart.setOption(option) })
第三步：tab栏自动切换效果
- 开启定时器每隔3s，自动让a触发点击事件即可
- 鼠标经过sales，关闭定时器，离开开启定时器
var as = $(".sales .caption a"); var index = 0; var timer = setInterval(function() { index++; if (index >= 4) index = 0; as.eq(index).click(); }, 1000); // 鼠标经过sales，关闭定时器，离开开启定时器 $(".sales").hover( function() { clearInterval(timer); }, function() { clearInterval(timer); timer = setInterval(function() { index++; if (index >= 4) index = 0; as.eq(index).click(); }, 1000); } );
自动缩放
// 当我们浏览器缩放的时候，图表也等比例缩放 window.addEventListener("resize", function() { // 让我们的图表调用 resize这个方法 myChart.resize(); });
3.7 ES6中的模板字符
// ES6 模板字符写法console.log(`我的名字是${star.name}我的年龄是${star.age}`);console.log(`<span>${star.name}</span><span>${star.age}</span>`);
根据数据渲染各省热销 sup 模块内容
- 删掉原先自带小li
- 遍历数据 $.each()
- 拼接字符串把数据渲染到 li 的span 里面
- 追加给 .sup 盒子
var supHTML = ""; $.each(hotData, function(index, item) { // console.log(item); supHTML += `<li><span>${item.city}</span><span> ${item.sales} <s class= ${item.flag ? "icon-up" : "icon-down"}></s></span></li>`; }); $(".sup").html(supHTML);
3.8Echarts-map使用（中国地图等）
参考社区的例子
实现步骤：
- 第一需要下载china.js提供中国地图的js文件
- 第二个因为这种地图样式的代码比较多，我们新建一个新的js文件 myMap.js 引入
- 使用并修改社区提供的配置即可。
3.9 一些总结图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wo2x62Hl-1626595121664)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210714214600035.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YvIo7RNI-1626595121665)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210715115430115.png)]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
