前端数据可视化：ECharts使用

可视化介绍

应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。
数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。

知识扩展

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 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 / 10;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);

修改 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，并初始化为 nullvar 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 = {// 设置柱状图的颜色为  #2f89cfcolor: ["#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)  文字大小为 12axisLabel: { // 坐标轴刻度标签的相关样式配置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, // 数据点大小为8pxshowSymbol: 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)  文字大小为 12axisLabel: { // 坐标轴刻度标签的相关样式配置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, // 数据点大小为8pxshowSymbol: 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, // 设置图例小图标的宽度为10pxitemHeight: 10, // 设置图例小图标的高度为10pxtextStyle: {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, // 设置图例小图标的宽度为10pxitemHeight: 10, // 设置图例小图标的高度为10pxtextStyle: {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，并初始化为 nullvar 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 = {// 设置柱状图的颜色为  #2f89cfcolor: ["#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)  文字大小为 12axisLabel: { // 坐标轴刻度标签的相关样式配置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, // 数据点大小为8pxshowSymbol: 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, // 设置图例小图标的宽度为10pxitemHeight: 10, // 设置图例小图标的高度为10pxtextStyle: {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();});
})();