前端数据可视化：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("这是一个立即执行函数");
})();
1
2
3
4

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

修改 flexible.js 中 setRemUnit() 函数

修改 flexible.js 中屏幕划分的等份数，本案例将屏幕分为 24 等份

// set 1rem = viewWidth / 24
function setRemUnit() {
  var rem = docEl.clientWidth / 24;
  docEl.style.fontSize = rem + "px";
}
1
2
3
4
5

安装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; 
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

时间模块 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

HTML文件


<header>
    
    <h1>数据可视化展示-Echartsh1>

    
    <div class="showtime">div>
header>
1
2
3
4
5
6
7
8

页面主体模块

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; 
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

HTML文件



<section class="mainbox">
    <div class="column">1div>
    <div class="column">2div>
    <div class="column">3div>
section>
1
2
3
4
5
6
7
8

公共面板模块 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 */
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

柱形图 bar 模块(布局)

标题模块 h2 高度为 48px 文字颜色为白色文字大小为 20px
图标内容模块 chart 高度 240px
以上可以作为panel公共样式部分

HTML


<div class="column">
    
    <div class="panel bar">
        <h2>柱形图-就业行业h2>
        <div class="chart">图标div>
        
        <div class="panel-footer">div>
    div>

    
    <div class="panel bar">
        <h2>柱形图-就业行业h2>
        <div class="chart">图标div>
        
        <div class="panel-footer">div>
    div>

    
    <div class="panel bar">
        <h2>柱形图-就业行业h2>
        <div class="chart">图标div>
        
        <div class="panel-footer">div>
    div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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;
}
1
2
3
4
5
6
7
8
9
10
11
12

中间布局

上面是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">
    
    <div class="no">
        
        <div class="no-hd">
            <ul>
                <li>123li>
                <li>456li>
            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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

地图模块

地图模块高度为 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);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

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>
1

2、准备一个具备大小的DOM容器

<div class="box"></div>


<style>
    .box{
        width: 300px;
        height: 300px;
        background-color: pink;
    }
</style>
1
2
3
4
5
6
7
8
9
10

3、初始化echarts实例对象

var myChart = echarts.init(document.getElementById('main'));
1

4、指定配置项和数据(option)

// 指定图表的配置项和数据
var option = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

5、将配置项设置给echarts实例对象

// 将配置项设置给echarts实例对象
myChart.setOption(option)
1
2

完整代码

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

其他图例源：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]
        }
    ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

图表

步骤：

官网找到类似实例，适当分析，并且引入到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 表示包含
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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 // 不显示坐标轴线条
    }
  }
],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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%
      }
    }
  }
],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

修改柱形为圆角、柱子宽度在series 里面设置

// 数据系列设置
series: [
  {
    name: "直接访问", // 系列名称
    type: "bar", // 类型为柱状图
    barWidth: "35%", // 柱子宽度为总宽度的 35%
    data: [200, 300, 300, 900, 1500, 1200, 600], // 数据数组
    itemStyle: {
      // 修改柱子圆角
      barBorderRadius: 5 // 柱子圆角大小为 5 像素
    }
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13

让图表跟随屏幕自适应

// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
  myChart.resize();
});
1
2
3
4

完整代码

// 柱状图模块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();
  });
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

柱状图2定制

官网找到类似实例，适当分析，并且引入到HTML页面中(省略)

修改图形大小 grid

// 网格设置
grid: {
  top: "10%", // 上边距为总高度的 10%
  left: "22%", // 左边距为总宽度的 22%
  bottom: "10%" ,// 下边距为总高度的 10%
  // containLabel: true // 是否包含坐标轴刻度标签，默认为 false
},
1
2
3
4
5
6
7

X轴相关设置 xAxis

不显示x轴

// 不显示x轴的相关信息
xAxis: {
  show: false
},
1
2
3
4

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" // 文字颜色为白色
    }
  }
],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

修改第一组柱子相关样式（条状）

name: "条", // 系列名称
type: "bar", // 图表类型
data: [70, 34, 60, 78, 69], // 数据
yAxisIndex: 0, // Y 轴索引，设置为 0 表示在第一个 Y 轴上
itemStyle: { // 柱子样式
  barBorderRadius: 20, // 圆角半径
  color: function (params) { // 柱子颜色
    return myColor[params.dataIndex]; // 根据数据索引号获取颜色
  }
},
1
2
3
4
5
6
7
8
9
10

设置第一组柱子内百分比显示数据

label: { // 显示柱子内的标签
  show: true,
  position: "inside",
  formatter: "{c}%" // 显示数据值，并加上百分号
}
1
2
3
4
5

设置第一组柱子不同颜色

// 声明颜色数组
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 2. 给 itemStyle  里面的color 属性设置一个 返回值函数
itemStyle: { // 柱子样式
  barBorderRadius: 20, // 圆角半径
  color: function (params) { // 柱子颜色
    return myColor[params.dataIndex]; // 根据数据索引号获取颜色
  }
},
1
2
3
4
5
6
7
8
9

修改第二组柱子的相关配置（框状）

{
  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 // 圆角半径
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

完整代码

(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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

折线图1 人员变化模块制作

官网找到类似实例，适当分析，并且引入到HTML页面中(省略)

图形大小、边框设置、刻度标签设置

grid: {
  top: "20%", // 距离容器顶部的距离
  left: "3%", // 距离容器左侧的距离
  right: "4%", // 距离容器右侧的距离
  bottom: "3%", // 距离容器底部的距离
  show: true, // 显示边框
  borderColor: "#012f4a", // 边框颜色
  containLabel: true // 包含刻度文字在内
},
1
2
3
4
5
6
7
8
9

修改图例组件

修改图例组件中的文字颜色 #4c9bfd，距离右侧 right 为 10%

legend: {
      // 如果 series 对象有 name 值，则 legend 可以不用写 data
      // 修改图例组件文字颜色
      textStyle: {
        color: "#4c9bfd"
      },
      // 这个 10% 必须加引号
      right: "10%"
    },
1
2
3
4
5
6
7
8
9

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 // 是否显示坐标轴轴线
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

y轴相关设置 yAxis

刻度去除
字体颜色：#4c9bfd
分割线颜色：#012f4a

yAxis: {
      type: "value",
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a" // 分割线颜色
        }
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

两条线形图定制

颜色分别：#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 数组中的第二组数据
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

点击 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]
     ]
 }
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 通过 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
2
3
4
5
6
7

完整代码

// 折线图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); // 重新渲染图表，从而实现点击切换数据的效果
  });

})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

折线图2 播放量模块制作

官网找到类似实例，适当分析，并且引入到HTML页面中(省略)

图例设置

更换图例组件文字颜色 rgba(255,255,255,.5) 文字大小为12

legend: {
  top: "0%", // 图例组件距离容器上边距的位置，可以是像素值或百分比
  data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"], // 图例的数据项名称
  textStyle: {
    color: "rgba(255,255,255,.5)", // 图例的文字颜色，这里设置为白色带有透明度
    fontSize: "12" // 图例的文字大小，这里设置为 12px
  }
}
1
2
3
4
5
6
7
8

修改图表大小

grid: {
  left: "10", // 绘图区域左侧的留白空间，可以是像素值或百分比
  top: "30", // 绘图区域顶部的留白空间，可以是像素值或百分比
  right: "10", // 绘图区域右侧的留白空间，可以是像素值或百分比
  bottom: "10", // 绘图区域底部的留白空间，可以是像素值或百分比
  containLabel: true // 是否包含坐标轴标签文字在内，如果为 true，则会将标签文字计算在内而不超出绘图区域
}
1
2
3
4
5
6
7

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)" // 坐标轴线的颜色，这里设置为带有一定透明度的白色
      }
    }
  }
],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

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)" // 分隔线的颜色，这里设置为带有一定透明度的白色
      }
    }
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

修改两个线模块配置(在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: [/* 数据点 */],
  },
],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

完整代码

// 折线图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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177

饼形图 1年龄分布模块制作

官网找到类似实例，适当分析，并且引入到HTML页面中(省略)

图例设置

// 配置图例
legend: {
  bottom: "0%", // 将图例组件放置在图表底部，并与底部对齐
  itemWidth: 10, // 设置图例小图标的宽度为10px
  itemHeight: 10, // 设置图例小图标的高度为10px
  textStyle: {
    color: "rgba(255, 255, 255, 0.5)", // 设置图例文字颜色为带有一定透明度的白色
    fontSize: 12, // 设置图例文字大小为12px
  },
},
1
2
3
4
5
6
7
8
9
10

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

完整代码

// 饼形图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} 
{b}: {c} ({d}%)" // 提示框内容格式化字符串
      /*formatter: "{a} 
{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();
  });
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

饼形图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} 
{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();
  });
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

模拟飞行路线模块地图模块

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' // 强调状态下的区域填充色
    }
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

完整代码

// 模拟飞行路线模块地图模块
(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 +
            "
" +
            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();
  });
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309

约束缩放

/* 约束屏幕尺寸 */

/* 当屏幕宽度不超过 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 来确保优先级最高 */
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

完整项目文件

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

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 来确保优先级最高 */
    }
  }
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335

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} 
{b}: {c} ({d}%)" // 提示框内容格式化字符串
      /*formatter: "{a} 
{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} 
{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 +
            "
" +
            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();
  });
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951

相关阅读:
关于语言大模型的八大论断
 postcss-pxtorem
Java读取本地TXT文本内的json数据
 （75）MIPI DSI LLP介绍（十五）
My Ninety-eighth Page - 不同子序列 - By Nicolas
java中Array（数组）、List（列表）、Set（集合）、Map（映射）、Queue（队列）详解
 身份证实名认证API接口，选择的时候应该注意什么？
第六章：存储系统
 Pytorch 多卡并行（1）—— 原理简介和 DDP 并行实践
 在pycharm中，使用open3d得到pcd变量无法使用智能函数提示。解决方法
原文地址：https://blog.csdn.net/qq_50086023/article/details/136241607

前端数据可视化：ECharts使用

可视化介绍

知识扩展

less文件

立即执行函数

jQuery

适配方案

修改 flexible.js 中 setRemUnit() 函数

安装cssrem插件

header 布局

CSS文件

时间模块 javascript 代码

HTML文件

页面主体模块

mainbox 主体模块

css样式

HTML文件

公共面板模块 panel

柱形图 bar 模块(布局)

HTML

CSS文件

中间布局

HTML

CSS

地图模块

CSS

Echarts

Echarts-体验

Echarts-基础配置

图表

柱状图1定制

柱形颜色、提示组件显示、图表大小的设置

X轴相关设置 xAxis

y轴相关设置 yAxis

修改柱形为圆角、柱子宽度 在series 里面设置

让图表跟随屏幕自适应

完整代码

柱状图2定制

修改图形大小 grid

X轴相关设置 xAxis

y轴相关设置 yAxis

修改第一组柱子相关样式（条状）

设置第一组柱子内百分比显示数据

设置第一组柱子不同颜色

修改第二组柱子的相关配置（框状）

完整代码

折线图1 人员变化模块制作

图形大小、边框设置、刻度标签设置

修改图例组件

x轴相关设置 xAxis

y轴相关设置 yAxis

两条线形图定制

点击 2020年 2021年 数据发生变化

完整代码

折线图2 播放量模块制作

图例设置

修改图表大小

X轴相关设置 xAxis

y轴相关设置 yAxis

修改两个线模块配置(在series 里面定制)

完整代码

饼形图 1年龄分布模块制作

图例设置

series 设置

完整代码

饼形图2 地区分布模块制作（南丁格尔玫瑰图）

完整代码

模拟飞行路线模块地图模块

完整代码

约束缩放

完整项目文件

HTML

less文件

index.js 文件

修改柱形为圆角、柱子宽度在series 里面设置

点击 2020年 2021年数据发生变化