Echarts可视化教程（五）——直角坐标系下的网格和坐标轴

我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！在学习了柱状图、柱状图、饼状图的画法之后，我们还需要对图像上的辅助组件做进一步的了解，包括坐标轴、图例、工具等。同时我们将展示你生成的图像和正确的图像，你可以通过观察图像的方式修改自己尚未通过的代码。中的网格是直角坐标系下定义网格布局

fh8uuc

3417人浏览 · 2023-10-21 16:43:18

fh8uuc · 2023-10-21 16:43:18 发布

任务描述

本关任务：按照要求设置网格和坐标轴。

相关知识

在学习了柱状图、柱状图、饼状图的画法之后，我们还需要对图像上的辅助组件做进一步的了解，包括坐标轴、图例、工具等。

本关将介绍坐标轴的相关知识。

直角坐标系下的网格

Echarts中的网格是直角坐标系下定义网格布局和大小及颜色的组件。用于定义直角坐标系的整体布局。

网格有很多属性，我们分两部分来看，第一部分是有关网格位置和大小的属性，如下所示：

参数	默认值	含义
x	80	直角坐标系内绘制出来的图的左上角的x轴坐标
y	60	直角坐标系内绘制出来的图的左上角的y轴坐标
x2	80	直角坐标系内绘制出来的图右下角的x轴坐标
y2	0	直角坐标系内绘制出来的图的右下角的y轴坐标
width	适应	直角坐标系内绘制出来的图的宽度
height	适应	直角坐标系内绘制出来的图的高度

因为我们绘制出来的柱状图、柱状图都是在一个矩形区域内的，所以要指定区域的位置和坐标，上面六个参数就是起这个作用，如下所示是这些参数在坐标轴上的表示：

图 1

图 1 坐标轴

可以看到，当指定了width和height的值，x2和y2便会自动计算出来，无需再指定。

第二部分有有关颜色等的属性，如下：

参数	默认值	含义
backgroundColor	'transparent'	背景颜色
borderWidth	1	网格的边框线的宽度
borderColor	'#ccc'	网格的边框线的颜色

来看一个具体的例子加深理解：

<!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({
grid: {
show: true,
x: 40,
y: 50,
width: '90%',
height: '60%',
backgroundColor: '#66ffff',
borderWidth: 2,
borderColor: '#6666ff'
},
title : {
text : "杭州地铁1号线客流情况"//标题
},
tooltip : {
},
legend: {
data:['1号线']//图例
},
xAxis : [
{
type : 'category',//表示x轴的每一项由几组数据组成
data : ['周一','周二','周三','周四','周五','周六','周日']//x轴标题
}
],
yAxis : [
{
type : 'value'//每一项都是数据
}
],
series : [
{
name:'1号线',//数据的名字
type:'line',//表示柱状图
stack: 'stack1',//数据系列的名字，stack相同的数据才会堆到一个柱子上
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
data:[37, 35, 38, 36, 37, 45, 48]//数据
}
]
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

可以看到，上面提到的所有属性都是在grid组件中设置，它就是网格的意思。

最终的效果如下所示：

图 1

图 2 设置网格组件

直角坐标系下的坐标轴

坐标轴分为横轴，又叫x轴，对应xAxis；和纵轴，又叫y轴，对应yAxis。横轴和纵轴都有三种类型的坐标轴（用type指定）：

类目型，通常横轴使用，使用data属性设置类目列表，比如某购物中心各门店销量统计图，则类目列表就是门店的名字列表。
数值型，就是数字，通常纵轴使用。
时间型，多见于纵轴，与数值型类似，只是显示效果不同，以时间的格式显示。

一般来说，坐标轴的属性和其类型有关，不同类型的坐标轴属性不同，但是也有一些公共的属性，如下：

参数	默认值	含义
type	横轴为`category`，纵轴为`value`	`category`、`value`、`time`分别表示类目、数值和时间
show	true	是否显示坐标轴
name	''	坐标轴名称
nameLocation	'end'	坐标轴名字的位置
data	类目列表	[]

来看一个具体的例子：

<!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({
grid: {
x:140,
y:50
},
title : {
text : "某商场各门店一周销售额",//标题
left:'center'
},
tooltip : {
},
legend: {
orient: 'vertical',
x:10,
y:10,
data:['优衣库', '海底捞', '肯德基', '小米之家', '李宁']//图例
},
xAxis : [
{
show : true,
name: '星期',
nameLocation: 'start',
type : 'category',//表示x轴的每一项由几组数据组成
data : ['周一','周二','周三','周四','周五','周六','周日']//x轴标题
}
],
yAxis : [
{
show : true,
name: '销量（万元）',
nameLocation: 'start',
type : 'value'//每一项都是数据
}
],
series : [
{
name:'优衣库',//数据的名字
type:'line',//表示柱状图
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
data:[33, 35, 38, 36, 35, 45, 48]//数据
},
{
name:'海底捞',//数据的名字
type:'line',//表示柱状图
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
data:[67, 65, 69, 70, 81, 102, 105]//数据
},
{
name:'肯德基',//数据的名字
type:'line',//表示柱状图
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
data:[38, 36, 38, 40, 50, 60, 65]//数据
},
{
name:'小米之家',//数据的名字
type:'line',//表示柱状图
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
data:[57, 55, 56, 58, 65, 74, 75]//数据
},
{
name:'李宁',//数据的名字
type:'line',//表示柱状图
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
data:[28, 29, 31, 30, 37, 46, 44]//数据
}
]
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

最终的效果如下：

图 1

图 3 坐标轴设置示例

编程要求

根据提示，在右侧编辑器Begin和End之间补充代码（有三处）。实现如下的需求：

网格的左上角坐标为(130, 60)；
网格的宽度为70%，高度为40%；
网格的背景色为#eeffff；
x轴和y轴的坐标轴的名字都在end处。

测试说明

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

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

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

<!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({
        grid: {
            show:true,
            /********* Begin *********/
            x:130,
            y:60,
            width:'70%',
            height:'40%',
            backgroundColor:'#eeffff'

            /********* End *********/
        },
        title : {
            text : "某商场各门店一周销售额",//标题
            left:'center'
        },
        tooltip : {
        },
        legend: {
            orient: 'vertical',
            x:10,
            y:10,
            data:['优衣库', '海底捞', '肯德基', '小米之家', '李宁']//图例
        },
        xAxis : [
          {
              show : true,
              name: '星期',
              /********* Begin *********/
                namelocation:'end',

              /********* End *********/
              type : 'category',//表示x轴的每一项由几组数据组成
              data : ['周一','周二','周三','周四','周五','周六','周日']//x轴标题
          }
        ],
        yAxis : [
          {
               show : true,
               name: '销量（万元）',
               /********* Begin *********/
                namelocation:'end',

               /********* End *********/
              type : 'value'//每一项都是数据
          }
        ],
        series : [
             {
                 name:'优衣库',//数据的名字
                 type:'line',//表示柱状图
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
                 data:[33, 35, 38, 36, 35, 45, 48]//数据
             },
              {
                 name:'海底捞',//数据的名字
                 type:'line',//表示柱状图
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
                 data:[67, 65, 69, 70, 81, 102, 105]//数据
             },
              {
                 name:'肯德基',//数据的名字
                 type:'line',//表示柱状图
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
                 data:[38, 36, 38, 40, 50, 60, 65]//数据
             },
              {
                 name:'小米之家',//数据的名字
                 type:'line',//表示柱状图
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
                 data:[57, 55, 56, 58, 65, 74, 75]//数据
             },
              {
                 name:'李宁',//数据的名字
                 type:'line',//表示柱状图
                 itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
                 data:[28, 29, 31, 30, 37, 46, 44]//数据
             }
         ]
    });

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

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