Echarts教程_1-2 简介
2024-06-05 20:39:28
https://gitee.com/fakerlove/echarts
文章目录
- echarts 教程
- 1. 简介
- 2. 入门
- 2.1 环境准备
- 2.2 入门demo
- 基础设置
- 2.3 echarts 使用
- 下载并引入echarts.js
- 准备一个具备大小的盒子
- 初始化echarts 实例对象
- 制定配置项和数据
- 将配置项设置给echarts 实例对象
echarts 教程
1. 简介
由百度 ECharts 团队创建，联合公司内外众多数据可视化从业人组成的技术研究虚拟组织，致力于数据可视化的相关研究、教育普及、产品研发及生态建设。
2. 入门
2.1 环境准备
flexible.js+rem 智能大屏适配
flexible 是阿里出品的屏幕适配。
https://github.com/amfe/lib-flexible
引用js的话
https://github.com/amfe/lib-flexible/blob/2.0/index.js
具体例子
(function flexible(window, document) {var docEl = document.documentElement;var dpr = window.devicePixelRatio || 1;// adjust body font sizefunction setBodyFontSize() {if (document.body) {document.body.style.fontSize = 12 * dpr + "px";} else {document.addEventListener("DOMContentLoaded", setBodyFontSize);}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit() {var rem = docEl.clientWidth / 24;docEl.style.fontSize = rem + "px";}setRemUnit();// reset rem unit on page resizewindow.addEventListener("resize", setRemUnit);window.addEventListener("pageshow", function(e) {if (e.persisted) {setRemUnit();}});// detect 0.5px supportsif (dpr >= 2) {var fakeBody = document.createElement("body");var testElement = document.createElement("div");testElement.style.border = ".5px solid transparent";fakeBody.appendChild(testElement);docEl.appendChild(fakeBody);if (testElement.offsetHeight === 1) {docEl.classList.add("hairlines");}docEl.removeChild(fakeBody);}
})(window, document);
vscode cssrem插件
flex 布局
less 使用
把less 编译成css插件
2.2 入门demo
基础设置
flexible.js
(function flexible(window, document) {var docEl = document.documentElement;var dpr = window.devicePixelRatio || 1;// adjust body font sizefunction setBodyFontSize() {if (document.body) {document.body.style.fontSize = 12 * dpr + "px";} else {document.addEventListener("DOMContentLoaded", setBodyFontSize);}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit() {var rem = docEl.clientWidth / 24;docEl.style.fontSize = rem + "px";}setRemUnit();// reset rem unit on page resizewindow.addEventListener("resize", setRemUnit);window.addEventListener("pageshow", function(e) {if (e.persisted) {setRemUnit();}});// detect 0.5px supportsif (dpr >= 2) {var fakeBody = document.createElement("body");var testElement = document.createElement("div");testElement.style.border = ".5px solid transparent";fakeBody.appendChild(testElement);docEl.appendChild(fakeBody);if (testElement.offsetHeight === 1) {docEl.classList.add("hairlines");}docEl.removeChild(fakeBody);}
})(window, document);
页面基础
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/index.css"><!-- 引入屏幕适配js --><script src="js/flexible.js"></script><script src="js/echarts.min.js"></script><script src="js/jquery.js"></script><script src="js/china.js"></script><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>
</head><body><!-- 开始书写头文件 --><header><h1>数据可视化echarts</h1><div class="showTime"></div></header><!-- 页面主体部分 --><section class="minbox"><div class="coloum"><div class="panel bar"><h2>柱形图行列</h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel line"><h2>折线图行列</h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel pie"><h2>饼行列</h2><div class="chart"></div><div class="panel-footer"></div></div></div><div class="coloum"><div class="no"><div class="no-hd"><ul><li>12456</li><li>10000</li></ul></div><div class="no-bd"><ul><li>前端需求人数</li><li>市场供应人数</li></ul></div></div><!-- 地图模块 --><div class="map"><div class="map1"></div><div class="map2"></div><div class="map3"></div><div class="chart"></div></div></div><div class="coloum"><div class="panel bar2"><h2>柱形图行列</h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel line2"><h2>柱形图行列</h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel pie2"><h2>柱形图行列</h2><div class="chart"></div><div class="panel-footer"></div></div></div></section><script src="js/myindex.js"></script></body></html>
前端所需要的js
* {padding: 0;margin: 0;box-sizing: border-box;
}
li {list-style: none;
}
@font-face {font-family: electron;src: url(../font/DS-DIGIT.TTF);
}
body {background: url(../images/bg.jpg) no-repeat top center;line-height: 1.15;
}
header {height: 1.25rem;position: relative;background: url(../images/head_bg.png) no-repeat;background-size: 100% 100%;
}
header h1 {font-size: 0.457rem;color: white;text-align: center;line-height: 1rem;
}
header .showTime {position: absolute;right: 0.375rem;top: 0;line-height: 0.9375rem;font-size: 0.25rem;color: rgba(255, 255, 255, 0.7);
}
.minbox {display: flex;max-width: 1920px;min-width: 1080px;height: 7.5rem;padding: 0.125rem 0.125rem 0;margin: 0 auto;
}
.minbox .coloum {flex: 3;
}
.minbox .coloum:nth-child(2) {flex: 5;margin: 0 0.1875rem 0.125rem;
}
.minbox .panel {position: relative;height: 3.875rem;padding: 0 0.1875rem 0.5rem;margin-bottom: 0.1875rem;border: 1px solid rgba(255, 186, 139, 0.17);background: url(../images/line.png) rgba(255, 255, 255, 0.03);
}
.minbox .panel .chart {height: 3rem;background-color: pink;
}
.minbox .panel h2 {height: 0.6rem;line-height: 0.6rem;font-size: 0.25rem;color: #ffffff;font-weight: 400;
}
.minbox .panel::before {position: absolute;height: 0.125rem;width: 0.125rem;top: 0;left: 0;border-left: 2px solid #02a6b5;border-top: 2px solid #02a6b5;content: "";
}
.minbox .panel::after {position: absolute;height: 0.125rem;width: 0.125rem;top: 0;right: 0;border-right: 2px solid #02a6b5;border-top: 2px solid #02a6b5;content: "";
}
.minbox .panel .panel-footer {position: absolute;width: 100%;bottom: 0;left: 0;
}
.minbox .panel .panel-footer::before {position: absolute;height: 0.125rem;width: 0.125rem;bottom: 0;left: 0;border-left: 2px solid #02a6b5;border-bottom: 2px solid #02a6b5;content: "";
}
.minbox .panel .panel-footer::after {position: absolute;height: 0.125rem;width: 0.125rem;bottom: 0;right: 0;border-right: 2px solid #02a6b5;border-bottom: 2px solid #02a6b5;content: "";
}
.no {background-color: rgba(101, 132, 226, 0.1);padding: 0.1875rem;
}
.no .no-bd ul {display: flex;
}
.no .no-bd ul li {flex: 1;text-align: center;color: rgba(255, 255, 255, 0.7);font-size: 0.255rem;height: 0.5rem;line-height: 0.5rem;margin-top: 0.125rem;
}
.no .no-hd {border: 1px solid rgba(25, 186, 139, 0.17);position: relative;
}
.no .no-hd ul {display: flex;
}
.no .no-hd ul li {position: relative;flex: 1;line-height: 1rem;font-size: 0.875rem;color: #ffeb7b;text-align: center;font-family: electron;
}
.no .no-hd ul li:nth-child(1):after {content: "";position: absolute;top: 25%;right: 0;height: 50%;width: 1px;background-color: rgba(255, 255, 255, 0.2);
}
.no .no-hd::after {position: absolue;height: 10px;width: 30px;right: 0;bottom: 0;border-right: 2px solid #02a6b5;border-bottom: 2px solid #02a6b5;content: " ";
}
.no .no-hd::before {position: absolue;height: 10px;width: 30px;top: 0;left: 0;content: " ";border-top: 2px solid #02a6b5;border-left: 2px solid #02a6b5;
}
.map {height: 10.125rem;position: relative;
}
.map .map1 {width: 6.475rem;height: 6.475rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: url(../images/map.png);opacity: 0.3;background-size: 100% 100%;
}
.map .map2 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 8.375rem;height: 8.375rem;background: url(../images/lbx.png);background-size: 100% 100%;animation: rotaltal1 15s linear infinite;opacity: 0.3;
}
@keyframes rotaltal1 {from {transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(360deg);}
}
.map .map3 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 7.075rem;height: 7.075rem;background: url(../images/jt.png);background-size: 100% 100%;animation: rotaltal2 10s linear infinite;opacity: 0.3;
}
@keyframes rotaltal2 {from {transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(-360deg);}
}
.map .chart {position: absolute;top: 0;left: 0;width: 100%;height: 10.125rem;
}效果如下
2.3 echarts 使用
常见的数据可视化库
- D3.js 目前web 端评价最高的javascript 可视化工具
- Echart.js 百度出品的一个开源的javascript 数据可视化库–以及收入到apache
- HighCharts.js 是国外的前端数据可视化库，非商用免费，许多国外大公司所用
- AntV 蚂蚁金服全新一代的数据可视化解决方案
实例提供
https://echarts.apache.org/examples/zh/index.html#chart-type-bar
下载并引入echarts.js
页面下载
https://echarts.apache.org/zh/download.html
npm 安装
npm install echarts
引入js
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script>
</head>
</html>
准备一个具备大小的盒子
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
初始化echarts 实例对象
var myChart = echarts.init(document.querySelector(".bar"));
制定配置项和数据
// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};将配置项设置给echarts 实例对象
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
完整的demo
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据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>
Echarts教程_1-2 简介相关推荐
- ECharts教程（未完）
ECharts 特性 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) 底层依赖轻量级的矢量图形库 ZRender 丰富的可视化类型 常规的折线图.柱状图 ...
- cutelyst教程_01 _简介
Tutorial_01_Intro 教程_01 _简介 Daniel Nicoletti edited this page on Feb 20, 2019 · 9 revisions Daniel N ...
- [医疗信息化][DICOM教程]DICOM标准简介
[医疗信息化][DICOM教程]DICOM标准简介 使用OsiriX的DICOM标准简介 内容 介绍 什么是DICOM 医院系统内的图像传输 了解DICOM服务 OsiriX提供的DICOM服务 其他 ...
- Android精通教程-Android入门简介
前言 大家好,我是 Vic,今天给大家带来Android精通教程-Android入门简介的概述,希望你们喜欢 每日一句 If life were predictable it would cease ...
- 手把手的K-means聚类算法教程（含简介及教育数据应用实例 Python实现）
手把手的K-means聚类算法教程(含简介及教育数据应用实例 Python实现) 1. K-MEANS的基本原理 2. 数据预处理 2.1 数据读取:from Excel 2.2 数据预处理:标准化Z ...
- ECharts教程(详细)
ECharts教程(详细) 非常全面的ECharts教程,非常全面的ECharts教程,目前线条/节点颜色.线条粗细.线条样式.线条阴影.线条平滑.线条节点大小.线条节点阴影.线条节点边框.线条节点边 ...
- 【乐绘派】Audition专业音频后期制作教程 | 1-软件简介
Audition专业音频后期制作教程 | 1-软件简介
- node-red教程1 node-red简介
编者的话 • 一个偶然的机会,认识了node-red.这种拖拽控件编写代码的方式给了我很深刻的印象.由于我平时工作偏向硬件,所以对这些华丽的前端技术技术不是很了解,但个人认为,node-red技术在搭 ...
- Nacos教程_1 简介和安装
教程原稿–https://gitee.com/fakerlove/joker-nacos 文章目录 nacos 教程 1. 简介 1.1 介绍 1.2 安装 下载 linux版本 windows版本 ...
- Git教程_1 简介
https://gitee.com/fakerlove/git 文章目录 git 教程 1. 简介 1.1 介绍 1.2 环境准备 1.3 安装 1. 设置 用户名和密码: 2. 然后看本地目录是否有 ...
最新文章
- 堆排序（C\C++）
- 百练OJ：2746:约瑟夫问题
- 7种 Java 设计模式，你会几种？
- 【集合工具类：Collections】
- python怎么画出好看的统计图_用最简单的 Python ，画最好看的图 [简单数据可视化]...
- Introduction to Chinese natural language processing
- Java学习笔记 --- IDEA
- 开源WebMail客户端Intouch2.2beta导致IE6崩溃的原因和修改方法
- FileZilla Server 设置
- 硬件电路之运算放大器3--比较器和跟随器
- 时域信号处理——时域采样（抽样）
- vscode连接远程服务器报错ln: failed to create hard link ... File exists
- 计算机搜索功能在分区里失灵,DiskGenius搜索已丢失分区(重建分区表)
- [Game Engine]开源游戏框架（转至wiki）
- Vue CLI脚手架详细教程
- 文件23333333
- 程序员陪女朋友自拍杆哪个好？自拍杆品牌推荐
- lz77、lz4学习
- 摄像头视角鼠标滚轮拉伸fieldOfView
- 【转】JPEG压缩原理