ECharts数据可视化项目
https://www.bilibili.com/video/BV1v7411R7mp/?spm_id_from=333.788.recommend_more_video.2
ECharts数据可视化项目-大屏数据可视化展示-echarts 图表制作-pink老师直播课更新完毕)
P1 01-直播课内容介绍
Echarts 一擦s
课程技术栈
-基于flexible.js + rem智能大屏适配
-VScode cssrem插件
Flex布局
Less 使用
基于ECharts数据可视化展示
ECharts柱状图数据设置
ECharts 地图引入
P2 02-数据可视化介绍
数据可视化
数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息。
数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。
P3 03-可视化适配方案
vscode less to css plugins
flexible.js 根据屏幕大小 改变font-size大小
cssrem插件 vscode 重启设置配置
vscode .box == div.box
rem换算
设计稿是1920px
1.flexible.js 把屏幕分为24等份
2.cssrem插件的基准值是 80px插件-配置按钮一配置扩展设置-Root Font Size里面设置。
但是别忘记重启vscode软件保证生效
P4 04-可视化项目头部制作
<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>
P5 05-mainbox布局分析
P6 06-panel盒子公共面板
before after 设置边框
P7 07-panle盒子完成
P8 08-数字模块no布局制作
P9 09-no-hd模块详细布局
漂亮数字 用字体
P10 10-no-bd模块详细布局
P11 11-map1球体模块制作
xy
background-size:100% 100%; //保存背景图也可以随窗口缩放
P12 12-map2模块旋转球体制作
@keyframes rotate1{
form{
transform:translate(-50%,-50%) rotate(0deg)
}
to{
transform:translate(-50%,-50%) rotate(360deg)
}
}
.map2{
animation:rotate1 15s linear infinite;
}
rotate(-360deg)逆时针
P13 13-map3模块旋箭头制作
P14 14-ECharts简介
常见的数据可视化库:
D3.js 目前Web端评价最高的Javascript可视化工具库(入手难)
ECharts.js 百度出品的一个开源Javascript数据可视化库
Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
AntV 蚂蚁金服全新一代数据可视化解决方案 等等
Highcharts 和Echarts 就像是Office 和WPS 的关系
官网地址:https://www.echartsjs.com/zh/index.html
P15 15-ECharts体验使用五部曲
步骤1:下载并引入echarts.js文件
步骤2:准备一个具备大小的DOM容器
步骤3:初始化echarts实例对象
步骤4:指定配置项和数据(option)
步骤5:将配置项设置给echarts实例对象
容器一定要有宽高度
https://echarts.apache.org/handbook/zh/get-started/
<!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>
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="js/echarts.min.js"></script>
<script>
// 基于准备好的dom,初始化echarts实例
let myCharts = echarts.init(document.querySelector('.box'))
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}
// 使用刚指定的配置项和数据显示图表。
myCharts.setOption(option)
</script>
</body>
</html>
P16 16-ECharts基础配置(上)
需要了解的主要配置:series xAxis yAxis grid tooltip title legend color
-
series
- 系列列表。每个系列通过
type
决定自己的图表类型 - 大白话:图标数据,指定什么类型的图标,可以多个图表重叠。
- 系列列表。每个系列通过
-
xAxis:直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
-
yAxis:直角坐标系 grid 中的 y 轴
-
grid:直角坐标系内绘图网格。
-
title:标题组件
-
tooltip:提示框组件
-
legend:图例组件
-
color:调色盘颜色列表
数据堆叠,同个类目轴上系列配置相同的
stack
值后 后一个系列的值会在前一个系列的值上相加。
P17 17-ECharts基础配置(中)
P18 18-ECharts基础配置(下)
P19 19-柱状图bar引入到HTML页面中
立即执行函数妙用
为了防止变量污染,减少命名冲突,我们可以采取立即执行函数的写法。因为里面的变量都是局部变量。
echarts.init(document.querySelector('.box .children'))
P20 20-定制柱状图bar(上)
P21 21-定制柱状图bar(中)
P22 22-定制柱状图bar(下)
P23 23-EChart图表跟随屏幕缩放适配
让图表跟随屏幕自适应
window.addEventListener('resize',()=>{
myChart.resize()
})
P24 24-学习进度柱形图2引入到html页面中
P25-P31 25-学习进度柱形图2定制1-7
P32 32-折线图1引入到html页面中
P33 33-折线图1定制grid网格
P34 34-折线图1定制x轴和y轴相关配置
P35 35-折线图1定制两条线的样式
P36 36-折线图1数据更换
P37 37-折线图1tab栏切换原理分析
P38 38-折线图tab栏切换更换数据
$('a').index()
P39 39-折线图2引入到html页面中
P40 40-折线图2定制(上)
P41 41-折线图2定制填充渐变区域
P42 42-折线图2拐点配置定制
P43 43-折线图2数据更换
P44 44-饼形图1引入到html页面中
P45 45-饼形图1图例组件定制
P46 46-饼形图1修改饼形图大小
P47 47-饼形图1更换颜色和相关数据
P48 48-饼形图2引入到html页面中
P49 49-饼形图2南丁格尔玫瑰图-配置定制(上)
P50 50-饼形图2南丁格尔玫瑰图配置定制(下)
P51 51-中国地图模拟飞行模块引入到html页面中
Echarts社区找
参考社区的例子:https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (模拟飞机航线)
china.js中国地图文件
P52 52-中国地图模拟飞行模块定制
P53 53-项目完善期待下次再次相遇
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)