可视化介绍
应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。
数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。
知识扩展
less文件
Less 是一种 CSS 预处理器，它扩展了普通的 CSS 语言，为 web 开发提供了更多功能和便利。Less 文件的作用是简化和优化 CSS 的编写过程，提高样式表的可维护性和可读性，从而加快 web 开发的速度并降低代码的复杂度。
Less 文件并不能直接编译为 CSS 文件，要使用 Less 编译器（如VSCode 插件 Easy Less编译器）将 Less 文件编译为 CSS 文件。
立即执行函数
立即执行函数（Immediately Invoked Function Expression，IIFE）是一种在定义后立即执行的 JavaScript 函数。这是一种为了防止变量污染，减少命名冲突，采取的写法；因为里面的变量都是局部变量。它的基本形式是将一个函数包裹在括号中，然后紧接着在函数后面再加上一对括号来立即调用这个函数。
(function() {
// 这里可以放置代码，会立即执行
console.log("这是一个立即执行函数");
})();
jQuery
jQuery 是一个功能丰富、易用且强大的 JavaScript 库，被广泛应用于网页开发中，它简化了在网页开发中处理 DOM 操作、事件处理、动画效果、以及AJAX请求等任务的过程。以下是关于 jQuery 的功能介绍：
DOM 操作：jQuery 提供了简洁而强大的 API，使得选择元素、修改内容、添加/移除元素等 DOM 操作变得更加简单和高效。
事件处理：通过 jQuery，您可以很容易地添加事件监听器、处理用户交互，以及创建交互式网页。jQuery 提供了许多便捷的方法来处理各种事件。
动画效果：jQuery 包含了丰富的动画效果和方法，可以轻松实现元素的动画效果，例如淡入淡出、滑动、展开收起等。
AJAX 请求：通过 jQuery 的 AJAX 功能，您可以向服务器发送异步 HTTP 请求，获取数据并更新页面内容，而无需刷新整个页面。
跨浏览器兼容性：jQuery 解决了许多跨浏览器兼容性问题，使得开发者能够更加轻松地编写一致运行在不同浏览器中的代码。
插件扩展：jQuery 生态系统非常丰富，有大量的第三方插件可用于扩展 jQuery 的功能，帮助开发者实现更多复杂的功能和效果。
易学易用：jQuery 的语法简洁清晰，易于学习和使用，使得开发者能够快速上手并快速开发出高质量的交互式网页。
轻量级：尽管功能强大，jQuery 本身的文件大小相对较小，加载速度快，适合用于 Web 开发中。
适配方案
基于flexible.js+rem智能大屏适配。“flexible.js + rem 智能大屏适配” 是一种前端屏幕适配方案，主要用于在大屏设备（如电视、电脑显示器等）上实现页面的自适应布局。
Flexible.js：Flexible.js 是一个 JavaScript 库，用于根据设备的像素密度和屏幕宽度动态设置 标签的 font-size 属性，从而实现页面中元素尺寸和布局的自适应调整。通过计算出一个基准值，然后根据设备的实际尺寸比例来设置 标签的 font-size，以此作为 rem 单位的基准值。
rem 单位：rem 单位是相对于根元素（ 标签）字体大小的长度单位。通过使用 rem 单位来定义页面元素的尺寸和间距，可以使得这些元素相对于根元素的字体大小进行缩放，从而实现页面的自适应布局。
在将 Flexible.js 结合 rem 单位应用于智能大屏适配时，通常的做法是先根据大屏设备的特性和分辨率设定一组 rem 值作为基准参考，然后通过 Flexible.js 动态计算并设置 标签的 font-size，以确保页面在大屏设备上的元素尺寸和布局能够按比例适配并呈现良好的效果。
flexible.js 源码如下：
(function flexible(window, document) {
var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;
// adjust body font size
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = 12 * dpr + "px";
} else {
document.addEventListener("DOMContentLoaded", setBodyFontSize);
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit() {
var rem = docEl.clientWidth / 10;
docEl.style.fontSize = rem + "px";
}
setRemUnit();
// reset rem unit on page resize
window.addEventListener("resize", setRemUnit);
window.addEventListener("pageshow", function(e) {
if (e.persisted) {
setRemUnit();
}
});
// detect 0.5px supports
if (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);
修改 flexible.js 中 setRemUnit() 函数
修改 flexible.js 中屏幕划分的等份数，本案例将屏幕分为 24 等份
// set 1rem = viewWidth / 24
function setRemUnit() {
var rem = docEl.clientWidth / 24;
docEl.style.fontSize = rem + "px";
}
安装cssrem插件
CSSREM 插件是一个用于将 CSS 中的 px 单位转换为 rem 单位的工具，它可以帮助开发者在编写样式时更方便地使用 rem 单位进行布局和尺寸定义。
将cssrem 插件的基准值设置为 80px
header 布局
- 高度为100px
- 背景图，在容器内显示
- 缩放比例为 100%
- h1 标题部分 白色 38像素 居中显示 行高为 80像素
- 时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素
CSS文件
header{
/* 将元素相对于其在正常文档流中的位置进行定位 */
position: relative;
height: 1.25rem;
// 设置背景图
background-image: url(../images/head_bg.png);
/* 设置背景图片不重复 */
background-repeat: no-repeat;
/* 将头部背景图片按比例缩放到元素的大小 */
background-size: 100% 100%;
// 设置标题样式
h1{
/* 设置标题字体大小为 0.475rem */
font-size: .475rem;
/* 设置标题文字颜色为白色 */
color: #fff;
/* 设置标题文字居中对齐 */
text-align: center;
/* 设置标题行高为 1rem */
line-height: 1rem;
}
// 时间模块展示
.showtime{
/* 设置元素的定位方式为绝对定位，相对于其最近的具有定位属性的父元素进行定位 */
position: absolute;
/* 将元素与其包含块的右侧边缘保持 0.375rem 的距离 */
right: .375rem;
/* 将元素与其包含块的顶部边缘对齐 */
top: 0rem;
/* 设置行高为 0.9375rem，用于控制文本行之间的间距 */
line-height: .9375rem;
/* 设置文字颜色为白色并带有 70% 的不透明度 */
color: rgba(255, 255, 255, 0.7);
/* 设置字体大小为 0.25rem */
font-size: .25rem;
}
}
时间模块 javascript 代码
<script>
// 声明一个变量 t，并初始化为 null
var t = null;
// 开始运行 time 函数，延迟 1000 毫秒（即 1 秒）
t = setTimeout(time, 1000);
function time() {
// 清除之前设定的定时器
clearTimeout(t);
// 创建一个 Date 对象，表示当前时间
dt = new Date();
// 获取当前的年份
var y = dt.getFullYear();
// 获取当前的月份（注意：月份从 0 开始，所以需要加 1）
var mt = dt.getMonth() + 1;
// 获取当前的日期
var day = dt.getDate();
// 获取当前的小时
var h = dt.getHours();
// 获取当前的分钟
var m = dt.getMinutes();
// 获取当前的秒数
var s = dt.getSeconds();
// 使用 querySelector 方法选择 class 名为 showtime 的元素，并将其内容设置为当前时间的字符串形式
document.querySelector(".showtime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
// 重新设定定时器，使 time 函数每隔 1000 毫秒（即 1 秒）执行一次
t = setTimeout(time, 1000);
}
</script>
HTML文件
<!-- 头部盒子 -->
<header>
<!-- 标题 -->
<h1>数据可视化展示-Echarts</h1>
<!-- 时间模块展示 -->
<div class="showtime"></div>
</header>
页面主体模块
mainbox 主体模块
- 需要一个上左右的10px 的内边距
- column 列容器，分三列，占比 3：5：3
css样式
// 页面主体模块
.mainbox {
/* 将元素设置为弹性容器，内部子元素将根据弹性布局进行排列 */
display: flex;
// 最大/小高度，用px直接定死，rem是为了适配缩放
/* 设置最小/最大宽度，确保在窗口缩小时页面不会过于压缩/拉伸 */
min-width: 1024px;
max-width: 1920px;
/* 设置左右外边距为 auto，将元素水平居中 */
margin: 0 auto;
/* 设置上内边距为 0.125rem，左右内边距为 0.125rem，下内边距为 0，为内容留出一定的空白 */
padding: 0.125rem 0.125rem 0;
/* 列元素 */
.column {
/* 设置弹性子项划分为3份，决定了元素在弹性容器中占用的空间大小 */
flex: 3;
}
/* 第二个列元素 */
.column:nth-child(2) {
/* 设置第二个列元素的弹性比例为 5，使其在弹性容器中占用更大的空间 */
flex: 5;
}
}
HTML文件
<!-- 页面主体模块 -->
<!-- 使用 <section> 元素，定义一个主要内容区块。
<section> 元素通常用于标记文档中的一个独立部分或区块，而类名则可以用于为该区块提供样式或标识符。 -->
<section class="mainbox">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</section>
公共面板模块 panel
- 高度为 310px
- 1像素的 1px solid rgba(25, 186, 139, 0.17) 边框
- 有line.jpg 背景图片
- padding为 上为 0 左右 15px 下为 40px
- 下外边距是 15px
- 利用panel 盒子 before 和after 制作上面两个角 大小为 10px 线条为 2px solid #02a6b5
- 新加一个盒子before 和after 制作下侧两个角 宽度高度为 10px
// 公共模块
.panel {
/* 设置定位为相对定位，相对于其正常位置进行定位 */
position: relative;
/* 设置高度为 3.875rem */
height: 3.875rem;
/* 设置边框样式为 1px 实线，颜色为 rgba(25, 186, 139, 0.17) */
border: 1px solid rgba(25, 186, 139, 0.17);
/* 设置内边距，上下为 0，左右为 0.1875rem，下为 0.5rem */
padding: 0 0.1875rem 0.5rem;
/* 设置下外边距为 0.1875rem，用于与下一个 panel 元素之间的间距 */
margin-bottom: .1875rem;
/* 设置背景图片为指定路径的图像 */
background-image: url(../images/line1.png);
/* panel 伪元素 before 双冒号(::)用于表示伪元素，*/
&::before {
/* 设置定位为绝对定位 */
position: absolute;
top: 0;
left: 0;
/* 在伪元素中插入内容 */
content: "";
width: 10px; /* 设置宽度为 10px */
height: 10px; /* 设置高度为 10px */
border-top: 2px solid #02a6b5; /* 设置顶部边框为 2px 实线，颜色为 #02a6b5 */
border-left: 2px solid #02a6b5; /* 设置左侧边框为 2px 实线，颜色为 #02a6b5 */
}
/* panel 伪元素 after */
&::after {
position: absolute;
top: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
/* panel-footer 类样式 */
.panel-footer {
position: absolute; /* 设置定位为绝对定位 */
left: 0; /* 距离左侧位置为 0 */
bottom: 0; /* 距离底部位置为 0 */
width: 100%; /* 设置宽度为 100% */
/* panel-footer 伪元素 before */
&::before {
position: absolute; /* 设置定位为绝对定位 */
bottom: 0; /* 距离底部位置为 0 */
left: 0; /* 距离左侧位置为 0 */
content: ""; /* 在伪元素中插入内容 */
width: 10px; /* 设置宽度为 10px */
height: 10px; /* 设置高度为 10px */
border-bottom: 2px solid #02a6b5; /* 设置底部边框为 2px 实线，颜色为 #02a6b5 */
border-left: 2px solid #02a6b5; /* 设置左侧边框为 2px 实线，颜色为 #02a6b5 */
}
/* panel-footer 伪元素 after */
&::after {
position: absolute; /* 设置定位为绝对定位 */
bottom: 0; /* 距离底部位置为 0 */
right: 0; /* 距离右侧位置为 0 */
content: ""; /* 在伪元素中插入内容 */
width: 10px; /* 设置宽度为 10px */
height: 10px; /* 设置高度为 10px */
border-bottom: 2px solid #02a6b5; /* 设置底部边框为 2px 实线，颜色为 #02a6b5 */
border-right: 2px solid #02a6b5; /* 设置右侧边框为 2px 实线，颜色为 #02a6b5 */
}
}
}
柱形图 bar 模块(布局)
- 标题模块 h2 高度为 48px 文字颜色为白色 文字大小为 20px
- 图标内容模块 chart 高度 240px
- 以上可以作为panel公共样式部分
HTML
<!-- 左边盒子 -->
<div class="column">
<!-- 1号图 -->
<div class="panel bar">
<h2>柱形图-就业行业</h2>
<div class="chart">图标</div>
<!-- 小边角 -->
<div class="panel-footer"></div>
</div>
<!-- 2号图 -->
<div class="panel bar">
<h2>柱形图-就业行业</h2>
<div class="chart">图标</div>
<!-- 小边角 -->
<div class="panel-footer"></div>
</div>
<!-- 3号图 -->
<div class="panel bar">
<h2>柱形图-就业行业</h2>
<div class="chart">图标</div>
<!-- 小边角 -->
<div class="panel-footer"></div>
</div>
</div>
CSS文件
h2 {
height: 0.6rem;
line-height: 0.6rem;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 400;
}
.chart {
height: 3rem;
background-color: pink;
}
中间布局
- 上面是no 数字模块
- 下面是map 地图模块
- 数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1); 有个15像素的内边距
- 注意中间列 column 有个 左右 10px 下 15px 的外边距
- no 模块里面上下划分 上面是数字（no-hd) 下面 是 相关文字说明(no-bd)
- no-hd 数字模块 有一个边框 1px solid rgba(25, 186, 139, 0.17)
- no-hd 数字模块 里面分为两个小li 每个小li高度为 80px 文字大小为 70px 颜色为 #ffeb7b 字体是图标字体 lectronicFont
- no-hd 利用 after 和 before制作2个小角， 边框 2px solid #02a6b5 宽度为 30px 高度为 10px
- 小竖线 给 第一个小li after 就可以 1px宽 背景颜色为 rgba(255, 255, 255, 0.2); 高度 50% top 25% 即可
- no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba(255, 255, 255, 0.7) 文字大小为 18px 上内边距为 10px
HTML
<!-- 中间盒子 -->
<div class="column">
<!-- no模块 -->
<div class="no">
<!-- 数据 -->
<div class="no-hd">
<ul>
<li>123</li>
<li>456</li>
</ul>
</div>
<!-- 文字 -->
<div class="no-bd">
<ul>
<li>需求人数</li>
<li>市场供应人数</li>
</ul>
</div>
</div>
<!-- 地图模块 -->
<div class="map">
<div class="chart"></div>
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
</div>
</div>
CSS
.no {
background: rgba(101, 132, 226, 0.1);
padding: 0.1875rem;
.no-hd {
position: relative;
border: 1px solid rgba(25, 186, 139, 0.17);
&::before {
content: "";
position: absolute;
width: 30px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
top: 0;
left: 0;
}
&::after {
content: "";
position: absolute;
width: 30px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
right: 0;
bottom: 0;
}
ul {
display: flex;
li {
position: relative;
flex: 1;
text-align: center;
height: 1rem;
line-height: 1rem;
font-size: 0.875rem;
color: #ffeb7b;
padding: 0.05rem 0;
font-family: electronicFont;
font-weight: bold;
&::after {
content: "";
position: absolute;
height: 50%;
width: 1px;
background: rgba(255, 255, 255, 0.2);
right: 0;
top: 25%;
}
}
}
}
.no-bd ul {
display: flex;
li {
flex: 1;
height: 0.5rem;
line-height: 0.5rem;
text-align: center;
font-size: 0.225rem;
color: rgba(255, 255, 255, 0.7);
padding-top: 0.125rem;
}
}
}
地图模块
- 地图模块高度为 810px 里面包含4个盒子 chart 放图表模块 球体盒子 旋转1 旋转2
- 球体图片模块 map1 大小为 518px 要加背景图片 因为要缩放100% 定位到最中央 透明度
- 旋转1 map 2 大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 .6 做旋转动画 利用z-index压住球体
- 旋转2 map3 大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针
CSS
.map {
position: relative;
height: 10.125rem;
.chart {
position: absolute;
top: 0;
left: 0;
z-index: 5;
height: 10.125rem;
width: 100%;
}
.map1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6.475rem;
height: 6.475rem;
background: url(../images/map.png) no-repeat;
background-size: 100% 100%;
opacity: 0.3;
}
.map2 {
position: absolute;
top: 50%;
left: 50%;
width: 8.0375rem;
height: 8.0375rem;
background-image: url(../images/lbx.png);
background-size: 100% 100%;
animation: rotate 15s linear infinite;
z-index: 2;
opacity: 0.6;
}
.map3 {
position: absolute;
top: 50%;
left: 50%;
width: 7.075rem;
height: 7.075rem;
transform: translate(-50%, -50%);
background-image: url(../images/jt.png);
animation: rotate1 10s linear infinite;
background-size: 100% 100%;
opacity: 0.6;
}
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes rotate1 {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
}
Echarts
ECharts 是 百度出品的一个开源 Javascript 数据可视化库 ，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
官网地址：https://echarts.apache.org/zh/index.html
Echarts-体验
使用步骤：
步骤1：下载并引入echarts.js文件--------------->图表依赖这个js库
步骤2：准备一个具备大小的DOM容器--------->生成的图表会放入这个容器内
步骤3：初始化echarts:实例对象------------------>实例化echarts对象
步骤4：指定配置项和数据(option)--------------->根据具体需求修改配置选项
步骤5：将配置项设置给echarts实例对象------>让echarts对象根据修改好的配置生效
0、下载echarts :https://www.jsdelivr.com/package/npm/echarts
1、引入echarts.js文件
<script src="存放目录/echarts.min.js"></script>
2、准备一个具备大小的DOM容器
<div class="box"></div>
<style>
.box{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
3、初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
4、指定配置项和数据(option)
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
5、将配置项设置给echarts实例对象
// 将配置项设置给echarts实例对象
myChart.setOption(option)
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
</body>
<script>
// 初始化实例对象 echarts.init(dom容器)
var myChart = 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]
}
]
};
// 将配置项设置给echarts实例对象
myChart.setOption(option)
</script>
</html>
其他图例源：https://www.ppchart.com/#/
Echarts-基础配置
要求知道以下配置每个模块的主要作用，其他配置可以查询 官网配置手册
| 配置项 | 作用 |
|---|---|
| series | 系列列表。每个系列通过 type 决定自己的图表类型，可以多个图表重叠 |
| xAxis | 直角坐标系 grid 中的 x 轴 |
| boundaryGap | 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。 |
| yAxis | 直角坐标系 grid 中的 y 轴 |
| grid | 直角坐标系内绘图网格。 |
| title | 标题组件 |
| tooltip | 提示框组件 |
| legend | 图例组件 |
| color | 调色盘颜色列表 |
以官网 折线图堆叠 图为例
option = {
// color设置我们线条的颜色 注意后面是个数组
color: ['pink', 'red', 'green', 'skyblue'],
// 设置图标标题
title: {
text: 'Stacked Line'
},
// 图标提示框组件：鼠标放在图表上显示出的提示信息
tooltip: {
trigger: 'axis' // 触发方式：坐标轴
},
// 图例组件
legend: {
// series里面有了name值则legend里面的data可以删掉
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
// 直角坐标系内绘图网格
grid: {
left: '3%',/* 设置网格距离容器左侧的距离为容器宽度的 3% */
right: '4%',/* 设置网格距离容器右侧的距离为容器宽度的 4% */
bottom: '3%',/* 设置网格距禒容器底部的距离为容器高度的 3% */
containLabel: true/* 如果设置为 true，则 grid 区域将包含坐标轴的刻度标签，显示刻度标签。
这样可以确保在绘制图表时不会因为标签内容过长导致被裁剪。 */
},
// 工具组件，可以实现另存为图片等功能
toolbox: {
feature: {
saveAsImage: {}
}
},
// 直角坐标系 grid 中的 x 轴
xAxis: {
type: 'category',/* 指定 x 轴的类型为类目轴，表示该轴上的数据为离散的类别数据 */
boundaryGap: false,/* 设置是否在类目轴两边留白。如果设置为 false，则数据点会在坐标轴上的刻度线上 */
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']/* 设置 x 轴上的类目数据 */
},
// 直角坐标系 grid 中的 y 轴
yAxis: {
type: 'value'
},
// 系列列表,通过 type 决定图表类型
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
图表
步骤：
- 官网找到类似实例， 适当分析，并且引入到HTML页面中
- 根据需求定制图表
柱状图1定制
官网找到类似实例， 适当分析，并且引入到HTML页面中(省略)
柱形颜色、提示组件显示、图表大小的设置
- 修改图表柱形颜色 #2f89cf
- 修改图表大小 top 为 10px bottom 为 4% grid决定我们的柱状图的大小
// 设置柱状图的颜色为 #2f89cf
color: ["#2f89cf"],
// 设置提示框组件，用于显示鼠标悬停在某个数据项上时的提示信息
tooltip: {
trigger: "axis", // 触发方式为坐标轴触发
axisPointer: {
type: "shadow" // 坐标轴指示器类型为阴影
}
},
// 修改图表的大小和位置，包括图表距离容器边缘的距离、是否包含坐标轴刻度标签等设置
grid: {
left: "0%", // 图表左边距离容器左侧的距离
top: "10px", // 图表上边距离容器顶部的距离
right: "0%", // 图表右边距离容器右侧的距离
bottom: "4%", // 图表下边距离容器底部的距离
containLabel: true // 是否包含坐标轴刻度标签，true 表示包含
}
X轴相关设置 xAxis
X轴相关设置 xAxis
- 文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px
- X轴线的样式 不显示
// x 轴设置
xAxis: [
{
type: "category", // 类型为分类（离散型）
// x 轴数据
data: [
"旅游行业",
"教育培训",
"游戏行业",
"医疗行业",
"电商行业",
"社交行业",
"金融行业"
],
axisTick: {
alignWithLabel: true // 刻度线和标签对齐
},
// 修改刻度标签样式
axisLabel: {
color: "rgba(255,255,255,.6) ", // 字体颜色为白色，透明度为 60%
fontSize: "12" // 字体大小为 12
},
// 不显示 x 坐标轴线条样式
axisLine: {
show: false // 不显示坐标轴线条
}
}
],
y轴相关设置 yAxis
Y 轴相关定制
- 文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px
- Y 轴线条样式 更改为 1像素的 rgba(255,255,255,.1) 边框
- 分隔线的颜色修饰为 1像素的 rgba(255,255,255,.1)
// y 轴设置
yAxis: [
{
type: "value", // 类型为数值轴
// 修改刻度标签样式
axisLabel: {
color: "rgba(255,255,255,.6)", // 字体颜色为白色，透明度为 60%
fontSize: 12 // 字体大小为 12
},
// 修改 y 轴线条样式
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)", // 线条颜色为白色，透明度为 10%
width: 2 // 线条宽度为 2 像素
}
},
// 修改 y 轴分割线样式
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)" // 分割线颜色为白色，透明度为 10%
}
}
}
],
修改柱形为圆角、柱子宽度 在series 里面设置
// 数据系列设置
series: [
{
name: "直接访问", // 系列名称
type: "bar", // 类型为柱状图
barWidth: "35%", // 柱子宽度为总宽度的 35%
data: [200, 300, 300, 900, 1500, 1200, 600], // 数据数组
itemStyle: {
// 修改柱子圆角
barBorderRadius: 5 // 柱子圆角大小为 5 像素
}
}
]
让图表跟随屏幕自适应
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
myChart.resize();
});
完整代码
// 柱状图模块1
(function () {
// 1实例化对象
var myChart = echarts.init(document.querySelector(".bar .chart"));
// 2. 指定配置项和数据
var option = {
// 设置柱状图的颜色为 #2f89cf
color: ["#2f89cf"],
// 设置提示框组件，用于显示鼠标悬停在某个数据项上时的提示信息
tooltip: {
trigger: "axis", // 触发方式为坐标轴触发
axisPointer: {
type: "shadow" // 坐标轴指示器类型为阴影
}
},
// 修改图表的大小和位置，包括图表距离容器边缘的距离、是否包含坐标轴刻度标签等设置
grid: {
left: "0%", // 图表左边距离容器左侧的距离
top: "10px", // 图表上边距离容器顶部的距离
right: "0%", // 图表右边距离容器右侧的距离
bottom: "4%", // 图表下边距离容器底部的距离
containLabel: true // 是否包含坐标轴刻度标签，true 表示包含
},
// x 轴设置
xAxis: [
{
type: "category", // 类型为分类（离散型）
// x 轴数据
data: [
"旅游行业",
"教育培训",
"游戏行业",
"医疗行业",
"电商行业",
"社交行业",
"金融行业"
],
axisTick: {
alignWithLabel: true // 刻度线和标签对齐
},
// 修改刻度标签样式
axisLabel: {
color: "rgba(255,255,255,.6) ", // 字体颜色为白色，透明度为 60%
fontSize: "12" // 字体大小为 12
},
// 不显示 x 坐标轴线条样式
axisLine: {
show: false // 不显示坐标轴线条
}
}
],
// y 轴设置
yAxis: [
{
type: "value", // 类型为数值轴
// 修改刻度标签样式
axisLabel: {
color: "rgba(255,255,255,.6)", // 字体颜色为白色，透明度为 60%
fontSize: 12 // 字体大小为 12
},
// 修改 y 轴线条样式
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)", // 线条颜色为白色，透明度为 10%
width: 2 // 线条宽度为 2 像素
}
},
// 修改 y 轴分割线样式
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)" // 分割线颜色为白色，透明度为 10%
}
}
}
],
// 数据系列设置
series: [
{
name: "直接访问", // 系列名称
type: "bar", // 类型为柱状图
barWidth: "35%", // 柱子宽度为总宽度的 35%
data: [200, 300, 300, 900, 1500, 1200, 600], // 数据数组
itemStyle: {
// 修改柱子圆角
barBorderRadius: 5 // 柱子圆角大小为 5 像素
}
}
]
};
// 3. 把配置项给实例对象
myChart.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
myChart.resize();
});
})();
柱状图2定制
官网找到类似实例， 适当分析，并且引入到HTML页面中(省略)
修改图形大小 grid
// 网格设置
grid: {
top: "10%", // 上边距为总高度的 10%
left: "22%", // 左边距为总宽度的 22%
bottom: "10%" ,// 下边距为总高度的 10%
// containLabel: true // 是否包含坐标轴刻度标签，默认为 false
},
X轴相关设置 xAxis
不显示x轴
// 不显示x轴的相关信息
xAxis: {
show: false
},
y轴相关设置 yAxis
不显示y轴线和相关刻度
y轴文字的颜色设置为白色
给y轴添加第二组数据
修改第一组柱子相关样式（条状）
设置第一组柱子内百分比显示数据
设置第一组柱子不同颜色
修改第二组柱子的相关配置（框状）
// y 轴设置
yAxis: [
{
type: "category", // 类型为类目轴
inverse: true, // 反向显示
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"], // 类目数据
// 不显示 y 轴线
axisLine: {
show: false // 不显示轴线
},
// 不显示刻度
axisTick: {
show: false // 不显示刻度
},
// 设置刻度标签文字颜色为白色
axisLabel: {
color: "#fff" // 文字颜色为白色
}
},
// 第二组数据，次坐标
{
data: [702, 350, 610, 793, 664], // 第二组数据
inverse: true, // 反向显示
// 不显示 y 轴线
axisLine: {
show: false // 不显示轴线
},
// 不显示刻度
axisTick: {
show: false // 不显示刻度
},
// 设置刻度标签文字颜色为白色
axisLabel: {
color: "#fff" // 文字颜色为白色
}
}
],
修改第一组柱子相关样式（条状）
name: "条", // 系列名称
type: "bar", // 图表类型
data: [70, 34, 60, 78, 69], // 数据
yAxisIndex: 0, // Y 轴索引，设置为 0 表示在第一个 Y 轴上
itemStyle: { // 柱子样式
barBorderRadius: 20, // 圆角半径
color: function (params) { // 柱子颜色
return myColor[params.dataIndex]; // 根据数据索引号获取颜色
}
},
设置第一组柱子内百分比显示数据
label: { // 显示柱子内的标签
show: true,
position: "inside",
formatter: "{c}%" // 显示数据值，并加上百分号
}
设置第一组柱子不同颜色
// 声明颜色数组
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 2. 给 itemStyle 里面的color 属性设置一个 返回值函数
itemStyle: { // 柱子样式
barBorderRadius: 20, // 圆角半径
color: function (params) { // 柱子颜色
return myColor[params.dataIndex]; // 根据数据索引号获取颜色
}
},
修改第二组柱子的相关配置（框状）
{
name: "框", // 系列名称
type: "bar", // 图表类型
barCategoryGap: 50, // 柱子框与柱子之间的间隔
barWidth: 15, // 柱子框宽度
yAxisIndex: 1, // Y 轴索引，设置为 1 表示在第二个 Y 轴上
data: [100, 100, 100, 100, 100], // 数据，值都为 100，表示柱子框的高度为整个 Y 轴范围
itemStyle: { // 柱子框样式
color: "none", // 不填充颜色
borderColor: "#00c1de", // 边框颜色
borderWidth: 3, // 边框宽度
barBorderRadius: 15 // 圆角半径
}
}
完整代码
(function () {
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".bar2 .chart"));
// 2. 指定配置和数据
var option = {
// 网格设置
grid: {
top: "10%", // 上边距为总高度的 10%
left: "22%", // 左边距为总宽度的 22%
bottom: "10%",// 下边距为总高度的 10%
// containLabel: true // 是否包含坐标轴刻度标签，默认为 false
},
// 不显示x轴的相关信息
xAxis: {
show: false
},
// y 轴设置
yAxis: [
{
type: "category", // 类型为类目轴
inverse: true, // 反向显示
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"], // 类目数据
// 不显示 y 轴线
axisLine: {
show: false // 不显示轴线
},
// 不显示刻度
axisTick: {
show: false // 不显示刻度
},
// 设置刻度标签文字颜色为白色
axisLabel: {
color: "#fff" // 文字颜色为白色
}
},
// 第二组数据，次坐标
{
data: [702, 350, 610, 793, 664], // 第二组数据
inverse: true, // 反向显示
// 不显示 y 轴线
axisLine: {
show: false // 不显示轴线
},
// 不显示刻度
axisTick: {
show: false // 不显示刻度
},
// 设置刻度标签文字颜色为白色
axisLabel: {
color: "#fff" // 文字颜色为白色
}
}
],
series: [
{
name: "条", // 系列名称
type: "bar", // 图表类型
data: [70, 34, 60, 78, 69], // 数据
yAxisIndex: 0, // Y 轴索引，设置为 0 表示在第一个 Y 轴上
itemStyle: { // 柱子样式
barBorderRadius: 20, // 圆角半径
color: function (params) { // 柱子颜色
return myColor[params.dataIndex]; // 根据数据索引号获取颜色
}
},
barCategoryGap: 50, // 柱子之间的间隔
barWidth: 10, // 柱子宽度
label: { // 显示柱子内的标签
show: true,
position: "inside",
formatter: "{c}%" // 显示数据值，并加上百分号
}
},
{
name: "框", // 系列名称
type: "bar", // 图表类型
barCategoryGap: 50, // 柱子框与柱子之间的间隔
barWidth: 15, // 柱子框宽度
yAxisIndex: 1, // Y 轴索引，设置为 1 表示在第二个 Y 轴上
data: [100, 100, 100, 100, 100], // 数据，值都为 100，表示柱子框的高度为整个 Y 轴范围
itemStyle: { // 柱子框样式
color: "none", // 不填充颜色
borderColor: "#00c1de", // 边框颜色
borderWidth: 3, // 边框宽度
barBorderRadius: 15 // 圆角半径
}
}
]
};
// 3. 把配置给实例对象
myChart.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
myChart.resize();
});
})();
折线图1 人员变化模块制作
官网找到类似实例， 适当分析，并且引入到HTML页面中(省略)
图形大小、边框设置、刻度标签设置
grid: {
top: "20%", // 距离容器顶部的距离
left: "3%", // 距离容器左侧的距离
right: "4%", // 距离容器右侧的距离
bottom: "3%", // 距离容器底部的距离
show: true, // 显示边框
borderColor: "#012f4a", // 边框颜色
containLabel: true // 包含刻度文字在内
},
修改图例组件
修改图例组件中的文字颜色 #4c9bfd， 距离右侧 right 为 10%
legend: {
// 如果 series 对象有 name 值，则 legend 可以不用写 data
// 修改图例组件文字颜色
textStyle: {
color: "#4c9bfd"
},
// 这个 10% 必须加引号
right: "10%"
},
x轴相关设置 xAxis
- 刻度去除
- x轴刻度标签字体颜色：#4c9bfd
- 剔除x坐标轴线颜色（将来使用Y轴分割线)
- 轴两端是不需要内间距 boundaryGap
xAxis: {
type: "category", // 类目轴，适用于离散的类目数据
boundaryGap: false, // 坐标轴两端是否留白，设置为 false，则数据点在两个刻度之间
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
], // x 轴显示的类目数据
axisTick: {
show: false // 是否显示坐标轴刻度线
},
axisLabel: {
color: "#4c9bfd" // 坐标轴刻度标签的文字颜色
},
axisLine: {
show: false // 是否显示坐标轴轴线
}
}
y轴相关设置 yAxis
- 刻度去除
- 字体颜色：#4c9bfd
- 分割线颜色：#012f4a
yAxis: {
type: "value",
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: "#4c9bfd" // 文本颜色
},
axisLine: {
show: false // 去除轴线
},
splitLine: {
lineStyle: {
color: "#012f4a" // 分割线颜色
}
}
},
两条线形图定制
- 颜色分别：#00f2f1 #ed3f35
- 把折线修饰为圆滑 series 数据中添加 smooth 为 true
color: ['#00f2f1', '#ed3f35'],
series: [
{
name: "新增粉丝",
type: "line",
// true 可以让我们的折线显示带有弧度
smooth: true,
data: yearData[0].data[0] // 初始渲染时使用 yearData 数组中的第一组数据
},
{
name: "新增游客",
type: "line",
smooth: true,
data: yearData[0].data[1] // 初始渲染时使用 yearData 数组中的第二组数据
}
]
点击 2020年 2021年 数据发生变化
- tab栏切换事件
- 点击2020按钮 需要把 series 第一个对象里面的data 换成 2020年对象里面data[0]
- 点击2020按钮 需要把 series 第二个对象里面的data 换成 2020年对象里面data[1]
- 2021 按钮同样道理
数据（ajax请求过来的）从后台获取
var yearData = [
{
year: '2020', // 年份
data: [ // 两个数组是因为有两条线
[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
]
},
{
year: '2021', // 年份
data: [ // 两个数组是因为有两条线
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
]
}
];
// 通过 jQuery 绑定了一个点击事件处理程序，当 "h2" 元素内的 "a" 被点击时执行回调函数。
$(".line h2").on("click", "a", function () {
var obj = yearData[$(this).index()]; // 根据点击的按钮索引号找到对应的数据对象
option.series[0].data = obj.data[0]; // 更新第一条线的数据
option.series[1].data = obj.data[1]; // 更新第二条线的数据
myChart.setOption(option); // 重新渲染图表，从而实现点击切换数据的效果
});
完整代码
// 折线图1模块制作
(function () {
// 定义年份数据
var yearData = [
{
year: "2020", // 年份
data: [
// 两个数组是因为有两条线
[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
]
},
{
year: "2021", // 年份
data: [
// 两个数组是因为有两条线
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
]
}
];
// 1. 实例化对象
// 初始化一个 ECharts 实例，并指定要渲染图表的 DOM 元素
var myChart = echarts.init(document.querySelector(".line .chart"));
// 2. 指定配置
var option = {
// 通过这个 color 修改两条线的颜色
color: ["#00f2f1", "#ed3f35"],
tooltip: {
trigger: "axis"
},
legend: {
// 如果 series 对象有 name 值，则 legend 可以不用写 data
// 修改图例组件文字颜色
textStyle: {
color: "#4c9bfd"
},
// 这个 10% 必须加引号
right: "10%"
},
grid: {
top: "20%", // 距离容器顶部的距离
left: "3%", // 距离容器左侧的距离
right: "4%", // 距离容器右侧的距离
bottom: "3%", // 距离容器底部的距离
show: true, // 显示边框
borderColor: "#012f4a", // 边框颜色
containLabel: true // 包含刻度文字在内
},
xAxis: {
type: "category", // 类目轴，适用于离散的类目数据
boundaryGap: false, // 坐标轴两端是否留白，设置为 false，则数据点在两个刻度之间
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
], // x 轴显示的类目数据
axisTick: {
show: false // 是否显示坐标轴刻度线
},
axisLabel: {
color: "#4c9bfd" // 坐标轴刻度标签的文字颜色
},
axisLine: {
show: false // 是否显示坐标轴轴线
}
},
yAxis: {
type: "value",
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: "#4c9bfd" // 文本颜色
},
axisLine: {
show: false // 去除轴线
},
splitLine: {
lineStyle: {
color: "#012f4a" // 分割线颜色
}
}
},
series: [
{
name: "新增粉丝",
type: "line",
// true 可以让我们的折线显示带有弧度
smooth: true,
data: yearData[0].data[0] // 初始渲染时使用 yearData 数组中的第一组数据
},
{
name: "新增游客",
type: "line",
smooth: true,
data: yearData[0].data[1] // 初始渲染时使用 yearData 数组中的第二组数据
}
]
};
// 3. 把配置给实例对象
myChart.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
myChart.resize();
});
// 5. 点击切换效果
// 通过 jQuery 绑定了一个点击事件处理程序，当 "h2" 元素内的 "a" 被点击时执行回调函数。
$(".line h2").on("click", "a", function () {
var obj = yearData[$(this).index()]; // 根据点击的按钮索引号找到对应的数据对象
option.series[0].data = obj.data[0]; // 更新第一条线的数据
option.series[1].data = obj.data[1]; // 更新第二条线的数据
myChart.setOption(option); // 重新渲染图表，从而实现点击切换数据的效果
});
})();
折线图2 播放量模块制作
官网找到类似实例， 适当分析，并且引入到HTML页面中(省略)
图例设置
更换图例组件文字颜色 rgba(255,255,255,.5) 文字大小为12
legend: {
top: "0%", // 图例组件距离容器上边距的位置，可以是像素值或百分比
data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"], // 图例的数据项名称
textStyle: {
color: "rgba(255,255,255,.5)", // 图例的文字颜色，这里设置为白色带有透明度
fontSize: "12" // 图例的文字大小，这里设置为 12px
}
}
修改图表大小
grid: {
left: "10", // 绘图区域左侧的留白空间，可以是像素值或百分比
top: "30", // 绘图区域顶部的留白空间，可以是像素值或百分比
right: "10", // 绘图区域右侧的留白空间，可以是像素值或百分比
bottom: "10", // 绘图区域底部的留白空间，可以是像素值或百分比
containLabel: true // 是否包含坐标轴标签文字在内，如果为 true，则会将标签文字计算在内而不超出绘图区域
}
X轴相关设置 xAxis
- 修改文本颜色为rgba(255,255,255,.6) 文字大小为 12
- x轴线的颜色为 rgba(255,255,255,.2)
xAxis: [
{
type: "category", // 类型为类目型，表示 x 轴上的数据项为离散的类目名称
boundaryGap: false, // 是否在两端显示坐标轴留白，这里设置为 false 表示不留白
// x轴更换数据
data: [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"26",
"28",
"29",
"30"
],
// 文本颜色为rgba(255,255,255,.6) 文字大小为 12
axisLabel: { // 坐标轴刻度标签的相关样式配置
textStyle: {
color: "rgba(255,255,255,.6)", // 刻度标签文字颜色，这里设置为带有一定透明度的白色
fontSize: 12 // 刻度标签文字大小，这里设置为 12px
}
},
// x轴线的颜色为 rgba(255,255,255,.2)
axisLine: { // 坐标轴线的相关样式配置
lineStyle: {
color: "rgba(255,255,255,.2)" // 坐标轴线的颜色，这里设置为带有一定透明度的白色
}
}
}
],
y轴相关设置 yAxis
yAxis: [
{
type: "value", // 类型为数值型，表示 y 轴上的数据为数值型数据
axisTick: { show: false }, // 隐藏刻度线
axisLine: { // 坐标轴线的相关样式配置
lineStyle: {
color: "rgba(255,255,255,.1)" // 坐标轴线的颜色，这里设置为带有一定透明度的白色
}
},
axisLabel: { // 坐标轴刻度标签的相关样式配置
textStyle: {
color: "rgba(255,255,255,.6)", // 刻度标签文字颜色，这里设置为带有一定透明度的白色
fontSize: 12 // 刻度标签文字大小，这里设置为 12px
}
},
splitLine: { // 分隔线的相关样式配置
lineStyle: {
color: "rgba(255,255,255,.1)" // 分隔线的颜色，这里设置为带有一定透明度的白色
}
}
}
]
修改两个线模块配置(在series 里面定制)
// 配置折线系列
series: [
{
name: "邮件营销",
type: "line",
smooth: true, // 平滑连接数据点
lineStyle: {
color: "#0184d5", // 线条颜色为蓝色
width: 2, // 线条宽度为2px
},
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ offset: 0, color: "rgba(1, 132, 213, 0.4)" }, // 渐变色的起始颜色
{ offset: 0.8, color: "rgba(1, 132, 213, 0.1)" }, // 渐变线的结束颜色
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
},
symbol: "circle", // 数据点形状为圆形
symbolSize: 8, // 数据点大小为8px
showSymbol: false, // 开始不显示数据点，鼠标经过时显示
itemStyle: {
color: "#0184d5", // 数据点颜色为蓝色
borderColor: "rgba(221, 220, 107, .1)", // 数据点边框颜色
borderWidth: 12, // 数据点边框宽度
},
data: [/* 数据点 */],
},
{
name: "联盟广告",
type: "line",
smooth: true,
lineStyle: {
normal: {
color: "#00d887", // 线条颜色为绿色
width: 2, // 线条宽度为2px
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ offset: 0, color: "rgba(0, 216, 135, 0.4)" },
{ offset: 0.8, color: "rgba(0, 216, 135, 0.1)" },
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
},
},
symbol: "circle",
symbolSize: 5,
itemStyle: {
color: "#00d887",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12,
},
showSymbol: false,
data: [/* 数据点 */],
},
],
完整代码
// 折线图2 模块制作
(function () {
var myChart = echarts.init(document.querySelector(".line2 .chart"));
var option = {
tooltip: {
trigger: "axis"
},
legend: {
top: "0%", // 图例组件距离容器上边距的位置，可以是像素值或百分比
data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"], // 图例的数据项名称
textStyle: {
color: "rgba(255,255,255,.5)", // 图例的文字颜色，这里设置为白色带有透明度
fontSize: "12" // 图例的文字大小，这里设置为 12px
}
},
grid: {
left: "10", // 绘图区域左侧的留白空间，可以是像素值或百分比
top: "30", // 绘图区域顶部的留白空间，可以是像素值或百分比
right: "10", // 绘图区域右侧的留白空间，可以是像素值或百分比
bottom: "10", // 绘图区域底部的留白空间，可以是像素值或百分比
containLabel: true // 是否包含坐标轴标签文字在内，如果为 true，则会将标签文字计算在内而不超出绘图区域
},
xAxis: [
{
type: "category", // 类型为类目型，表示 x 轴上的数据项为离散的类目名称
boundaryGap: false, // 是否在两端显示坐标轴留白，这里设置为 false 表示不留白
// x轴更换数据
data: [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"26",
"28",
"29",
"30"
],
// 文本颜色为rgba(255,255,255,.6) 文字大小为 12
axisLabel: { // 坐标轴刻度标签的相关样式配置
textStyle: {
color: "rgba(255,255,255,.6)", // 刻度标签文字颜色，这里设置为带有一定透明度的白色
fontSize: 12 // 刻度标签文字大小，这里设置为 12px
}
},
// x轴线的颜色为 rgba(255,255,255,.2)
axisLine: { // 坐标轴线的相关样式配置
lineStyle: {
color: "rgba(255,255,255,.2)" // 坐标轴线的颜色，这里设置为带有一定透明度的白色
}
}
}
],
yAxis: [
{
type: "value", // 类型为数值型，表示 y 轴上的数据为数值型数据
axisTick: { show: false }, // 隐藏刻度线
axisLine: { // 坐标轴线的相关样式配置
lineStyle: {
color: "rgba(255,255,255,.1)" // 坐标轴线的颜色，这里设置为带有一定透明度的白色
}
},
axisLabel: { // 坐标轴刻度标签的相关样式配置
textStyle: {
color: "rgba(255,255,255,.6)", // 刻度标签文字颜色，这里设置为带有一定透明度的白色
fontSize: 12 // 刻度标签文字大小，这里设置为 12px
}
},
splitLine: { // 分隔线的相关样式配置
lineStyle: {
color: "rgba(255,255,255,.1)" // 分隔线的颜色，这里设置为带有一定透明度的白色
}
}
}
],
// 配置折线系列
series: [
{
name: "邮件营销",
type: "line",
smooth: true, // 平滑连接数据点
lineStyle: {
color: "#0184d5", // 线条颜色为蓝色
width: 2, // 线条宽度为2px
},
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ offset: 0, color: "rgba(1, 132, 213, 0.4)" }, // 渐变色的起始颜色
{ offset: 0.8, color: "rgba(1, 132, 213, 0.1)" }, // 渐变线的结束颜色
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
},
symbol: "circle", // 数据点形状为圆形
symbolSize: 8, // 数据点大小为8px
showSymbol: false, // 开始不显示数据点，鼠标经过时显示
itemStyle: {
color: "#0184d5", // 数据点颜色为蓝色
borderColor: "rgba(221, 220, 107, .1)", // 数据点边框颜色
borderWidth: 12, // 数据点边框宽度
},
data: [/* 数据点 */],
},
{
name: "联盟广告",
type: "line",
smooth: true,
lineStyle: {
normal: {
color: "#00d887", // 线条颜色为绿色
width: 2, // 线条宽度为2px
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ offset: 0, color: "rgba(0, 216, 135, 0.4)" },
{ offset: 0.8, color: "rgba(0, 216, 135, 0.1)" },
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
},
},
symbol: "circle",
symbolSize: 5,
itemStyle: {
color: "#00d887",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12,
},
showSymbol: false,
data: [/* 数据点 */],
},
],
};
myChart.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
myChart.resize();
});
})();
饼形图 1年龄分布模块制作
官网找到类似实例， 适当分析，并且引入到HTML页面中(省略)
图例设置
// 配置图例
legend: {
bottom: "0%", // 将图例组件放置在图表底部，并与底部对齐
itemWidth: 10, // 设置图例小图标的宽度为10px
itemHeight: 10, // 设置图例小图标的高度为10px
textStyle: {
color: "rgba(255, 255, 255, 0.5)", // 设置图例文字颜色为带有一定透明度的白色
fontSize: 12, // 设置图例文字大小为12px
},
},
series 设置
- 修改水平居中 垂直居中
- 修改内圆半径和外圆半径为 [“40%”, “60%”]
带有直角坐标系的比如折线图柱状图是 grid修改图形大小，而饼形图是通过 radius 修改大小
series: [
{
name: "年龄分布",
type: "pie",
// 这个radius可以修改饼形图的大小
// radius 第一个值是内圆的半径 第二个值是外圆的半径
radius: ["40%", "60%"], // 饼图的内外圆半径分别为"40%"和"60%"
center: ["50%", "45%"], // 饼图的中心位置位于整个图表的相对坐标(50%, 45%)处
avoidLabelOverlap: false, // 不允许标签重叠
// 图形上的文字
label: {
show: false, // 不显示文字标签
position: "center", // 文字标签的位置在中心
},
// 链接文字和图形的线是否显示
labelLine: {
show: false // 不显示链接文字和图形的线
},
data: [
{ value: 1, name: "0岁以下" },
{ value: 4, name: "20-29岁" },
{ value: 2, name: "30-39岁" },
{ value: 2, name: "40-49岁" },
{ value: 1, name: "50岁以上" }
]
}
]
完整代码
// 饼形图1
(function () {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".pie .chart"));
// 2.指定配置
var option = {
color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
tooltip: { // 提示框组件
trigger: "item", // 触发类型为数据项
formatter: "{a} <br/>{b}: {c} ({d}%)" // 提示框内容格式化字符串
/*formatter: "{a} <br/>{b}: {c} ({d}%)" 是提示框内容的格式化字符串，其中：
{a} 表示系列名称，这里会显示饼图系列的名称。
{b} 表示数据项的名称，这里会显示饼图每个部分的名称。
{c} 表示数据项的数值，这里会显示饼图每个部分的数值。
{d} 表示数据项数值占比的百分比，这里会显示饼图每个部分数值的占比百分比。*/
},
// 配置图例
legend: {
bottom: "0%", // 将图例组件放置在图表底部，并与底部对齐
itemWidth: 10, // 设置图例小图标的宽度为10px
itemHeight: 10, // 设置图例小图标的高度为10px
textStyle: {
color: "rgba(255, 255, 255, 0.5)", // 设置图例文字颜色为带有一定透明度的白色
fontSize: 12, // 设置图例文字大小为12px
},
},
series: [
{
name: "年龄分布",
type: "pie",
// 这个radius可以修改饼形图的大小
// radius 第一个值是内圆的半径 第二个值是外圆的半径
radius: ["40%", "60%"], // 饼图的内外圆半径分别为"40%"和"60%"
center: ["50%", "45%"], // 饼图的中心位置位于整个图表的相对坐标(50%, 45%)处
avoidLabelOverlap: false, // 不允许标签重叠
// 图形上的文字
label: {
show: false, // 不显示文字标签
position: "center", // 文字标签的位置在中心
},
// 链接文字和图形的线是否显示
labelLine: {
show: false // 不显示链接文字和图形的线
},
data: [
{ value: 1, name: "0岁以下" },
{ value: 4, name: "20-29岁" },
{ value: 2, name: "30-39岁" },
{ value: 2, name: "40-49岁" },
{ value: 1, name: "50岁以上" }
]
}
]
};
// 3. 把配置给实例对象
myChart.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
myChart.resize();
});
})();
饼形图2 地区分布模块制作（南丁格尔玫瑰图）
官网找到类似实例， 适当分析，并且引入到HTML页面中(省略)
完整代码
// 饼形图2 地区分布模块
(function () {
var myChart = echarts.init(document.querySelector(".pie2 .chart"));
var option = {
color: [
"#006cff",
"#60cda0",
"#ed8884",
"#ff9f7f",
"#0096ff",
"#9fe6b8",
"#32c5e9",
"#1d9dff"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
bottom: "0%",
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
series: [
{
name: "地区分布",
type: "pie",
radius: ["10%", "70%"],
center: ["50%", "50%"],
roseType: "radius",
// 链接图形和文字的线条
// 文字调整
label: {
fontFamily: 'SimSun', // 或者直接使用 '宋体'
// fontWeight: 'normal', // 设置字体粗细为正常
fontSize: 20
},
labelLine: {
// length 链接图形的线条
length: 6,
// length2 链接文字的线条
length2: 8
},
data: [
{ value: 20, name: "云南" },
{ value: 26, name: "北京" },
{ value: 24, name: "山东" },
{ value: 25, name: "河北" },
{ value: 20, name: "江苏" },
{ value: 25, name: "浙江" },
{ value: 30, name: "四川" },
{ value: 42, name: "湖北" }
]
}
]
};
myChart.setOption(option);
// 监听浏览器缩放，图表对象调用缩放resize函数
window.addEventListener("resize", function () {
myChart.resize();
});
})();
模拟飞行路线模块地图模块
ppChart，在这里可以找到一些基于echart的高度定制好的图表，相当于基于jquery开发的插件，这里是基于echarts开发的第三方的图表。
Echarts-map实现步骤：
- 第一需要下载china.js提供中国地图的js文件
- 第二个因为里面代码比较多，我们新建一个新的js文件 myMap.js 引入
- 使用社区提供的配置即可。
需要修改：
- 去掉标题组件
- 去掉背景颜色
- 修改地图省份背景 #142957 areaColor 里面做修改
- 地图放大通过 zoom 设置为1.2即可
geo: { // 地理坐标系组件
map: 'china', // 地图类型为中国地图
zoom: 1.2, // 缩放级别为1.2倍
label: {
emphasis: {
show: false // 强调状态下不显示标签
}
},
roam: false, // 禁止鼠标漫游和缩放地图
itemStyle: { // 地图区域的样式设置
normal: {
areaColor: '#142957', // 普通状态下的区域填充色
borderColor: '#0692a4' // 普通状态下的边框颜色
},
emphasis: {
areaColor: '#0b1c2d' // 强调状态下的区域填充色
}
}
},
完整代码
// 模拟飞行路线模块地图模块
(function () {
var myChart = echarts.init(document.querySelector(".map .chart"));
var geoCoordMap = {
上海: [121.4648, 31.2891],
东莞: [113.8953, 22.901],
东营: [118.7073, 37.5513],
中山: [113.4229, 22.478],
临汾: [111.4783, 36.1615],
临沂: [118.3118, 35.2936],
丹东: [124.541, 40.4242],
丽水: [119.5642, 28.1854],
乌鲁木齐: [87.9236, 43.5883],
佛山: [112.8955, 23.1097],
保定: [115.0488, 39.0948],
兰州: [103.5901, 36.3043],
包头: [110.3467, 41.4899],
北京: [116.4551, 40.2539],
北海: [109.314, 21.6211],
南京: [118.8062, 31.9208],
南宁: [108.479, 23.1152],
南昌: [116.0046, 28.6633],
南通: [121.1023, 32.1625],
厦门: [118.1689, 24.6478],
台州: [121.1353, 28.6688],
合肥: [117.29, 32.0581],
呼和浩特: [111.4124, 40.4901],
咸阳: [108.4131, 34.8706],
哈尔滨: [127.9688, 45.368],
唐山: [118.4766, 39.6826],
嘉兴: [120.9155, 30.6354],
大同: [113.7854, 39.8035],
大连: [122.2229, 39.4409],
天津: [117.4219, 39.4189],
太原: [112.3352, 37.9413],
威海: [121.9482, 37.1393],
宁波: [121.5967, 29.6466],
宝鸡: [107.1826, 34.3433],
宿迁: [118.5535, 33.7775],
常州: [119.4543, 31.5582],
广州: [113.5107, 23.2196],
廊坊: [116.521, 39.0509],
延安: [109.1052, 36.4252],
张家口: [115.1477, 40.8527],
徐州: [117.5208, 34.3268],
德州: [116.6858, 37.2107],
惠州: [114.6204, 23.1647],
成都: [103.9526, 30.7617],
扬州: [119.4653, 32.8162],
承德: [117.5757, 41.4075],
拉萨: [91.1865, 30.1465],
无锡: [120.3442, 31.5527],
日照: [119.2786, 35.5023],
昆明: [102.9199, 25.4663],
杭州: [119.5313, 29.8773],
枣庄: [117.323, 34.8926],
柳州: [109.3799, 24.9774],
株洲: [113.5327, 27.0319],
武汉: [114.3896, 30.6628],
汕头: [117.1692, 23.3405],
江门: [112.6318, 22.1484],
沈阳: [123.1238, 42.1216],
沧州: [116.8286, 38.2104],
河源: [114.917, 23.9722],
泉州: [118.3228, 25.1147],
泰安: [117.0264, 36.0516],
泰州: [120.0586, 32.5525],
济南: [117.1582, 36.8701],
济宁: [116.8286, 35.3375],
海口: [110.3893, 19.8516],
淄博: [118.0371, 36.6064],
淮安: [118.927, 33.4039],
深圳: [114.5435, 22.5439],
清远: [112.9175, 24.3292],
温州: [120.498, 27.8119],
渭南: [109.7864, 35.0299],
湖州: [119.8608, 30.7782],
湘潭: [112.5439, 27.7075],
滨州: [117.8174, 37.4963],
潍坊: [119.0918, 36.524],
烟台: [120.7397, 37.5128],
玉溪: [101.9312, 23.8898],
珠海: [113.7305, 22.1155],
盐城: [120.2234, 33.5577],
盘锦: [121.9482, 41.0449],
石家庄: [114.4995, 38.1006],
福州: [119.4543, 25.9222],
秦皇岛: [119.2126, 40.0232],
绍兴: [120.564, 29.7565],
聊城: [115.9167, 36.4032],
肇庆: [112.1265, 23.5822],
舟山: [122.2559, 30.2234],
苏州: [120.6519, 31.3989],
莱芜: [117.6526, 36.2714],
菏泽: [115.6201, 35.2057],
营口: [122.4316, 40.4297],
葫芦岛: [120.1575, 40.578],
衡水: [115.8838, 37.7161],
衢州: [118.6853, 28.8666],
西宁: [101.4038, 36.8207],
西安: [109.1162, 34.2004],
贵阳: [106.6992, 26.7682],
连云港: [119.1248, 34.552],
邢台: [114.8071, 37.2821],
邯郸: [114.4775, 36.535],
郑州: [113.4668, 34.6234],
鄂尔多斯: [108.9734, 39.2487],
重庆: [107.7539, 30.1904],
金华: [120.0037, 29.1028],
铜川: [109.0393, 35.1947],
银川: [106.3586, 38.1775],
镇江: [119.4763, 31.9702],
长春: [125.8154, 44.2584],
长沙: [113.0823, 28.2568],
长治: [112.8625, 36.4746],
阳泉: [113.4778, 38.0951],
青岛: [120.4651, 36.3373],
韶关: [113.7964, 24.7028]
};
var XAData = [
[{ name: "西安" }, { name: "拉萨", value: 100 }],
[{ name: "西安" }, { name: "上海", value: 100 }],
[{ name: "西安" }, { name: "广州", value: 100 }],
[{ name: "西安" }, { name: "西宁", value: 100 }],
[{ name: "西安" }, { name: "银川", value: 100 }]
];
var XNData = [
[{ name: "西宁" }, { name: "北京", value: 100 }],
[{ name: "西宁" }, { name: "上海", value: 100 }],
[{ name: "西宁" }, { name: "广州", value: 100 }],
[{ name: "西宁" }, { name: "西安", value: 100 }],
[{ name: "西宁" }, { name: "银川", value: 100 }]
];
var YCData = [
[{ name: "拉萨" }, { name: "潍坊", value: 100 }],
[{ name: "拉萨" }, { name: "哈尔滨", value: 100 }],
[{ name: "银川" }, { name: "上海", value: 100 }],
[{ name: "银川" }, { name: "西安", value: 100 }],
[{ name: "银川" }, { name: "西宁", value: 100 }]
];
var planePath =
"path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
//var planePath = 'arrow';
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
value: dataItem[1].value
});
}
}
return res;
};
var color = ["#a6c84c", "#ffa022", "#46bee9"]; //航线的颜色
var series = [];
[
["西安", XAData],
["西宁", XNData],
["银川", YCData]
].forEach(function (item, i) {
series.push(
{
name: item[0] + " Top3",
type: "lines",
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: "red", //arrow箭头的颜色
symbolSize: 3
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0] + " Top3",
type: "lines",
zlevel: 2,
symbol: ["none", "arrow"],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0] + " Top3",
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
brushType: "stroke"
},
label: {
normal: {
show: true,
position: "right",
formatter: "{b}"
}
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[i]
},
emphasis: {
areaColor: "#2B91B7"
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
}
);
});
var option = {
tooltip: {
trigger: "item",
formatter: function (params, ticket, callback) {
if (params.seriesType == "effectScatter") {
return "线路：" + params.data.name + "" + params.data.value[2];
} else if (params.seriesType == "lines") {
return (
params.data.fromName +
">" +
params.data.toName +
"<br />" +
params.data.value
);
} else {
return params.name;
}
}
},
legend: {
orient: "vertical",
top: "bottom",
left: "right",
data: ["西安 Top3", "西宁 Top3", "银川 Top3"],
textStyle: {
color: "#fff"
},
selectedMode: "multiple"
},
geo: { // 地理坐标系组件
map: 'china', // 地图类型为中国地图
zoom: 1.2, // 缩放级别为1.2倍
label: {
emphasis: {
show: false // 强调状态下不显示标签
}
},
roam: false, // 禁止鼠标漫游和缩放地图
itemStyle: { // 地图区域的样式设置
normal: {
areaColor: '#142957', // 普通状态下的区域填充色
borderColor: '#0692a4' // 普通状态下的边框颜色
},
emphasis: {
areaColor: '#0b1c2d' // 强调状态下的区域填充色
}
}
},
series: series
};
myChart.setOption(option);
// 监听浏览器缩放，图表对象调用缩放resize函数
window.addEventListener("resize", function () {
myChart.resize();
});
})();
约束缩放
/* 约束屏幕尺寸 */
/* 当屏幕宽度不超过 1024px 时应用以下样式 */
@media screen and (max-width: 1024px) {
html {
font-size: 42px !important; /* 将 html 元素的字体大小设置为 42px，并且使用 !important 来确保优先级最高 */
}
}
/* 当屏幕宽度不小于 1920px 时应用以下样式 */
@media screen and (min-width: 1920px) {
html {
font-size: 80px !important; /* 将 html 元素的字体大小设置为 80px，并且使用 !important 来确保优先级最高 */
}
}
完整项目文件
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据可视化</title>
<!-- 引入css文件 -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 头部盒子 -->
<header>
<!-- 标题 -->
<h1>数据可视化展示-Echarts</h1>
<!-- 时间模块展示 -->
<div class="showtime"></div>
</header>
<!-- 页面主体模块 -->
<!-- 使用 <section> 元素，定义一个主要内容区块。
<section> 元素通常用于标记文档中的一个独立部分或区块，而类名则可以用于为该区块提供样式或标识符。 -->
<section class="mainbox">
<!-- 左边盒子 -->
<div class="column">
<!-- 1号图 -->
<div class="panel bar">
<h2>柱形图-就业行业</h2>
<div class="chart"></div>
<!-- 小边角 -->
<div class="panel-footer"></div>
</div>
<!-- 2号图 -->
<div class="panel line">
<h2>折线图-人员变化
<!-- <a> 表示链接，href 属性表示链接的目标地址。在这里由于是占位链接，使用了伪造的 javascript:; 地址，点击后不会跳转。 -->
<a href="jsvascript:;">2022</a>
<a href="jsvascript:;">2023</a>
</h2>
<div class="chart"></div>
<!-- 小边角 -->
<div class="panel-footer"></div>
</div>
<!-- 3号图 -->
<div class="panel pie">
<h2>饼形图-年龄分布</h2>
<div class="chart">图标</div>
<!-- 小边角 -->
<div class="panel-footer"></div>
</div>
</div>
<!-- 中间盒子 -->
<div class="column">
<!-- no模块 -->
<div class="no">
<!-- 数据 -->
<div class="no-hd">
<ul>
<li>123</li>
<li>456</li>
</ul>
</div>
<!-- 文字 -->
<div class="no-bd">
<ul>
<li>需求人数</li>
<li>市场供应人数</li>
</ul>
</div>
</div>
<!-- 地图模块 -->
<div class="map">
<div class="chart"></div>
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
</div>
</div>
<!-- 右边盒子 -->
<div class="column">
<!-- 1号图 -->
<!-- <div> 元素同时具有 "panel" 和 "bar" 两个类名 -->
<div class="panel bar2">
<h2>柱形图-就业行业</h2>
<div class="chart"> </div>
<!-- 小边角 -->
<div class="panel-footer"></div>
</div>
<!-- 2号图 -->
<div class="panel line2">
<h2>柱形图-就业行业</h2>
<div class="chart"></div>
<!-- 小边角 -->
<div class="panel-footer"></div>
</div>
<!-- 3号图 -->
<div class="panel pie2">
<h2>南丁格尔玫瑰图-地区分布</h2>
<div class="chart"></div>
<!-- 小边角 -->
<div class="panel-footer"></div>
</div>
</div>
</section>
<!-- 引入屏幕适配 -->
<script src="js/flexible.js"></script>
<!-- 引入echarts -->
<script src="js/echarts.min.js"></script>
<!-- 引入jquery -->
<script src="js/jquery.js"></script>
<!-- 引入chain.js 中国地图需要 -->
<script src="js/china.js"></script>
<!-- 引入对应的js -->
<script src="js/index.js"></script>
</body>
<script>
// 声明一个变量 t，并初始化为 null
var t = null;
// 开始运行 time 函数，延迟 1000 毫秒（即 1 秒）
t = setTimeout(time, 1000);
function time() {
// 清除之前设定的定时器
clearTimeout(t);
// 创建一个 Date 对象，表示当前时间
dt = new Date();
// 获取当前的年份
var y = dt.getFullYear();
// 获取当前的月份（注意：月份从 0 开始，所以需要加 1）
var mt = dt.getMonth() + 1;
// 获取当前的日期
var day = dt.getDate();
// 获取当前的小时
var h = dt.getHours();
// 获取当前的分钟
var m = dt.getMinutes();
// 获取当前的秒数
var s = dt.getSeconds();
// 使用 querySelector 方法选择 class 名为 showtime 的元素，并将其内容设置为当前时间的字符串形式
document.querySelector(".showtime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
// 重新设定定时器，使 time 函数每隔 1000 毫秒（即 1 秒）执行一次
t = setTimeout(time, 1000);
}
</script>
</html>
less文件
// css初始化
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
// li 初始化
li{
list-style: none;
}
// 声明字体
@font-face {
font-family: electronicFont;
src: url(../font/DS-DIGIT.TTF);
}
body{
// 设置背景图
background-image: url(../images/bg.jpg);
/* 设置背景图片不重复 */
background-repeat: no-repeat;
/* 设置背景图片位置为顶部居中 */
background-position: top center;
/* 设置行高为背景图片高度的1.15倍 */
line-height: 1.15;
}
header{
/* 将元素相对于其在正常文档流中的位置进行定位 */
position: relative;
height: 1.25rem;
// 设置背景图
background-image: url(../images/head_bg.png);
/* 设置背景图片不重复 */
background-repeat: no-repeat;
/* 将头部背景图片按比例缩放到元素的大小 */
background-size: 100% 100%;
// 设置标题样式
h1{
/* 设置标题字体大小为 0.475rem */
font-size: .475rem;
/* 设置标题文字颜色为白色 */
color: #fff;
/* 设置标题文字居中对齐 */
text-align: center;
/* 设置标题行高为 1rem */
line-height: 1rem;
}
// 时间模块展示
.showtime{
/* 设置元素的定位方式为绝对定位，相对于其最近的具有定位属性的父元素进行定位 */
position: absolute;
/* 将元素与其包含块的右侧边缘保持 0.375rem 的距离 */
right: .375rem;
/* 将元素与其包含块的顶部边缘对齐 */
top: 0rem;
/* 设置行高为 0.9375rem，用于控制文本行之间的间距 */
line-height: .9375rem;
/* 设置文字颜色为白色并带有 70% 的不透明度 */
color: rgba(255, 255, 255, 0.7);
/* 设置字体大小为 0.25rem */
font-size: .25rem;
}
}
// 页面主体模块
.mainbox {
/* 将元素设置为弹性容器，内部子元素将根据弹性布局进行排列 */
display: flex;
// 最大/小高度，用px直接定死，rem是为了适配缩放
/* 设置最小/最大宽度，确保在窗口缩小时页面不会过于压缩/拉伸 */
min-width: 1024px;
max-width: 1920px;
/* 设置左右外边距为 auto，将元素水平居中 */
margin: 0 auto;
/* 设置上内边距为 0.125rem，左右内边距为 0.125rem，下内边距为 0，为内容留出一定的空白 */
padding: 0.125rem 0.125rem 0;
/* 列元素 */
.column {
/* 设置弹性子项划分为3份，决定了元素在弹性容器中占用的空间大小 */
flex: 3;
margin:00.125rem 0.1875rem;
overflow:hidden;
}
/* 第二个列元素 */
.column:nth-child(2) {
/* 设置第二个列元素的弹性比例为 5，使其在弹性容器中占用更大的空间 */
flex: 5;
}
// 公共模块
.panel {
/* 设置定位为相对定位，相对于其正常位置进行定位 */
position: relative;
/* 设置高度为 3.875rem */
height: 3.875rem;
/* 设置边框样式为 1px 实线，颜色为 rgba(25, 186, 139, 0.17) */
border: 1px solid rgba(25, 186, 139, 0.17);
/* 设置内边距，上下为 0，左右为 0.1875rem，下为 0.5rem */
padding: 0 0.1875rem 0.5rem;
/* 设置下外边距为 0.1875rem，用于与下一个 panel 元素之间的间距 */
margin-bottom: .1875rem;
/* 设置背景图片为指定路径的图像 */
background-image: url(../images/line1.png);
/* panel 伪元素 before */
&::before {
/* 设置定位为绝对定位 */
position: absolute;
top: 0;
left: 0;
/* 在伪元素中插入内容 */
content: "";
width: 10px; /* 设置宽度为 10px */
height: 10px; /* 设置高度为 10px */
border-top: 2px solid #02a6b5; /* 设置顶部边框为 2px 实线，颜色为 #02a6b5 */
border-left: 2px solid #02a6b5; /* 设置左侧边框为 2px 实线，颜色为 #02a6b5 */
}
/* panel 伪元素 after */
&::after {
position: absolute;
top: 0;
right: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
/* panel-footer 类样式 */
.panel-footer {
position: absolute; /* 设置定位为绝对定位 */
left: 0; /* 距离左侧位置为 0 */
bottom: 0; /* 距离底部位置为 0 */
width: 100%; /* 设置宽度为 100% */
/* panel-footer 伪元素 before */
&::before {
position: absolute; /* 设置定位为绝对定位 */
bottom: 0; /* 距离底部位置为 0 */
left: 0; /* 距离左侧位置为 0 */
content: ""; /* 在伪元素中插入内容 */
width: 10px; /* 设置宽度为 10px */
height: 10px; /* 设置高度为 10px */
border-bottom: 2px solid #02a6b5; /* 设置底部边框为 2px 实线，颜色为 #02a6b5 */
border-left: 2px solid #02a6b5; /* 设置左侧边框为 2px 实线，颜色为 #02a6b5 */
}
/* panel-footer 伪元素 after，双冒号(::)用于表示伪元素， */
&::after {
position: absolute; /* 设置定位为绝对定位 */
bottom: 0; /* 距离底部位置为 0 */
right: 0; /* 距离右侧位置为 0 */
content: ""; /* 在伪元素中插入内容 */
width: 10px; /* 设置宽度为 10px */
height: 10px; /* 设置高度为 10px */
border-bottom: 2px solid #02a6b5; /* 设置底部边框为 2px 实线，颜色为 #02a6b5 */
border-right: 2px solid #02a6b5; /* 设置右侧边框为 2px 实线，颜色为 #02a6b5 */
}
}
h2 {
height: 0.6rem;
line-height: 0.6rem;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 400;
a{
color: #fff;
text-decoration: none;
margin: 0 .125rem;
}
}
.chart {
height: 3rem;
}
}
.no {
background: rgba(101, 132, 226, 0.1);
padding: 0.1875rem;
.no-hd {
position: relative;
border: 1px solid rgba(25, 186, 139, 0.17);
&::before {
content: "";
position: absolute;
width: 30px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
top: 0;
left: 0;
}
&::after {
content: "";
position: absolute;
width: 30px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
right: 0;
bottom: 0;
}
ul {
display: flex;
li {
position: relative;
flex: 1;
text-align: center;
height: 1rem;
line-height: 1rem;
font-size: 0.875rem;
color: #ffeb7b;
padding: 0.05rem 0;
font-family: electronicFont;
font-weight: bold;
&::after {
content: "";
position: absolute;
height: 50%;
width: 1px;
background: rgba(255, 255, 255, 0.2);
right: 0;
top: 25%;
}
}
}
}
.no-bd ul {
display: flex;
li {
flex: 1;
height: 0.5rem;
line-height: 0.5rem;
text-align: center;
font-size: 0.225rem;
color: rgba(255, 255, 255, 0.7);
padding-top: 0.125rem;
}
}
}
.map {
position: relative;
height: 10.125rem;
.chart {
position: absolute;
top: 0;
left: 0;
z-index: 5;
height: 10.125rem;
width: 100%;
}
.map1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6.475rem;
height: 6.475rem;
background: url(../images/map.png) no-repeat;
background-size: 100% 100%;
opacity: 0.3;
}
.map2 {
position: absolute;
top: 50%;
left: 50%;
width: 8.0375rem;
height: 8.0375rem;
background-image: url(../images/lbx.png);
background-size: 100% 100%;
animation: rotate 15s linear infinite;
z-index: 2;
opacity: 0.6;
}
.map3 {
position: absolute;
top: 50%;
left: 50%;
width: 7.075rem;
height: 7.075rem;
transform: translate(-50%, -50%);
background-image: url(../images/jt.png);
animation: rotate1 10s linear infinite;
background-size: 100% 100%;
opacity: 0.6;
}
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes rotate1 {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
}
}
/* 约束屏幕尺寸 */
/* 当屏幕宽度不超过 1024px 时应用以下样式 */
@media screen and (max-width: 1024px) {
html {
font-size: 42px !important; /* 将 html 元素的字体大小设置为 42px，并且使用 !important 来确保优先级最高 */
}
}
/* 当屏幕宽度不小于 1920px 时应用以下样式 */
@media screen and (min-width: 1920px) {
html {
font-size: 80px !important; /* 将 html 元素的字体大小设置为 80px，并且使用 !important 来确保优先级最高 */
}
}
index.js 文件
// 柱状图模块1
(function () {
// 1实例化对象
var myChart = echarts.init(document.querySelector(".bar .chart"));
// 2. 指定配置项和数据
var option = {
// 设置柱状图的颜色为 #2f89cf
color: ["#2f89cf"],
// 设置提示框组件，用于显示鼠标悬停在某个数据项上时的提示信息
tooltip: {
trigger: "axis", // 触发方式为坐标轴触发
axisPointer: {
type: "shadow" // 坐标轴指示器类型为阴影
}
},
// 修改图表的大小和位置，包括图表距离容器边缘的距离、是否包含坐标轴刻度标签等设置
grid: {
left: "0%", // 图表左边距离容器左侧的距离
top: "10px", // 图表上边距离容器顶部的距离
right: "0%", // 图表右边距离容器右侧的距离
bottom: "4%", // 图表下边距离容器底部的距离
containLabel: true // 是否包含坐标轴刻度标签，true 表示包含
},
// x 轴设置
xAxis: [
{
type: "category", // 类型为分类（离散型）
// x 轴数据
data: [
"旅游行业",
"教育培训",
"游戏行业",
"医疗行业",
"电商行业",
"社交行业",
"金融行业"
],
axisTick: {
alignWithLabel: true // 刻度线和标签对齐
},
// 修改刻度标签样式
axisLabel: {
color: "rgba(255,255,255,.6) ", // 字体颜色为白色，透明度为 60%
fontSize: "12" // 字体大小为 12
},
// 不显示 x 坐标轴线条样式
axisLine: {
show: false // 不显示坐标轴线条
}
}
],
// y 轴设置
yAxis: [
{
type: "value", // 类型为数值轴
// 修改刻度标签样式
axisLabel: {
color: "rgba(255,255,255,.6)", // 字体颜色为白色，透明度为 60%
fontSize: 12 // 字体大小为 12
},
// 修改 y 轴线条样式
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)", // 线条颜色为白色，透明度为 10%
width: 2 // 线条宽度为 2 像素
}
},
// 修改 y 轴分割线样式
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)" // 分割线颜色为白色，透明度为 10%
}
}
}
],
// 数据系列设置
series: [
{
name: "直接访问", // 系列名称
type: "bar", // 类型为柱状图
barWidth: "35%", // 柱子宽度为总宽度的 35%
data: [200, 300, 300, 900, 1500, 1200, 600], // 数据数组
itemStyle: {
// 修改柱子圆角
barBorderRadius: 5 // 柱子圆角大小为 5 像素
}
}
]
};
// 3. 把配置项给实例对象
myChart.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
myChart.resize();
});
})();
// 柱状图2
(function () {
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".bar2 .chart"));
// 2. 指定配置和数据
var option = {
// 网格设置
grid: {
top: "10%", // 上边距为总高度的 10%
left: "22%", // 左边距为总宽度的 22%
bottom: "10%",// 下边距为总高度的 10%
// containLabel: true // 是否包含坐标轴刻度标签，默认为 false
},
// 不显示x轴的相关信息
xAxis: {
show: false
},
// y 轴设置
yAxis: [
{
type: "category", // 类型为类目轴
inverse: true, // 反向显示
data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"], // 类目数据
// 不显示 y 轴线
axisLine: {
show: false // 不显示轴线
},
// 不显示刻度
axisTick: {
show: false // 不显示刻度
},
// 设置刻度标签文字颜色为白色
axisLabel: {
color: "#fff" // 文字颜色为白色
}
},
// 第二组数据，次坐标
{
data: [702, 350, 610, 793, 664], // 第二组数据
inverse: true, // 反向显示
// 不显示 y 轴线
axisLine: {
show: false // 不显示轴线
},
// 不显示刻度
axisTick: {
show: false // 不显示刻度
},
// 设置刻度标签文字颜色为白色
axisLabel: {
color: "#fff" // 文字颜色为白色
}
}
],
series: [
{
name: "条", // 系列名称
type: "bar", // 图表类型
data: [70, 34, 60, 78, 69], // 数据
yAxisIndex: 0, // Y 轴索引，设置为 0 表示在第一个 Y 轴上
itemStyle: { // 柱子样式
barBorderRadius: 20, // 圆角半径
color: function (params) { // 柱子颜色
return myColor[params.dataIndex]; // 根据数据索引号获取颜色
}
},
barCategoryGap: 50, // 柱子之间的间隔
barWidth: 10, // 柱子宽度
label: { // 显示柱子内的标签
show: true,
position: "inside",
formatter: "{c}%" // 显示数据值，并加上百分号
}
},
{
name: "框", // 系列名称
type: "bar", // 图表类型
barCategoryGap: 50, // 柱子框与柱子之间的间隔
barWidth: 15, // 柱子框宽度
yAxisIndex: 1, // Y 轴索引，设置为 1 表示在第二个 Y 轴上
data: [100, 100, 100, 100, 100], // 数据，值都为 100，表示柱子框的高度为整个 Y 轴范围
itemStyle: { // 柱子框样式
color: "none", // 不填充颜色
borderColor: "#00c1de", // 边框颜色
borderWidth: 3, // 边框宽度
barBorderRadius: 15 // 圆角半径
}
}
]
};
// 3. 把配置给实例对象
myChart.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
myChart.resize();
});
})();
// 折线图1模块制作
(function () {
// 定义年份数据
var yearData = [
{
year: "2020", // 年份
data: [
// 两个数组是因为有两条线
[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
]
},
{
year: "2021", // 年份
data: [
// 两个数组是因为有两条线
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
]
}
];
// 1. 实例化对象
// 初始化一个 ECharts 实例，并指定要渲染图表的 DOM 元素
var myChart = echarts.init(document.querySelector(".line .chart"));
// 2. 指定配置
var option = {
// 通过这个 color 修改两条线的颜色
color: ["#00f2f1", "#ed3f35"],
tooltip: {
trigger: "axis"
},
legend: {
// 如果 series 对象有 name 值，则 legend 可以不用写 data
// 修改图例组件文字颜色
textStyle: {
color: "#4c9bfd"
},
// 这个 10% 必须加引号
right: "10%"
},
grid: {
top: "20%", // 距离容器顶部的距离
left: "3%", // 距离容器左侧的距离
right: "4%", // 距离容器右侧的距离
bottom: "3%", // 距离容器底部的距离
show: true, // 显示边框
borderColor: "#012f4a", // 边框颜色
containLabel: true // 包含刻度文字在内
},
xAxis: {
type: "category", // 类目轴，适用于离散的类目数据
boundaryGap: false, // 坐标轴两端是否留白，设置为 false，则数据点在两个刻度之间
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
], // x 轴显示的类目数据
axisTick: {
show: false // 是否显示坐标轴刻度线
},
axisLabel: {
color: "#4c9bfd" // 坐标轴刻度标签的文字颜色
},
axisLine: {
show: false // 是否显示坐标轴轴线
}
},
yAxis: {
type: "value",
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: "#4c9bfd" // 文本颜色
},
axisLine: {
show: false // 去除轴线
},
splitLine: {
lineStyle: {
color: "#012f4a" // 分割线颜色
}
}
},
series: [
{
name: "新增粉丝",
type: "line",
// true 可以让我们的折线显示带有弧度
smooth: true,
data: yearData[0].data[0] // 初始渲染时使用 yearData 数组中的第一组数据
},
{
name: "新增游客",
type: "line",
smooth: true,
data: yearData[0].data[1] // 初始渲染时使用 yearData 数组中的第二组数据
}
]
};
// 3. 把配置给实例对象
myChart.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
myChart.resize();
});
// 5. 点击切换效果
// 通过 jQuery 绑定了一个点击事件处理程序，当 "h2" 元素内的 "a" 被点击时执行回调函数。
$(".line h2").on("click", "a", function () {
var obj = yearData[$(this).index()]; // 根据点击的按钮索引号找到对应的数据对象
option.series[0].data = obj.data[0]; // 更新第一条线的数据
option.series[1].data = obj.data[1]; // 更新第二条线的数据
myChart.setOption(option); // 重新渲染图表，从而实现点击切换数据的效果
});
})();
// 折线图2 模块制作
(function () {
var myChart = echarts.init(document.querySelector(".line2 .chart"));
var option = {
tooltip: {
trigger: "axis"
},
legend: {
top: "0%", // 图例组件距离容器上边距的位置，可以是像素值或百分比
data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"], // 图例的数据项名称
textStyle: {
color: "rgba(255,255,255,.5)", // 图例的文字颜色，这里设置为白色带有透明度
fontSize: "12" // 图例的文字大小，这里设置为 12px
}
},
grid: {
left: "10", // 绘图区域左侧的留白空间，可以是像素值或百分比
top: "30", // 绘图区域顶部的留白空间，可以是像素值或百分比
right: "10", // 绘图区域右侧的留白空间，可以是像素值或百分比
bottom: "10", // 绘图区域底部的留白空间，可以是像素值或百分比
containLabel: true // 是否包含坐标轴标签文字在内，如果为 true，则会将标签文字计算在内而不超出绘图区域
},
xAxis: [
{
type: "category", // 类型为类目型，表示 x 轴上的数据项为离散的类目名称
boundaryGap: false, // 是否在两端显示坐标轴留白，这里设置为 false 表示不留白
// x轴更换数据
data: [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"26",
"28",
"29",
"30"
],
// 文本颜色为rgba(255,255,255,.6) 文字大小为 12
axisLabel: { // 坐标轴刻度标签的相关样式配置
textStyle: {
color: "rgba(255,255,255,.6)", // 刻度标签文字颜色，这里设置为带有一定透明度的白色
fontSize: 12 // 刻度标签文字大小，这里设置为 12px
}
},
// x轴线的颜色为 rgba(255,255,255,.2)
axisLine: { // 坐标轴线的相关样式配置
lineStyle: {
color: "rgba(255,255,255,.2)" // 坐标轴线的颜色，这里设置为带有一定透明度的白色
}
}
}
],
yAxis: [
{
type: "value", // 类型为数值型，表示 y 轴上的数据为数值型数据
axisTick: { show: false }, // 隐藏刻度线
axisLine: { // 坐标轴线的相关样式配置
lineStyle: {
color: "rgba(255,255,255,.1)" // 坐标轴线的颜色，这里设置为带有一定透明度的白色
}
},
axisLabel: { // 坐标轴刻度标签的相关样式配置
textStyle: {
color: "rgba(255,255,255,.6)", // 刻度标签文字颜色，这里设置为带有一定透明度的白色
fontSize: 12 // 刻度标签文字大小，这里设置为 12px
}
},
splitLine: { // 分隔线的相关样式配置
lineStyle: {
color: "rgba(255,255,255,.1)" // 分隔线的颜色，这里设置为带有一定透明度的白色
}
}
}
],
// 配置折线系列
series: [
{
name: "邮件营销",
type: "line",
smooth: true, // 平滑连接数据点
lineStyle: {
color: "#0184d5", // 线条颜色为蓝色
width: 2, // 线条宽度为2px
},
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ offset: 0, color: "rgba(1, 132, 213, 0.4)" }, // 渐变色的起始颜色
{ offset: 0.8, color: "rgba(1, 132, 213, 0.1)" }, // 渐变线的结束颜色
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
},
symbol: "circle", // 数据点形状为圆形
symbolSize: 8, // 数据点大小为8px
showSymbol: false, // 开始不显示数据点，鼠标经过时显示
itemStyle: {
color: "#0184d5", // 数据点颜色为蓝色
borderColor: "rgba(221, 220, 107, .1)", // 数据点边框颜色
borderWidth: 12, // 数据点边框宽度
},
data: [/* 数据点 */],
},
{
name: "联盟广告",
type: "line",
smooth: true,
lineStyle: {
normal: {
color: "#00d887", // 线条颜色为绿色
width: 2, // 线条宽度为2px
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ offset: 0, color: "rgba(0, 216, 135, 0.4)" },
{ offset: 0.8, color: "rgba(0, 216, 135, 0.1)" },
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
},
},
symbol: "circle",
symbolSize: 5,
itemStyle: {
color: "#00d887",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12,
},
showSymbol: false,
data: [/* 数据点 */],
},
],
};
myChart.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
myChart.resize();
});
})();
// 饼形图1
(function () {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".pie .chart"));
// 2.指定配置
var option = {
color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
tooltip: { // 提示框组件
trigger: "item", // 触发类型为数据项
formatter: "{a} <br/>{b}: {c} ({d}%)" // 提示框内容格式化字符串
/*formatter: "{a} <br/>{b}: {c} ({d}%)" 是提示框内容的格式化字符串，其中：
{a} 表示系列名称，这里会显示饼图系列的名称。
{b} 表示数据项的名称，这里会显示饼图每个部分的名称。
{c} 表示数据项的数值，这里会显示饼图每个部分的数值。
{d} 表示数据项数值占比的百分比，这里会显示饼图每个部分数值的占比百分比。*/
},
// 配置图例
legend: {
bottom: "0%", // 将图例组件放置在图表底部，并与底部对齐
itemWidth: 10, // 设置图例小图标的宽度为10px
itemHeight: 10, // 设置图例小图标的高度为10px
textStyle: {
color: "rgba(255, 255, 255, 0.5)", // 设置图例文字颜色为带有一定透明度的白色
fontSize: 12, // 设置图例文字大小为12px
},
},
series: [
{
name: "年龄分布",
type: "pie",
// 这个radius可以修改饼形图的大小
// radius 第一个值是内圆的半径 第二个值是外圆的半径
radius: ["40%", "60%"], // 饼图的内外圆半径分别为"40%"和"60%"
center: ["50%", "45%"], // 饼图的中心位置位于整个图表的相对坐标(50%, 45%)处
avoidLabelOverlap: false, // 不允许标签重叠
// 图形上的文字
label: {
show: false, // 不显示文字标签
position: "center", // 文字标签的位置在中心
},
// 链接文字和图形的线是否显示
labelLine: {
show: false // 不显示链接文字和图形的线
},
data: [
{ value: 1, name: "0岁以下" },
{ value: 4, name: "20-29岁" },
{ value: 2, name: "30-39岁" },
{ value: 2, name: "40-49岁" },
{ value: 1, name: "50岁以上" }
]
}
]
};
// 3. 把配置给实例对象
myChart.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
myChart.resize();
});
})();
// 饼形图2 地区分布模块
(function () {
var myChart = echarts.init(document.querySelector(".pie2 .chart"));
var option = {
color: [
"#006cff",
"#60cda0",
"#ed8884",
"#ff9f7f",
"#0096ff",
"#9fe6b8",
"#32c5e9",
"#1d9dff"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
bottom: "0%",
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
series: [
{
name: "地区分布",
type: "pie",
radius: ["10%", "70%"],
center: ["50%", "50%"],
roseType: "radius",
// 链接图形和文字的线条
// 文字调整
label: {
fontFamily: 'SimSun', // 或者直接使用 '宋体'
// fontWeight: 'normal', // 设置字体粗细为正常
fontSize: 20
},
labelLine: {
// length 链接图形的线条
length: 6,
// length2 链接文字的线条
length2: 8
},
data: [
{ value: 20, name: "云南" },
{ value: 26, name: "北京" },
{ value: 24, name: "山东" },
{ value: 25, name: "河北" },
{ value: 20, name: "江苏" },
{ value: 25, name: "浙江" },
{ value: 30, name: "四川" },
{ value: 42, name: "湖北" }
]
}
]
};
myChart.setOption(option);
// 监听浏览器缩放，图表对象调用缩放resize函数
window.addEventListener("resize", function () {
myChart.resize();
});
})();
// 模拟飞行路线模块地图模块
(function () {
var myChart = echarts.init(document.querySelector(".map .chart"));
var geoCoordMap = {
上海: [121.4648, 31.2891],
东莞: [113.8953, 22.901],
东营: [118.7073, 37.5513],
中山: [113.4229, 22.478],
临汾: [111.4783, 36.1615],
临沂: [118.3118, 35.2936],
丹东: [124.541, 40.4242],
丽水: [119.5642, 28.1854],
乌鲁木齐: [87.9236, 43.5883],
佛山: [112.8955, 23.1097],
保定: [115.0488, 39.0948],
兰州: [103.5901, 36.3043],
包头: [110.3467, 41.4899],
北京: [116.4551, 40.2539],
北海: [109.314, 21.6211],
南京: [118.8062, 31.9208],
南宁: [108.479, 23.1152],
南昌: [116.0046, 28.6633],
南通: [121.1023, 32.1625],
厦门: [118.1689, 24.6478],
台州: [121.1353, 28.6688],
合肥: [117.29, 32.0581],
呼和浩特: [111.4124, 40.4901],
咸阳: [108.4131, 34.8706],
哈尔滨: [127.9688, 45.368],
唐山: [118.4766, 39.6826],
嘉兴: [120.9155, 30.6354],
大同: [113.7854, 39.8035],
大连: [122.2229, 39.4409],
天津: [117.4219, 39.4189],
太原: [112.3352, 37.9413],
威海: [121.9482, 37.1393],
宁波: [121.5967, 29.6466],
宝鸡: [107.1826, 34.3433],
宿迁: [118.5535, 33.7775],
常州: [119.4543, 31.5582],
广州: [113.5107, 23.2196],
廊坊: [116.521, 39.0509],
延安: [109.1052, 36.4252],
张家口: [115.1477, 40.8527],
徐州: [117.5208, 34.3268],
德州: [116.6858, 37.2107],
惠州: [114.6204, 23.1647],
成都: [103.9526, 30.7617],
扬州: [119.4653, 32.8162],
承德: [117.5757, 41.4075],
拉萨: [91.1865, 30.1465],
无锡: [120.3442, 31.5527],
日照: [119.2786, 35.5023],
昆明: [102.9199, 25.4663],
杭州: [119.5313, 29.8773],
枣庄: [117.323, 34.8926],
柳州: [109.3799, 24.9774],
株洲: [113.5327, 27.0319],
武汉: [114.3896, 30.6628],
汕头: [117.1692, 23.3405],
江门: [112.6318, 22.1484],
沈阳: [123.1238, 42.1216],
沧州: [116.8286, 38.2104],
河源: [114.917, 23.9722],
泉州: [118.3228, 25.1147],
泰安: [117.0264, 36.0516],
泰州: [120.0586, 32.5525],
济南: [117.1582, 36.8701],
济宁: [116.8286, 35.3375],
海口: [110.3893, 19.8516],
淄博: [118.0371, 36.6064],
淮安: [118.927, 33.4039],
深圳: [114.5435, 22.5439],
清远: [112.9175, 24.3292],
温州: [120.498, 27.8119],
渭南: [109.7864, 35.0299],
湖州: [119.8608, 30.7782],
湘潭: [112.5439, 27.7075],
滨州: [117.8174, 37.4963],
潍坊: [119.0918, 36.524],
烟台: [120.7397, 37.5128],
玉溪: [101.9312, 23.8898],
珠海: [113.7305, 22.1155],
盐城: [120.2234, 33.5577],
盘锦: [121.9482, 41.0449],
石家庄: [114.4995, 38.1006],
福州: [119.4543, 25.9222],
秦皇岛: [119.2126, 40.0232],
绍兴: [120.564, 29.7565],
聊城: [115.9167, 36.4032],
肇庆: [112.1265, 23.5822],
舟山: [122.2559, 30.2234],
苏州: [120.6519, 31.3989],
莱芜: [117.6526, 36.2714],
菏泽: [115.6201, 35.2057],
营口: [122.4316, 40.4297],
葫芦岛: [120.1575, 40.578],
衡水: [115.8838, 37.7161],
衢州: [118.6853, 28.8666],
西宁: [101.4038, 36.8207],
西安: [109.1162, 34.2004],
贵阳: [106.6992, 26.7682],
连云港: [119.1248, 34.552],
邢台: [114.8071, 37.2821],
邯郸: [114.4775, 36.535],
郑州: [113.4668, 34.6234],
鄂尔多斯: [108.9734, 39.2487],
重庆: [107.7539, 30.1904],
金华: [120.0037, 29.1028],
铜川: [109.0393, 35.1947],
银川: [106.3586, 38.1775],
镇江: [119.4763, 31.9702],
长春: [125.8154, 44.2584],
长沙: [113.0823, 28.2568],
长治: [112.8625, 36.4746],
阳泉: [113.4778, 38.0951],
青岛: [120.4651, 36.3373],
韶关: [113.7964, 24.7028]
};
var XAData = [
[{ name: "西安" }, { name: "拉萨", value: 100 }],
[{ name: "西安" }, { name: "上海", value: 100 }],
[{ name: "西安" }, { name: "广州", value: 100 }],
[{ name: "西安" }, { name: "西宁", value: 100 }],
[{ name: "西安" }, { name: "银川", value: 100 }]
];
var XNData = [
[{ name: "西宁" }, { name: "北京", value: 100 }],
[{ name: "西宁" }, { name: "上海", value: 100 }],
[{ name: "西宁" }, { name: "广州", value: 100 }],
[{ name: "西宁" }, { name: "西安", value: 100 }],
[{ name: "西宁" }, { name: "银川", value: 100 }]
];
var YCData = [
[{ name: "拉萨" }, { name: "潍坊", value: 100 }],
[{ name: "拉萨" }, { name: "哈尔滨", value: 100 }],
[{ name: "银川" }, { name: "上海", value: 100 }],
[{ name: "银川" }, { name: "西安", value: 100 }],
[{ name: "银川" }, { name: "西宁", value: 100 }]
];
var planePath =
"path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
//var planePath = 'arrow';
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
value: dataItem[1].value
});
}
}
return res;
};
var color = ["#a6c84c", "#ffa022", "#46bee9"]; //航线的颜色
var series = [];
[
["西安", XAData],
["西宁", XNData],
["银川", YCData]
].forEach(function (item, i) {
series.push(
{
name: item[0] + " Top3",
type: "lines",
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: "red", //arrow箭头的颜色
symbolSize: 3
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0] + " Top3",
type: "lines",
zlevel: 2,
symbol: ["none", "arrow"],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0] + " Top3",
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
brushType: "stroke"
},
label: {
normal: {
show: true,
position: "right",
formatter: "{b}"
}
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[i]
},
emphasis: {
areaColor: "#2B91B7"
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
}
);
});
var option = {
tooltip: {
trigger: "item",
formatter: function (params, ticket, callback) {
if (params.seriesType == "effectScatter") {
return "线路：" + params.data.name + "" + params.data.value[2];
} else if (params.seriesType == "lines") {
return (
params.data.fromName +
">" +
params.data.toName +
"<br />" +
params.data.value
);
} else {
return params.name;
}
}
},
legend: {
orient: "vertical",
top: "bottom",
left: "right",
data: ["西安 Top3", "西宁 Top3", "银川 Top3"],
textStyle: {
color: "#fff"
},
selectedMode: "multiple"
},
geo: { // 地理坐标系组件
map: 'china', // 地图类型为中国地图
zoom: 1.2, // 缩放级别为1.2倍
label: {
emphasis: {
show: false // 强调状态下不显示标签
}
},
roam: false, // 禁止鼠标漫游和缩放地图
itemStyle: { // 地图区域的样式设置
normal: {
areaColor: '#142957', // 普通状态下的区域填充色
borderColor: '#0692a4' // 普通状态下的边框颜色
},
emphasis: {
areaColor: '#0b1c2d' // 强调状态下的区域填充色
}
}
},
series: series
};
myChart.setOption(option);
// 监听浏览器缩放，图表对象调用缩放resize函数
window.addEventListener("resize", function () {
myChart.resize();
});
})();
424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
