Echarts可视化教程（三）——折线图的绘制

阶梯图是一种比较特殊的折线图，阶梯图使用间歇型跳跃的方式显示一种无规律的数据的变化。我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！之间补充代码，这段代码由上面的堆积折线图示例代码修改而来，你需要补充完这段代码，实现将所有的四条折线都改成阶梯图：其中地铁。同时我们将展示你生成的图像

文章共3,824字 · 阅读需要大约13分钟

一键AI生成摘要，助你高效阅读

问答

fh8uuc

4053人浏览 · 2023-10-21 16:35:49

fh8uuc · 2023-10-21 16:35:49 发布

任务描述

本关任务：按照要求绘制阶梯图。

相关知识

本关将介绍Echart中折线图的绘制，包括标准折线图、堆积折线图等。

折线图有多个变种，包括堆积折线图、堆积面积图、阶梯图等。

学习本关之前，请按照顺序先学习Echarts系列的前两个实训。

标准折线图

标准折线图是最通用的一种折线图，如下所示是一个示例：

图 1

图 1 标准折线图

其中x轴表示数据项，因为折线图通常用来表示一个数据随时间的变化情况，所以x轴最常见的数据项是时间。

y轴用来表示数据的值。

如果你顺序学习过前面的教程，就会发现折线图的绘制和柱状图几乎一模一样，区别是series中的type属性的值是line，而柱状图是bar。

绘制最简单的标准折线图的代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>

<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<body>

<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: '某商场一周客流人数的折线图' //柱状图标题
},
tooltip: {}, //工具框
legend: {
data:['客流量'] //图例
},
xAxis: {
name: "时间",//x轴标题
data: ["星期一","星期二","星期三","星期四","星期五","星期六", "星期日"]//x轴每一行的内容
},
yAxis: {
name:"客流量"//y轴标题
},
series: [{//数据内容
name: '销量',//数据名称
type: 'line',//数据形式，line表示折线图
data: [1150, 1220, 1226, 1410, 1960, 2940, 2820],//数据
itemStyle: {
normal: {
// 拐点上显示数值
label : {
show: true
},
lineStyle:{
// 设置线的颜色和透明度
color: 'rgba(23,244,109,1)'
}
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

上面的每一行代码都给出了注释，总的来说，绘制折线图分为如下几个步骤：

准备一个dom元素用来放置柱状图；
使用Option设置折线图的内容；
通过setOption显示柱状图。

其中第二步是最核心的，在这一步中，我们通过设置折线图的横轴、纵轴、图例、数据内容等来绘制折线图。

最终绘制出的折线图如下所示：

图 1

图 2 标准折线图绘制结果

阶梯图

阶梯图是一种比较特殊的折线图，阶梯图使用间歇型跳跃的方式显示一种无规律的数据的变化。图像呈现阶梯状而不是折线。这种图像通常用于某些在经过一次变化之后会稳定一段时间的数据，比如汽油的价格。如下是一个阶梯图的例子：

图 1

图 3 阶梯图

阶梯图的画法和标准折线图几乎一模一样，唯一的区别是阶梯图在series中需要给每一列数据设置属性step，且属性的值需要从start、middle和end中选择一个，分别表示横轴每一项的中点在阶梯的开始、中间还是结尾处，如下是官网给出的示例图：

图 1

图 4 step的不同取值对应的阶梯图

所以，阶梯图的程序如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>

<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<body>

<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: '国内油价走势图' //柱状图标题
},
tooltip: {}, //提示框
legend: {
data:['油价'] //图例
},
xAxis: {
name: "时间",//x轴标题
data: ["2012年3月","2012年4月","2012年5月","2012年6月","2012年7月","2012年8月", "2012年9月"]//x轴每一行的内容
},
yAxis: {
name:"油价"//y轴标题
},
series: [{//数据内容
name: '销量',//数据名称
type: 'line',//数据形式，bar表示柱状图
step: 'end',
data: [7.1, 7.3, 7.3, 6.9, 7.2, 7.2, 7.5],//数据
itemStyle: {
normal: {
// 拐点上显示数值
label : {
show: true
},
lineStyle:{
// 设置线的颜色和透明度
color: 'rgba(123,244,9,1)'
}
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

这段程序最终的效果就是上面的图3，这里我不再重复的给出。

堆积折线图

堆积折线图和堆积柱状图一模一样，区别是series中的type需要从bar改成line，我们把柱状图实训的堆积柱状图程序搬运过来，改一下type参数即可，其程序如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>

<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<body>

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title : {
text : "杭州地铁客流情况"//标题
},
tooltip : {
},
legend: {
data:['1号线', '2号线','4号线','5号线']//图例
},
xAxis : [
{
type : 'category',//表示x轴的每一项由几组数据组成
data : ['周一','周二','周三','周四','周五','周六','周日']//x轴标题
}
],
yAxis : [
{
type : 'value'//每一项都是数据
}
],
series : [
{
name:'1号线',//数据的名字
type:'line',//表示柱状图
stack: '总量',//数据系列的名字，stack相同的数据才会堆到一个柱子上
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
data:[37, 35, 38, 36, 37, 45, 48]//数据
},
{
name:'2号线',
type:'line',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[47, 48, 47, 46, 48, 59, 57]
},
{
name:'4号线',
type:'line',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[32, 33, 32, 34, 35, 40, 42]
},
{
name:'5号线',
type:'line',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[61, 63, 61, 62, 63, 75, 76]
}
]
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

画出来的堆积折线图如下所示：

图 1

图 5 堆积折线图

编程要求

根据提示，在右侧编辑器Begin和End之间补充代码，这段代码由上面的堆积折线图示例代码修改而来，你需要补充完这段代码，实现将所有的四条折线都改成阶梯图：其中地铁1号线和4号线需要改成横轴每一项的中点在阶梯的开始处，地铁2号线和5号线需要改成横轴每一项的中点在阶梯的结尾处。

测试说明

我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！”

同时我们将展示你生成的图像和正确的图像，你可以通过观察图像的方式修改自己尚未通过的代码。

测试输入：预期输出：图像对比一致，恭喜通关！

代码文件如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
	<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
        title : {
            text : "杭州地铁客流情况"//标题
        },
        tooltip : {
        },
        legend: {
            data:['1号线', '2号线','4号线','5号线']//图例
        },
        xAxis : [
          {
              type : 'category',//表示x轴的每一项由几组数据组成
              data : ['周一','周二','周三','周四','周五','周六','周日']//x轴标题
          }
        ],
        yAxis : [
          {
              type : 'value'//每一项都是数据
          }
        ],
        series : [
             {
                 name:'1号线',//数据的名字
                 type:'line',//表示柱状图
                 stack: '总量',//数据系列的名字，stack相同的数据才会堆到一个柱子上
                 /********* Begin *********/
                    step:'start',

                 /********* End *********/
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
                 data:[37, 35, 38, 36, 37, 45, 48]//数据
             },
             {
                 name:'2号线',
                 type:'line',
                 stack: '总量',
                 /********* Begin *********/
                 step:'end',

                 /********* End *********/
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                 data:[47, 48, 47, 46, 48, 59, 57]
             },
             {
                 name:'4号线',
                 type:'line',
                 stack: '总量',
                 /********* Begin *********/
                    step:'start',

                 /********* End *********/
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                 data:[32, 33, 32, 34, 35, 40, 42]
             },
             {
                 name:'5号线',
                 type:'line',
                 stack: '总量',
                 /********* Begin *********/
                 step:'end',

                 /********* End *********/
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                 data:[61, 63, 61, 62, 63, 75, 76]
             }
         ]
    });

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

    </script>
</body>
</html>

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

【目标检测】目标检测的一些常用神经网络模型及方法

我的阶段性总结????文章目录1.概述1.2 目标检测的任务1.3 目标检测的分类2.R-CNN系列2.1 [R-CNN（Region with CNN features）](https://arxiv.org/pdf/1311.2524.pdf)2.2 [Fast R-CNN](https://www.cv-foundation.org/openaccess/content_iccv_2015/