ECharts

已于 2024-05-08 21:17:15 修改
阅读量258 收藏 10
点赞数 4
文章标签： echarts maven 数据可视化
于 2024-05-07 23:01:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75481956/article/details/138549124
版权

大数据可视化技术

第一章、ECharts概念与体验

1.1 ECharts简介

ECharts商业级数据图表，最初由百度团队开源。它一个纯 JavaScript
的图表库，能够在PC端和移动设备上流畅运行，兼容当前绝大部分浏览器
IE，Chrome,Firefox，Safari等)，底层依赖轻量级的Canvas , ECharts
提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
在这里插入图片描述

1.2 ECharts发展历程
  1. 2018年初,捐赠给Apache基金会，成为ASF孵化级项目。
  2. 2021年1月26日晚，Apache基金会官方宣布ECharts项目正式毕业，成为Apache顶级项目。
  3. 2021年1月28日，ECharts 5线上发布会举行。
1.3 ECharts 特性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.4 什么是数据可视化与应用场景
  • 数据可视化主要目的:借助于图形化手段，清晰有效的传达与沟通信
  • 数据可视化主要作用︰数据可视化可以把数据从冰冷的数字转换成图形,解释蕴含在数据中的规律和道理。

在这里插入图片描述
在这里插入图片描述

1.5 数据可视化的应用场景

通用报表

在这里插入图片描述

移动端图表
在这里插入图片描述

大屏可视化

在这里插入图片描述

图编辑与图分析
在这里插入图片描述

地理可视化
在这里插入图片描述

1.6 ECharts 数据可视化体验
1.6.1 推荐开发软件
  • 蓝桥云课实训仿真平台vsCode
  • lDEA专业版
  • PyCharm专业版
  • WebStorm专业版
  • HBuilder

第二章、ECharts基础入门

2.0 ECharts安装

在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。

2.1.1 引入 Apache ECharts

在刚才保存 echarts.js 的目录新建一个 demo01.html 文件，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="js/echarts.js"></script>
  </head>
</html>

打开这个 demo.html，你会看到一片空白。但是不要担心，打开控制台确认没有报错信息，就可以进行下一步。

2.1.2 绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 </head> 之后，添加：

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="js/echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

这样你的第一个图表就诞生了！
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/echarts.js"></script>
    <title>ECharts体验</title>
</head>
<body>
    <!-- 定义DIV，用于放置ECharts绘制的图表。注意：DIV一定要设置高度和宽度 -->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script>
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: '猴子电商平台销售数据',
                subtext: '2024年3月份'
            },
            tooltip: {},
            xAxis : {
                data: ['猕猴', '懒猴', '蜘蛛猴', '红面猴', '狒狒' , '金丝猴', '眼镜猴', '疣猴', '长臂猿']
            },
            yAxis: {},
            series: [
                {
                    type: 'bar',
                    data: [1000, 530, 920, 1468, 82, 377, 860, 1200, 100]
                }
            ]
        }
        myChart.setOption(option);
    </script>
</body>
</html>
2.1.3 ECharts体验

demo01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/echarts.js"></script>
    <title>ECharts体验</title>
</head>
<body>
    <!-- 定义DIV，用于放置ECharts绘制的图表。注意：DIV一定要设置高度和宽度 -->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script>
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: '猴子电商平台销售数据',
                subtext: '2024年3月份'
            },
            tooltip: {},
            xAxis : {
                data: ['猕猴', '懒猴', '蜘蛛猴', '红面猴', '狒狒' , '金丝猴', '眼镜猴', '疣猴', '长臂猿']
            },
            yAxis: {},
            series: [
                {
                    type: 'bar',
                    data: [1000, 530, 920, 1468, 82, 377, 860, 1200, 100]
                }
            ]
        }
        myChart.setOption(option);
    </script>
</body>
</html>

在这里插入图片描述

demo02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 1.导入ECharts的JS库 -->
    <script src="js/echarts.js"></script>
    <title>ECharts体验</title>
</head>
<body>
    <!-- 2.定义ECharts绘制区域 -->
    <div id="main" style="width: 1200px; height: 400px"></div>

    <!-- 3.定义JS编写区域 -->
    <script>
        <!-- 3.1 初始化ECharts图表 -->
        var myChart = echarts.init(document.getElementById("main"));

        <!-- 3.2 设置具体配置项和数据 -->
        var option = {
            // 定义标题或副标题
            title: {
                text: 'xx购物网',
                subtext: '2024年度'
            },
            tooltip: {},
            // 添加图列
            legend: {
                data: ['电脑', '手机', '家电']
            },
            xAxis : {
                data: ['一月', '二月', '三月', '四月', '五月' , '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {},
            series: [
                {
                    // 图表类型
                    type: 'bar',
                    // 实际数据
                    data: [1000, 530, 920, 1468, 82, 377, 860, 1200, 100, 830, 1350, 980],
                    name: '电脑'
                },
                {
                    type: 'bar',
                    data: [100, 630, 920, 1368, 42, 37, 460, 1300, 400, 630, 1250, 780],
                    name: '手机'
                },
                {
                    type: 'bar',
                    data: [200, 230, 420, 1268, 502, 277, 160, 1400, 300, 430, 1550, 1080],
                    name: '家电'
                }
            ]
        }
        myChart.setOption(option);
    </script>
</body>
</html>

在这里插入图片描述

demo03.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 1.导入ECharts的JS库 -->
    <script src="js/echarts.js"></script>
    <title>ECharts体验</title>
</head>
<body>
<!-- 2.定义ECharts绘制区域 -->
<div id="main" style="width: 600px; height: 400px"></div>

<!-- 3.定义JS编写区域 -->
<script>
    <!-- 3.1 初始化ECharts图表 -->
    var myChart = echarts.init(document.getElementById("main"));

    <!-- 3.2 设置具体配置项和数据 -->
    var option = {
        // 定义标题或副标题
        title: {
            text: '蓝桥云课完课率统计',
            subtext: '2023-2024学年第2学期'
        },
        tooltip: {},
        // 添加图列
        legend: {
            data: ['三月', '四月', '五月', '六月']
        },
        xAxis : {
            data: ['实验', '测试', '挑战']
        },
        yAxis: {},
        series: [
            {
                // 图表类型
                type: 'bar',
                // 实际数据
                data: [82, 84, 81],
                name: '三月'
            },
            {
                type: 'bar',
                data: [91, 85, 94],
                name: '四月'
            },
            {
                type: 'bar',
                data: [85, 90, 77],
                name: '五月'
            },
            {
                type: 'bar',
                data: [94, 96, 90],
                name: '六月'
            }
        ]
    }
    myChart.setOption(option);
</script>
</body>
</html>

在这里插入图片描述

2.1.4 使用网络CDN引用

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
Staticfile CDN（国内）： https://cdn.staticfile.org/echarts/5.2.0/echarts.js
jsDelivr：https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.js

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 1.导入ECharts的JS库 -->
    <script src="https://cdn.staticfile.org/echarts/5.2.0/echarts.js"></script>
    <title>ECharts体验</title>
</head>
<body>
    <!-- 2.定义ECharts绘制区域 -->
    <div id="main" style="width: 1200px; height: 400px"></div>

    <!-- 3.定义JS编写区域 -->
    <script>
        <!-- 3.1 初始化ECharts图表 -->
        var myChart = echarts.init(document.getElementById("main"));

        <!-- 3.2 设置具体配置项和数据 -->
        var option = {
            // 定义标题或副标题
            title: {
                text: 'xx购物网',
                subtext: '2024年度'
            },
            tooltip: {},
            // 添加图列
            legend: {
                data: ['电脑', '手机', '家电']
            },
            xAxis : {
                data: ['一月', '二月', '三月', '四月', '五月' , '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {},
            series: [
                {
                    // 图表类型
                    type: 'bar',
                    // 实际数据
                    data: [1000, 530, 920, 1468, 82, 377, 860, 1200, 100, 830, 1350, 980],
                    name: '电脑'
                },
                {
                    type: 'bar',
                    data: [100, 630, 920, 1368, 42, 37, 460, 1300, 400, 630, 1250, 780],
                    name: '手机'
                },
                {
                    type: 'bar',
                    data: [200, 230, 420, 1268, 502, 277, 160, 1400, 300, 430, 1550, 1080],
                    name: '家电'
                }
            ]
        }
        myChart.setOption(option);
    </script>
</body>
</html>

谈论思考

本地独立版本和使用网络cdn方法这个两种方法在实际项目应用中分别有哪些优势和劣势？

  1. 本地版本优势在于不用去考虑网络提供商关闭造成无法使用，可以修改源代码。劣势在于占用量较大，一致性必须遵守规则。

  2. 网络CDN优势在于可移置性比较强，不用占用自己空间或网络。劣势在于受限于CDN提供商(关闭或倒闭)就无法使用，不可以修改源代码。

2.2 ECharts配置语法运用(重之重的核心点)

产品销售数据
在这里插入图片描述

我们需要绘制柱状图，请问是否有标题或副标题?是否有图例，它的名字是什么?X轴的数据什么?一个类别有几回
个柱状图形?(10分钟)

法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 1.导入ECharts的JS库 -->
    <script src="https://cdn.staticfile.org/echarts/5.2.0/echarts.js"></script>
    <title>配置语法分解</title>
</head>
<body>
<!-- 2.定义ECharts绘制区域 -->
<div id="main" style="width: 780px; height: 400px"></div>

<!-- 3.定义JS编写区域 -->
<script>
    <!-- 3.1 初始化ECharts图表 -->
    var myChart = echarts.init(document.getElementById("main"));

    <!-- 3.2 设置具体配置项和数据 -->
    var option = {
        // 定义标题或副标题
        title: {
            text: '蓝桥购电商销售平台',
            subtext: '生活居家类'
        },
        tooltip: {},
        // 添加图列
        legend: {
            data: ['衬衫', '羊毛衣', '羽绒服', '牛仔裤', '休闲鞋', '卫衣']
        },
        xAxis : {
            data: ['女装系列']
        },
        yAxis: {},
        series: [
            {
                type: 'bar',
                data: [5],
                name: '衬衫'
            },
            {
                type: 'bar',
                data: [20],
                name: '羊毛衣'
            },
            {
                type: 'bar',
                data: [36],
                name: '羽绒服'
            },
            {
                type: 'bar',
                data: [10],
                name: '牛仔裤'
            },
            {
                type: 'bar',
                data: [10],
                name: '休闲鞋'
            },
            {
                type: 'bar',
                data: [20],
                name: '卫衣'
            }
        ]
    }
    myChart.setOption(option);
</script>
</body>
</html>

在这里插入图片描述

法二:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 1.导入ECharts的JS库 -->
    <script src="https://cdn.staticfile.org/echarts/5.2.0/echarts.js"></script>
    <title>配置语法分解</title>
</head>
<body>
<!-- 2.定义ECharts绘制区域 -->
<div id="main" style="width: 500px; height: 400px"></div>

<!-- 3.定义JS编写区域 -->
<script>
    <!-- 3.1 初始化ECharts图表 -->
    var myChart = echarts.init(document.getElementById("main"));

    <!-- 3.2 设置具体配置项和数据 -->
    var option = {
        // 定义标题或副标题
        title: {
            text: '蓝桥购电商销售平台',
            subtext: '生活居家类'
        },
        tooltip: {},
        // 添加图列
        legend: {
            data: ['女装系列']
        },
        xAxis : {
            data: ['衬衫', '羊毛衣', '羽绒服', '牛仔裤', '休闲鞋', '卫衣']
        },
        yAxis: {},
        series: [
            {
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                name: '女装系列'
            }
        ]
    }
    myChart.setOption(option);
</script>
</body>
</html>

在这里插入图片描述

官网示例地址：https://echarts.apache.org/examples/zh/index.html

2.2.1 练习

(1).根据下列数据完成使用ECharts柱形图的绘制(25分钟)。

在这里插入图片描述

代码一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 1.导入ECharts的JS库 -->
    <script src="https://cdn.staticfile.org/echarts/5.2.0/echarts.js"></script>
    <title>配置语法分解</title>
</head>
<body>
<!-- 2.定义ECharts绘制区域 -->
<div id="main" style="width: 500px; height: 400px"></div>

<!-- 3.定义JS编写区域 -->
<script>
    <!-- 3.1 初始化ECharts图表 -->
    var myChart = echarts.init(document.getElementById("main"));

    <!-- 3.2 设置具体配置项和数据 -->
    var option = {
        // 定义标题或副标题
        title: {
            text: '蓝桥云课学习行为',
            subtext: '24年3月4日至3月10日'
        },
        tooltip: {},
        // 添加图列
        legend: {
            data: ['挑战']
        },
        xAxis : {
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {},
        series: [
            {
                type: 'bar',
                data: [71, 65, 61, 68, 74, 32, 66],
                name: '挑战'
            }
        ]
    }
    myChart.setOption(option);
</script>
</body>
</html>

效果：

在这里插入图片描述

代码二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 1.导入ECharts的JS库 -->
    <script src="https://cdn.staticfile.org/echarts/5.2.0/echarts.js"></script>
    <title>配置语法分解</title>
</head>
<body>
<!-- 2.定义ECharts绘制区域 -->
<div id="main" style="width: 750px; height: 400px"></div>

<!-- 3.定义JS编写区域 -->
<script>
    <!-- 3.1 初始化ECharts图表 -->
    var myChart = echarts.init(document.getElementById("main"));

    <!-- 3.2 设置具体配置项和数据 -->
    var option = {
        // 定义标题或副标题
        title: {
            text: '蓝桥云课学习行为',
            subtext: '24年3月4日至3月10日'
        },
        tooltip: {},
        // 添加图列
        legend: {
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        xAxis : {
            data: ['挑战']
        },
        yAxis: {},
        series: [
            {
                type: 'bar',
                data: [71],
                name: '周一'
            },
            {
                type: 'bar',
                data: [65],
                name: '周二'
            },
            {
                type: 'bar',
                data: [61],
                name: '周三'
            },
            {
                type: 'bar',
                data: [68],
                name: '周四'
            },
            {
                type: 'bar',
                data: [74],
                name: '周五'
            },
            {
                type: 'bar',
                data: [32],
                name: '周六'
            },
            {
                type: 'bar',
                data: [66],
                name: '周日'
            }
        ]
    }
    myChart.setOption(option);
</script>
</body>
</html>

效果：

在这里插入图片描述

(2).根据下列数据完成使用ECharts柱形图的绘制(20分钟)。

在这里插入图片描述

代码一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 1.导入ECharts的JS库 -->
    <script src="https://cdn.staticfile.org/echarts/5.2.0/echarts.js"></script>
    <title>配置语法分解</title>
</head>
<body>
<!-- 2.定义ECharts绘制区域 -->
<div id="main" style="width: 400px; height: 300px"></div>

<!-- 3.定义JS编写区域 -->
<script>
    <!-- 3.1 初始化ECharts图表 -->
    var myChart = echarts.init(document.getElementById("main"));

    <!-- 3.2 设置具体配置项和数据 -->
    var option = {
        // 定义标题或副标题
        title: {
            text: '蓝桥购电商平台',
        },
        tooltip: {},
        // 添加图列
        legend: {
            data: ['电脑整机']
        },
        xAxis : {
            data: ['笔记本', '游戏本', '平板电脑']
        },
        yAxis: {},
        series: [
            {
                type: 'bar',
                data: [34572, 17348, 6727],
                name: '电脑整机'
            }
        ]
    }
    myChart.setOption(option);
</script>
</body>
</html>

效果：

在这里插入图片描述

代码二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 1.导入ECharts的JS库 -->
    <script src="https://cdn.staticfile.org/echarts/5.2.0/echarts.js"></script>
    <title>配置语法分解</title>
</head>
<body>
<!-- 2.定义ECharts绘制区域 -->
<div id="main" style="width: 500px; height: 400px"></div>

<!-- 3.定义JS编写区域 -->
<script>
    <!-- 3.1 初始化ECharts图表 -->
    var myChart = echarts.init(document.getElementById("main"));

    <!-- 3.2 设置具体配置项和数据 -->
    var option = {
        // 定义标题或副标题
        title: {
            text: '蓝桥购电商平台',
        },
        tooltip: {},
        // 添加图列
        legend: {
            data: ['笔记本', '游戏本', '平板电脑']
        },
        xAxis : {
            data: ['电脑整机']
        },
        yAxis: {},
        series: [
            {
                type: 'bar',
                data: [34572],
                name: '笔记本'
            },
            {
                type: 'bar',
                data: [17348],
                name: '游戏本'
            },
            {
                type: 'bar',
                data: [6727],
                name: '平板电脑'
            }
        ]
    }
    myChart.setOption(option);
</script>
</body>
</html>

效果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

提交要求

  1. 文件名:姓名-学号(例如:张三-2022000004)
  2. 文件类型:PDF
  3. 内容标准:代码和效果截图
  4. 收集要求:各小组组长进行收集，然后提交给讲师I5.提交时间:2024年3月7日12:00
2.3 ECharts数据集

数据集(dataset)是专门用来管理数据的组件。虽然每个系列都可以
在series.data中设置数据，但是从ECharts4支持数据集开始，更推荐使用数据集来管理数据。因为这样，数据可以被多个组件复用,也方便进行“数据和其他配置”分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。

下列为需要可视化的数据集

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 绘制多柱状图
  • X周为周期
  • 图例为实验、测验、挑战
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 1.导入ECharts的JS库 -->
    <script src="https://cdn.staticfile.org/echarts/5.2.0/echarts.js"></script>
    <title>配置语法分解</title>
</head>
<body>
<!-- 2.定义ECharts绘制区域 -->
<div id="main" style="width: 750px; height: 400px"></div>

    <!-- 3.定义JS编写区域 -->
    <script>
        <!-- 3.1 初始化ECharts图表 -->
        var myChart = echarts.init(document.getElementById("main"));

        <!-- 3.2 设置具体配置项和数据 -->
        var option = {
            // 定义标题或副标题
            title: {
                text: '蓝桥云课完课率统计',
                subtext: '2023-2024学年第2学期'
            },
            tooltip: {},
            // 添加图列
            legend: {
                data: ['实验', '测试', '挑战']
            },
            xAxis : {
                type: 'category',  // 类目， 表示指定类目轴
                data: ['三月', '四月', '五月', '六月']
            },
            yAxis: {},
            series: [
                {
                    type: 'bar',
                    data: [82, 91, 85, 94],
                    name: '实验'
                },
                {
                    type: 'bar',
                    data: [84, 85, 90, 96],
                    name: '测试'
                },
                {
                    type: 'bar',
                    data: [81, 94, 77, 90],
                    name: '挑战'
                }
            ]
        }
        myChart.setOption(option);
    </script>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

优点:适于对一些特殊的数据结构(如“树"、“图”、超大数据）进行一定的数据类型定制。

缺点:常需要用户先处理数据，把数据分割设置到各个系列(和类目轴)中。

此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。

2.3.1 在数据集中设置数据

而数据设置在数据集(dataset)中，会有这些好处:

  • 能够贴近数据可视化常见思维方式:(1).提供数据，(2).指定数据到视觉的映射，从而形成图表
  • 数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。
  • 数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。
  • 支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。

下面是一个最简单的dataset的示例:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据集dataset</title>
    <script src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 900px; height: 400px"></div>
    <script>
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: '蓝桥云课完课率统计',
                subtext: '2023-2024学年第2学期'
            },
            tooltip: {},

            // 图例组件，默认就是对应到dataset第一行
            legend: {
            },
            dataset: {
                // 数据源
                source: [
                    ['周期', '实验', '测验', '挑战'],
                    ['三月', 82, 84, 81],
                    ['四月', 91, 85, 94],
                    ['五月', 85, 90, 77],
                    ['六月', 94, 96, 90]
                ]
            },
            // 声明类目轴为那个轴？
            xAxis: {
                // 必须设置，默认情况下，类目轴对应到dataset第一列
                type: 'category'
            },
            yAxis: {},
            series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
        }
        myChart.setOption(option);
    </script>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.3.2动手实践

根据下列数据，分别使用系列中设置数据和数据集中设置数据两种方式来进行绘制柱形图(40分钟)。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据集dataset</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 1100px; height: 500px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥购电商平台',
        },
        tooltip: {},

        // 图例组件，默认就是对应到dataset第一行
        legend: {},
        dataset: {
            // 数据源
            source: [
                ['产品', '一月', '二月', '三月', '四月', '五月', '六月'],
                ['笔记本', 1730, 1562, 3489, 4788, 6374, 4572],
                ['游戏本', 1874, 1347, 2817, 3329, 2313, 1248],
                ['平板电脑', 652, 794, 1033, 1201, 2044, 499],
                ['台式机', 423, 366, 729, 931, 649, 217],
                ['一体机', 779, 831, 1001, 717, 1246, 938],
                ['服务器', 246, 193, 476, 592, 423, 633]
            ]
        },
        // 声明类目轴为那个轴？
        xAxis: {
            // 必须设置，默认情况下，类目轴对应到dataset第一列
            type: 'category'
        },
        yAxis: {},
        series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}, {type: 'bar'}, {type: 'bar'}, {type: 'bar'},]
    }
    myChart.setOption(option);
</script>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.3.3 知识扩展(自行选学)-在数据集中利用对象数组格式设置数据
2.3.4 关于数据到图形的映射

数据可视化的一个常见思路是∶(1).提供数据，(2).指定数据到视觉的映射。简而言之，可以进行这些映射的设定:

  • 指定数据集的列(column)还是行（row)映射为系列(series)。这件事可以使用series.seriesLayoutBy属性来配置。默认是按照列(column)来映射。

  • 指定维度映射的规则:如何从 dataset的维度（一个“维度”的意思是一行/列)映射到坐标轴(如X、Y轴)、提示框(tooltip)、标签(label)、图形元素大小颜色等(visualMap)。这件事可以使用series.encode 属性，以及 visualMap组件来配置〈如果有需要映射颜色大小寺悦见维度的估)。上SE于中，没有给出这种映射配置，那么ECharts 就按最常见的理解进行默认映射︰X坐标轴声明为类目轴，默认情况下会自动对应到 dataset.source 中的第一列;三个柱图系列，—―对应到dataset.source 中后面每—列

高级应用扩展–把数据集dataset的行或列映射为系列series

有了数据表之后，使用者可以灵活地配置:数据如何对应到轴和图形系

用户可以使用seriesLayoutBy配置项,改变图表对于行列的理解。seriesLayoutBy可取值︰

  • ‘column’:默认值。系列被安放到dataset的列上面。‘row’:系列被安放到dataset的行上面。

  • column:默认值。系列被安放到dataset的列上面。

  • row:系列被安放到dataset的行上面。

动手编写下列的示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>把数据集dataset的行或列映射为系列series</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 900px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥云课完课率统计',
            subtext: '2023-2024学年第2学期'
        },
        tooltip: {},
        legend: {},
        dataset: {
            // 数据源
            source: [
                ['周期', '实验', '测试', '挑战'],
                ['三月', 82, 84, 81],
                ['四月', 91, 85, 94],
                ['五月', 85, 90, 77],
                ['六月', 94, 96, 90]
            ]
        },
        xAxis: [
            {type: 'category', gridIndex: 0},
            {type: 'category', gridIndex: 1}
        ],
        yAxis: [{gridIndex: 0}, {gridIndex: 1}],
        grid: [{bottom: '55%'}, {top: '55%'}],
        series: [
            //这几个系列会出现在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},

            //这几个系列会出现在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
        ],
    };
    myChart.setOption(option);
</script>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

第三章、ECharts柱状图

3.1住在组图基本概论

柱状图（(或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。设置柱状图的方式，是将series 的 type设为‘bar’。

在前面章节中基本都是使用的是单系列垂直状柱图和多系列垂直状柱图，在这里将不在过多的叙述和讲解。

3.1.1水平柱状图

水平柱状图其实比较简单就是将xAxis的数据添加到yAxis 中。原理就是告诉ECharts需要从y轴进行绘制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平柱状图</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 500px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥购电商销售平台',
            subtext: '生活居家类'
        },
        tooltip: {},
        legend: {
            data: ['女装系列', '男装系列']
        },
        xAxis: {

        },
        yAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        series: [
            {
                name: '女装系列',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            },
            {
                name: '男装系列',
                type: 'bar',
                data: [12, 10, 26, 21, 7, 18]
            }
        ]

    }
    myChart.setOption(option);
</script>

</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

**注意: **使用水平柱状图，第一个数据在最下面，最后—个数据在最上面。

3.1.2 动手实践
  1. 绘制水平柱状图世界与各国人口情况
  2. 根据下列数据进行操作(25分钟)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

代码一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平柱状图</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 550px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '世界人口统计(单位：万)',
        },
        tooltip: {},
        legend: {
            data: ['2011', '2012']
        },
        xAxis: {

        },
        yAxis: {
            data: ['全世界', '中国', '印度', '美国', '印尼', '巴西']
        },
        series: [
            {
                name: '2011',
                type: 'bar',
                data: [630230, 131744, 104970, 29030, 23489, 18203]
            },
            {
                name: '2012',
                type: 'bar',
                data: [681807, 134141, 121594, 31000, 23438, 19325]
            }
        ]

    }
    myChart.setOption(option);
</script>

</body>
</html>

代码二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据集dataset</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 550px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '世界人口统计(单位：万)',
        },
        tooltip: {},

        // 图例组件，默认就是对应到dataset第一行
        legend: {},
        dataset: {
            // 数据源
            source: [
                ['国家', '2011', '2012'],
                ['全世界', 630230, 681807],
                ['中国', 131744, 1347],
                ['印度', 104970, 121594],
                ['美国', 29030, 31000],
                ['印尼', 23489, 23438],
                ['巴西', 18203, 19325]
            ]
        },
        // 声明类目轴为那个轴？
        xAxis: {},
        yAxis: {
            type: 'category'
        },
        series: [{type: 'bar'}, {type: 'bar'}]
    }
    myChart.setOption(option);
</script>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.2 柱状图样式设置

柱条样式
柱条的样式可以通过series.itemStyle 设置，包括:

  • 柱条的颜色(color) ;
  • 柱条的描边颜色( bordercolor )、宽度（borderwidth ) 、样式( borderType );
  • 柱条圆角的半径(barBorderRadius ) ;·柱条透明度(opacity ) ;
  • 阴影( shadowBlur 、shadowColor 、shadowOffsetx、 shadowOffsetY )。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平柱状图</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 550px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥购电商销售平台',
            subtext: '生活居家类'
        },
        tooltip: {},
        legend: {
            data: ['女装系列']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {
        },
        series: [
            {
                name: '女装系列',
                type: 'bar',
                data: [
                    5,
                    20,
                    {
                        // 设置当前数据值
                        value: 36,
                        // 设置单个柱子的样式，itemStyle: {...具体的样式....}
                        itemStyle: {
                            // 设置柱子的颜色
                            color: 'red',
                            // 柱子的阴影
                            shadowColor: '#FF9966',
                            // 设置柱子阴影具体有左边的位置
                            shadowOffsetX: 3

                        }
                    },
                    10, 10, 20],
                // 设置所有柱子的样式
                itemStyle: {
                    // 设置柱子的边框圆角效果
                    barBorderRadius: 5,
                    // 设置边框的宽带
                    borderWidth: 3,
                    // 设置边框的样式
                    borderType: 'dashed',
                    // 设置边框的颜色
                    borderColor: '#ff0077'，
                    // 设置边框模糊度
                    shadowBlur: 10,
                    // 设置边框模糊颜色
                    shadowColor: '#000000'
                }
            }
        ]

    }
    myChart.setOption(option);
</script>

</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.3为柱形图添加背景颜色

有时，我们希望能够为柱条添加背景色。从ECharts 4.7.0版本开始，这一功能可以简单地用showBackground开启，并且可以通过backgroundstyle配置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景颜色</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 550px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥购电商销售平台',
            subtext: '生活居家类'
        },
        tooltip: {},
        legend: {
            data: ['女装系列']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {
        },
        series: [
            {
                name: '女装系列',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                // 表示是否显示 柱子的 背景色，默认为false
                showBackground: true,
                // 设置背景颜色的样式
                backgroundStyle: {
                    color: 'rgba(50, 150, 200, 0.3)'
                }
            }
        ]

    }
    myChart.setOption(option);
</script>

</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.4 动手实践
  1. 柱条添加背景色设置要求:红色(185)，绿色(170)，蓝色(155)，透明度(40%)
  2. 柱条圆角的半径:8，柱条描边宽度:2，柱条描边颜色:#990066,阴影颜色:#000000，阴影模糊度:15
  3. 完成时间:40分钟
  4. 根据下列数据，进行绘制水平或垂直多柱状图任选其一

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平柱状图</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 550px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥购电商销售平台',
            subtext: '生活居家类'
        },
        tooltip: {},
        legend: {
            data: ['女装系列']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {
        },
        series: [
            {
                name: '女装系列',
                type: 'bar',
                data: [
                    5,
                    20,
                    {
                        // 设置当前数据值
                        value: 36,
                        // 设置单个柱子的样式，itemStyle: {...具体的样式....}
                        itemStyle: {
                            // 设置柱子的颜色
                            color: 'red',
                            // 柱子的阴影
                            shadowColor: '#FF9966',
                            // 设置柱子阴影具体有左边的位置
                            shadowOffsetX: 3

                        }
                    },
                    10, 10, 20],
                // 设置所有柱子的样式
                itemStyle: {
                    // 设置柱子的边框圆角效果
                    barBorderRadius: 5,
                    // 设置边框的宽带
                    borderWidth: 3,
                    // 设置边框的样式
                    borderType: 'dashed',
                    // 设置边框的颜色
                    borderColor: '#ff0077',
                    // 设置边框模糊度
                    shadowBlur: 10,
                    // 设置边框模糊颜色
                    shadowColor: '#000000'
                }
            }
        ]

    }
    myChart.setOption(option);
</script>

</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

提交要求

  1. 文件名:姓名–学号(例如:张三-2022000004)
  2. 文件类型:PDF
  3. 2024年3月7日布置的所有动手实践
  4. 内容标准:代码和效果截图
  5. 收集要求∶各小组组长进行收集，然后提交给讲提交时间:2024年3月7日23:59:59之前
3.5 堆叠柱状图
3.5.1 垂直堆叠
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>堆叠柱状图</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 500px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥购电商销售平台',
            subtext: '生活居家类'
        },
        tooltip: {},
        legend: {
            data: ['女装系列', '男装系列']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '羽绒服', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
            {
                name: '女装系列',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                // 堆叠的轴向
                stack: 'x'
            },
            {
                name: '男装系列',
                type: 'bar',
                data: [12, 10, 26, 21, 7, 18],
                stack: 'x'
            }
        ]

    }
    myChart.setOption(option);
</script>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.5.1 水平堆叠
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>堆叠柱状图(水平)</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 500px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥购电商销售平台',
            subtext: '生活居家类'
        },
        tooltip: {},
        legend: {
            data: ['女装系列', '男装系列']
        },
        xAxis: {},
        yAxis: {
            data: ['衬衫', '羊毛衫', '羽绒服', '裤子', '高跟鞋', '袜子']
        },
        series: [
            {
                name: '女装系列',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                // 堆叠的轴向
                stack: 'y'
            },
            {
                name: '男装系列',
                type: 'bar',
                data: [12, 10, 26, 21, 7, 18],
                stack: 'y'
            }
        ]

    }
    myChart.setOption(option);
</script>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.6 动手实践
  1. 制堆叠柱状图蓝桥班各年级学生情况
  2. 根据下列数据进行操作(25分钟)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>堆叠柱状图</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 500px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥班年级学生统计',
        },
        tooltip: {},
        legend: {
            data: ['男', '女']
        },
        xAxis: {},
        yAxis: {
            data: ['2019级', '2020级', '2021级', '2022级', '2023级']
        },
        series: [
            {
                name: '男',
                type: 'bar',
                data: [56, 74, 79, 95, 97],
                // 堆叠的轴向
                stack: 'y'
            },
            {
                name: '女',
                type: 'bar',
                data: [28, 37, 45, 57, 61],
                stack: 'y'
            }
        ]

    }
    myChart.setOption(option);
</script>
</body>
</html>

效果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.7 高级柱形图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级图表</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 1100px; height: 600px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        // 图表背景颜色
        backgroundColor: '#EEEFFF',
        title: {
            text: '蓝桥购电商销售平台',
            textStyle: {
                color: '#f96'
            },
            subtext: '用户入口',
            subtextStyle: {
                color: '#bbb'
            },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其它']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            x: 'right',
            y: 'center',
            feature: {

                mark: { show: true },
                // 交互按钮图形
                magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled']},
                // 重置按钮
                restore: { show: true },
                // 下载按钮
                saveAsImage: { show: true }
            }
        },
        xAxis: [
            {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '直接访问',
                type: 'bar',
                data: [320, 332, 301, 334, 390, 330, 320],
            },
            {
                name: '邮件营销',
                type: 'bar',
                stack: '广告',
                data: [120, 132, 101, 134, 90, 230, 220]
            },
            {
                name: '联盟广告',
                type: 'bar',
                stack: '广告',
                data: [220, 182, 191, 234, 290, 330, 310],
            },
            {
                name: '视频广告',
                type: 'bar',
                stack: '广告',
                data: [150, 232, 201, 154, 190, 330, 3410],
            },
            {
                name: '搜索引擎',
                type: 'bar',
                data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                markLine: {
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                    },
                    data: [
                        [{type: 'min'}, {type: 'max'}]
                    ]
                }
            },
            {
                name: '百度',
                type: 'bar',
                barWidth: 5,
                stack: '搜索引擎',
                data: [620, 732, 701, 734, 1090, 1130, 1120],
            },
            {
                name: '谷歌',
                type: 'bar',
                stack: '搜索引擎',
                data: [120, 132, 101, 134, 290, 230, 220],
            },
            {
                name: '必应',
                type: 'bar',
                stack: '搜索引擎',
                data: [60,72, 71, 74, 190, 130,120],
            },
            {
                name: '其它',
                type: 'bar',
                stack: '搜索引擎',
                data: [62, 82, 91, 84, 190, 110, 120],
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.8 大规模柱状数据选取范围性查看
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/echarts.js"></script>
    <title>大规模柱状数据选取范围性查看</title>
</head>
<body>
<div id="main" style="width: 900px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    const dataCount = 1000000;
    const data = generateData(dataCount)

    option = {
        title:{
            text:'1000000条随机产生数据',
        },
        tooltip:{},
        dataZoom:[
            {
                type:'slider'
            }
        ],
        xAxis:{
            data:data.categoryData,
        },
        yAxis:{},
        series:[
            {
                type:'bar',
                data:data.valueData
            }
        ],
        large: true
    };
    // 模拟数据
    function generateData(count) {
        let baseValue = Math.random() * 1000;
        let time = +new Date(2011, 0, 1);
        let smallBaseValue;
        function next(idx) {
            smallBaseValue =
                idx % 30 === 0
                    ? Math.random() * 700
                    : smallBaseValue + Math.random() * 500 - 250;
            baseValue += Math.random() * 20 - 10;
            return Math.max(0, Math.round(baseValue + smallBaseValue) + 3000);
        }
        const categoryData = [];
        const valueData = [];
        for (let i = 0; i < count; i++) {
            categoryData.push(
                echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', time, false)
            );
            valueData.push(next(i).toFixed(2));
            time += 1000;
        }
        return {
            categoryData: categoryData,
            valueData: valueData
        };
    }
    myChart.setOption(option);
</script>

</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

第四章、ECharts 折线图

4.1 最简单的折线图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最简单的折线图</title>
    <script src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 800px; height: 400px"></div>
    <script>
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: '蓝桥云课学习有效时长统计',
                subtext: '2024月4日至3月8日'
            },
            tooltip: {},
            legend: {
                data: ['张三']
            },
            xAxis: {
                data: ['周一', '周二', '周三', '周四', '周五']
            },
            yAxis: {},
            series: [
                {
                    name: '张三',
                    type: 'line',
                    data: [108, 45, 117, 29, 167]
                }
            ]
        }
        myChart.setOption(option)
    </script>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.2 动手实践

1．完成时间:20分钟
2．根据下列数据，绘制折线图

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最简单的折线图</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥购电商平台',
        },
        tooltip: {},
        legend: {
            data: ['笔记本']
        },
        xAxis: {
            data: ['一月', '二月', '三月', '四月', '五月', '六月']
        },
        yAxis: {},
        series: [
            {
                name: '笔记本',
                type: 'line',
                data: [1730, 1562, 3489, 4788, 6374, 4572]
            }
        ]
    }
    myChart.setOption(option)
</script>
</body>
</html>

效果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.3 堆叠折线图

与堆叠柱状图类似，堆叠折线图也是用系列的stack设置哪些系列堆叠在一起。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>堆叠折线图</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥云课学习有效时长统计',
            subtext: '2024月4日至3月8日'
        },
        tooltip: {},
        legend: {
            data: ['张三', '李四', '王五']
        },
        xAxis: {
            data: ['周一', '周二', '周三', '周四', '周五']
        },
        yAxis: {},
        series: [
            {
                name: '张三',
                type: 'line',
                data: [108, 45, 117, 29, 167],
                stack: 'x'
            },
            {
                name: '李四',
                type: 'line',
                data: [78, 56, 79, 43, 123],
                stack: 'x'
            },
            {
                name: '王五',
                type: 'line',
                data: [142, 92, 62, 86, 236],
                stack: 'x'
            }
        ]
    }
    myChart.setOption(option)
</script>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.4 动手实践

1.完成时间:30分钟
2．根据下列数据，绘制堆叠折线图

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>堆叠折线图</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥云购电商平台',
        },
        tooltip: {},
        legend: {
            data: ['笔记本', '游戏本', '平板电脑', '台式机']
        },
        xAxis: {
            data: ['一月', '二月', '三月', '四月', '五月', '六月']
        },
        yAxis: {},
        series: [
            {
                name: '笔记本',
                type: 'line',
                data: [1730, 1562, 3489, 4788, 6374, 4572],
                stack: 'x'
            },
            {
                name: '游戏本',
                type: 'line',
                data: [1874, 1347, 2817, 3329, 2313, 1248],
                stack: 'x'
            },
            {
                name: '平板电脑',
                type: 'line',
                data: [652, 794, 1033, 1201, 2044, 499],
                stack: 'x'
            },
            {
                name: '台式机',
                type: 'line',
                data: [423, 366, 729, 931, 649, 217],
                stack: 'x'
            }
        ]
    }
    myChart.setOption(option)
</script>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.5 设置区域填充色

但是不同的是，如果不加说明的话，我们很难判断出这是一个堆叠折线图，还是一个普通的折线图。所以，对于堆叠折线图而言，一般建议使用区域填充色以表明堆叠的情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区域填充色</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥云课学习有效时长统计',
            subtext: '2024月4日至3月8日'
        },
        tooltip: {},
        legend: {
            data: ['张三', '李四', '王五']
        },
        xAxis: {
            data: ['周一', '周二', '周三', '周四', '周五']
        },
        yAxis: {},
        series: [
            {
                name: '张三',
                type: 'line',
                data: [108, 45, 117, 29, 167],
                stack: 'x',
                // 设置区域填充色
                areaStyle: {}
            },
            {
                name: '李四',
                type: 'line',
                data: [78, 56, 79, 43, 123],
                stack: 'x',
                areaStyle: {}
            },
            {
                name: '王五',
                type: 'line',
                data: [142, 92, 62, 86, 236],
                stack: 'x',
                areaStyle: {}
            }
        ]
    }
    myChart.setOption(option)
</script>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.6 区域面积图

区域面积图将折线到坐标轴的空间设置背景色，用区域面积表达数据。相比普通的折线图，区域面积图的视觉效果更加饱满丰富，在系列不多的场景下尤其适用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区域面积图</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥云课学习有效时长统计',
            subtext: '2024月4日至3月8日'
        },
        tooltip: {},
        legend: {
            data: ['张三', '李四', '王五']
        },
        xAxis: {
            data: ['周一', '周二', '周三', '周四', '周五']
        },
        yAxis: {},
        series: [
            {
                name: '张三',
                type: 'line',
                data: [108, 45, 117, 29, 167],
                // 设置区域填充色
                areaStyle: {}
            },
            {
                name: '李四',
                type: 'line',
                data: [78, 56, 79, 43, 123],
                areaStyle: {
                    color: '#ffff00'
                }
            },
            {
                name: '王五',
                type: 'line',
                data: [142, 92, 62, 86, 236],
                areaStyle: {
                    color: '#ff0000',
                    opacity: 0.5
                }
            }
        ]
    }
    myChart.setOption(option)
</script>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.7 动手实践

1．完成时间:15分钟
2.根据下列数据，绘制堆叠区域填充色折线图

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区域填充色</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 300px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥购电商平台',
        },
        tooltip: {},
        legend: {
            data: ['笔记本', '游戏本', '平板电脑', '台式机']
        },
        xAxis: {
            data: ['一月', '二月', '三月', '四月', '五月', '六月']
        },
        yAxis: {},
        series: [
            {
                name: '笔记本',
                type: 'line',
                data: [1730, 1562, 3489, 4788, 6374, 4572],
                stack: 'x',
                // 设置区域填充色
                areaStyle: {}
            },
            {
                name: '游戏本',
                type: 'line',
                data: [1874, 1347, 2817, 3329, 2313, 1248],
                stack: 'x',
                areaStyle: {}
            },
            {
                name: '平板电脑',
                type: 'line',
                data: [652, 794, 1033, 1201, 2044, 499],
                stack: 'x',
                areaStyle: {}
            },
            {
                name: '台式机',
                type: 'line',
                data: [423, 366, 729, 931, 649, 217],
                stack: 'x',
                areaStyle: {}
            }
        ]
    }
    myChart.setOption(option)
</script>
</body>
</html>

效果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1．完成时间:30分钟
2.根据下列数据,绘制区域面积图外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区域面积图</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 300px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥购电商平台',
        },
        tooltip: {},
        legend: {
            data: ['笔记本', '游戏本', '平板电脑', '台式机']
        },
        xAxis: {
            data: ['七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {},
        series: [
            {
                name: '笔记本',
                type: 'line',
                data: [2347, 1767, 4217, 5322, 5673, 1796],
                // 设置区域填充色
                areaStyle: {}
            },
            {
                name: '游戏本',
                type: 'line',
                data: [2027, 1532, 3044, 3151, 3402, 2033],
                areaStyle: {}
            },
            {
                name: '平板电脑',
                type: 'line',
                data: [1032, 1142, 1417, 1527, 2623, 643],
                areaStyle: {
                    color: '#ff0000',
                    opacity: 0.5
                }
            },
            {
                name: '台式机',
                type: 'line',
                data: [547, 452, 912, 1026, 773, 328],
                areaStyle: {}
            }
        ]
    }
    myChart.setOption(option)
</script>
</body>
</html>

效果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.8 平滑曲线图

平滑曲线图也是折线图的一种变形，这种更柔和的样式也是一种不错的视觉选择。使用时，只需要将折线图系列的 smooth属性设置为true即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平滑曲面图</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥云课学习有效时长统计',
            subtext: '2024月4日至3月8日'
        },
        tooltip: {},
        legend: {
            data: ['张三']
        },
        xAxis: {
            data: ['周一', '周二', '周三', '周四', '周五']
        },
        yAxis: {},
        series: [
            {
                name: '张三',
                type: 'line',
                data: [108, 45, 117, 29, 167],
                // smooth 变送是否为曲面效果，默认为：false(否)
                smooth: true
            }
        ]
    }
    myChart.setOption(option)
</script>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.9 动手实践

1．完成时间:20分钟
2.根据下列数据，绘制平滑曲面图

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平滑曲面图</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 300px"></div>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '蓝桥购电商平台',
        },
        tooltip: {},
        legend: {
            data: ['笔记本', '游戏本', '平板电脑', '台式机']
        },
        xAxis: {
            data: ['七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {},
        series: [
            {
                name: '笔记本',
                type: 'line',
                data: [2347, 1767, 4217, 5322, 5673, 1796],
                smooth: true
            },
            {
                name: '游戏本',
                type: 'line',
                data: [2027, 1532, 3044, 3151, 3402, 2033],
                smooth: true
            },
            {
                name: '平板电脑',
                type: 'line',
                data: [1032, 1142, 1417, 1527, 2623, 643],
                smooth: true
            },
            {
                name: '台式机',
                type: 'line',
                data: [547, 452, 912, 1026, 773, 328],
                smooth: true
            }
        ]
    }
    myChart.setOption(option)
</script>
</body>
</html>

效果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

提交要求

  1. 文件名:姓名–学号(例如︰张三-2022000004)

  2. 文件类型:PDF

  3. 2024年3月8日布置的所有动手实践(一共是5个，从堆叠柱状图开始)

  4. 内容标准:代码和效果截图

  5. 收集要求:各小组组长进行收集，然后提交给讲师

  6. 提交时间:2024年3月10日23:59:59之前

说明:接下来时间小朋友们进行巩固复习本周开始学生的所有ECharts的相关知识点。

数据运用与分析

2024.04.20饼图

In [2]:

import matplotlib.pyplot as plt
import numpy as np

plt.rcParams['font.sans-serif'] = 'SimHei'

# 准备数据

data = np.array([20, 50, 10, 15, 30, 55])
pie_labels = np.array(['A', 'B', 'C', 'D', 'E', 'F'])

# startangle 设置饼图的起始角度 默认是3点钟方向
# counterclock 设置旋转方向 默认是True
# autopct 显示每一部分所占百分比
# shadow 设置饼图的阴影 默认False
# pctdistance 设置百分比值与饼图中心的距离 默认为0.6
# labeldistance 设置标签与饼图中心的距离 默认为1.1
# wedgeprops 设置圆环的宽度
plt.pie(data, radius=1, labels=pie_labels, startangle=180, counterclock=False,
        autopct='%.2f%%', shadow=True, pctdistance=0.8, labeldistance=1.2,
        wedgeprops={'width': 0.6} )
plt.show()

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2024.04.20支付宝数据饼图

In [3]:

import matplotlib.pyplot as plt
import numpy as np

plt.rcParams['font.sans-serif'] = 'SimHei'

# 准备数据

data = np.array([800, 100, 1000, 200, 300, 200, 200, 200])
pie_labels = np.array(['购物', '人情往来', '餐饮美食', '通讯物流', '生活日用', '交通出行', '休闲娱乐', '其他'])
div = [0, 0, 0, 0, 0.2, 0, 0, 0.2]

# startangle 设置饼图的起始角度 默认是3点钟方向
# counterclock 设置旋转方向 默认是True
# autopct 显示每一部分所占百分比
# shadow 设置饼图的阴影 默认False
# pctdistance 设置百分比值与饼图中心的距离 默认为0.6
# labeldistance 设置标签与饼图中心的距离 默认为1.1
# wedgeprops 设置圆环的宽度
plt.pie(data, radius=1, labels=pie_labels, startangle=180, counterclock=False,
        autopct='%.2f%%', shadow=True, pctdistance=0.8, labeldistance=1.1,
        wedgeprops={'width': 0.8}, explode=div)
plt.show()

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2024.04.20散点图

In [4]:

import matplotlib.pyplot as plt
import numpy as np

plt.rcParams['font.sans-serif'] = 'SimHei'

# 准备数据
num = 100
# 生成0-1的随机数
x = np.random.rand(num)
y = np.random.rand(num)
y2 = np.random.rand(num)

area = (10 * np.random.rand(num)) * 2

# c 散点颜色
# alpha 透明度
# marker 设置散点的形状
# linewidths 设置散点边框的宽度
# edgecolors 设置边框颜色

plt.scatter(x, y, c='red', alpha=0.5, s=area, linewidths=2, edgecolors='g')
plt.scatter(x, y2, c='yellow', alpha=0.6, marker='d')
# print(x)
plt.show()

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2024.04.20汽车速度与制动距离散点图

In [5]:

import matplotlib.pyplot as plt
import numpy as np

plt.rcParams['font.sans-serif'] = 'SimHei'
# 准备数据
num = 100
# 生成0-1的随机数
x = np.arange(10, 210, 10)
y = np.array([0.5, 2.0, 4.4, 7.9, 12.3,
              17.5, 24.1, 31.5, 39.9, 48.2,
              59.5, 70.8, 83.1, 96.4, 110.7,
              126.0, 142.2, 159.4, 177.6, 196.8])

plt.scatter(x, y, c='b', marker='s', alpha=0.3, edgecolors='y')
plt.title('汽车速度与制定距离散点图')
plt.xlabel('速度km/h')
plt.ylabel('制动距离m')
plt.show()

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2024.04.20坐标图图表

In [6]:

import matplotlib.pyplot as plt
import numpy as np

plt.figure(figsize=(20, 6), dpi=80)
plt.rcParams['font.sans-serif'] = ['SimHei']
plt.rcParams['axes.unicode_minus'] = False

x = np.linspace(-np.pi, np.pi, 256, endpoint=True)
y1, y2 = np.sin(x), np.cos(x)
plt.plot(x, y1, x, y2)
# print(x)

# 设置坐标轴标签
plt.xlabel("x轴", labelpad=10)
plt.ylabel("y轴")

#  设置坐标轴刻度范围
plt.xlim(x.min() * 1.5, x.max() * 1.5)
plt.ylim(-1.5, 1.5)

# 设置刻度标签
plt.xticks([-np.pi, -np.pi/2, 0, np.pi/2, np.pi],
           [r'$-\pi$', r'$-\pi/2$', 0, r'$\pi/2$', r'$\pi$'],
           rotation=45)

# rotation='vertical'
# 添加标题
plt.title("正弦曲线与余弦曲线", loc="center", pad=20)

# 添加图例
plt.legend(['正弦', '余弦'], title='图例', loc='upper left',
           shadow=True, fancybox=True, ncol=2)

plt.show()

![img](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABRQAAAHcCAYAAACnEiYiAAAAOXRFWHRTb2Z0d2FyZQBNYXRwbG90bGliIHZlcnNpb24zLjUuMiwgaHR0cHM6Ly9tYXRwbG90bGliLm9yZy8qNh9FAAAACXBIWXMAAAxOAAAMTgF/d4wjAACYXUlEQVR4nOzdZ3iU1f718e9Mei8ECBB67z1AkKr0Jh2kSFMBUY+oqEfsWLBgR1CqgkoVROkd6S303gMESEJ6nfK8GOV/eKREhdyTZH2uKxeQ3Mms

巐癈瞓攞
关注
echarts
Garbrielle的博客
12-29 228
echarts使用过程中的问题 echarts首屏渲染的宽度获取 echarts渲染图文模糊
ECharts社区 合集整理
sanghongxv的博客
07-08 5万+
持续更新......
在Vue项目中引入 ECharts 3D 路径图 Flights GL（需安装echarts、echarts-gl、jQuery依赖，已踩坑）
热门推荐
商务合作 | 共同学习 | 携手共进
01-05 9万+
在Vue项目中引入 echarts 3D 路径图 Flights GL； echarts依赖包的下载方式； echarts-gl依赖包的下载方式； jQuery依赖包的下载方式；
echarts下载
HenryXun的博客
11-16 6764
关于echarts下载，官网上有三种方法，我这里推荐使用第三种方法：选择需要的模块，在线定制下载。 可以自由选择需要的图表、坐标系、组件进行打包下载。 这里我选择的是5.2.2版本，并且选择了所有的图表、坐标系、组件，其他选项中包括的SVG渲染、兼容IE8、工具集和代码压缩都选择了，可谓是真全呐，哈哈~~~ 选择下载后，会loading一会儿，最后得到一份echarts.min.js文件 完成了，操作很方便。 ...
echarts-doc
01-26
"echarts-doc" 是ECharts的官方文档，包含详细的API、教程、示例和指南，是学习和使用ECharts不可或缺的资源。 在"echarts-doc-master"这个压缩包中，我们可以预期找到以下关键知识点： 1. **ECharts基本概念**：...
ECharts2.2.7版本
04-23
ECharts 2.2.7 是一个基于 JavaScript 的开源可视化库，用于构建交互式的数据可视化图表。它由百度前端技术部开发和维护，提供了丰富的图表类型、灵活的配置选项和强大的交互功能，可以轻松地创建各种各样的图表，...
echarts文档离线
10-10
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，以及强大的交互功能和自定义选项，广泛应用于Web应用的数据展示。"echarts文档离线"指的是将...
echarts 全国地图json数据
08-25
ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，精美的图表效果，便捷的配置项和API，能够满足各种数据可视化需求。在这个“echarts全国地图json数据”中，我们主要讨论的是...
初识Maven：Java项目管理工具
weixin_74755698的博客
09-11 1200
Maven是专门用于管理和构建Java项目的工具，他的主要功能有：1. 提供了一套标准化的项目结构所有的IDE使用Maven都可以构建出统一目录结构的项目。2. 提供了一套标准化的构建流程在一两个文件的时候觉得还可以，但是在整个大型web项目的时候，根本不可能一个个去搞，Maven提供了一套标准化的构建流程，可以一键打包，非常简单方便。3. 提供了一套依赖管理机制依赖管理，用python的方式就是导包，Maven在管理依赖的时候直接在xml文件中导入就可以了～
Gradle和Maven
宋发元
09-12 495
Gradle 是一个功能强大且灵活的构建工具，它的声明式构建脚本、依赖管理、插件系统以及对多语言支持的特性，使其成为现代软件开发中不可或缺的工具，特别是在 Java 和 Android 开发领域。
Maven 的多种打jar包方式详细介绍、区别及使用教程——附使用命令
最新发布
qq_42631788的博客
09-12 796
标准 JAR: 适合在依赖项已经被管理的环境中使用，需要手动指定类路径。可执行 JAR: 简化运行过程，但不包含所有依赖项，适合分发给用户。Uber JAR: 包含所有依赖项，便于在无外部依赖的环境中运行，但文件较大。: 包含所有依赖和 Spring Boot 特性，适合 Spring Boot 项目，简化了运行和部署。根据项目需求和目标环境选择合适的打包方式，可以提高开发效率和部署灵活性。希望对你有所帮助，若有问题欢迎指正~😊。
maven中的仓库的配置与优先级
进击的豌豆的博客
09-11 405
但是有一种情况除外，就是mirror中代理了central仓库，那么如果代理。的 mirror中没有，则会找代理的central仓库。，则该配置优先级最高，其他的都不会走了。mirror中一旦代理了。
Java项目: 基于SpringBoot+mysql+maven房屋租赁系统(含源码+数据库+毕业论文)
weixin_43860634的博客
09-06 854
Java项目: 基于SpringBoot+mysql+maven房屋租赁系统(含源码+数据库+毕业论文)
MAVEN如何导入项目
一条大河
09-12 287
3，如果没有maven面板，可以选择view->Appearnce->Tool Window Bars。工作中经常需要导入他人的项目，那么如何导入呢？2，选中对应项目的pom.xml，双击即可。1， 选择Maven面板，点+
MAVEN创建WEB项目
一条大河
09-11 367
测试使用MAVEN创建WEB项目。
maven父子工程多模块如何管理统一的版本号？
HBLOG
09-11 298
maven父子工程多模块，每个模块还都可以独立存在，子模块往往通常希望和父工程保持一样的版本，如果每个工程单独定义版本号，后期变更打包也非常麻烦，如何维护一个全局的版本号呢？基于以上操作，每次版本号变更，只需要修改父模块POM文件中的。
maven中不同的scope有什么作用？
m0_72926194的博客
09-11 181
不同scope的作用
ECharts图表库开发手册
"ECharts开发手册，提供ECharts的入门教程和详细文档，涵盖了各种图表类型和交互组件，适用于PC和移动设备，支持多种浏览器。" ECharts是一个强大的JavaScript图表库，设计用于创建商业级的数据可视化图表。它能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

巐癈瞓攞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值