任务描述
本关任务：按照要求设置网格和坐标轴。
相关知识
在学习了柱状图、柱状图、饼状图的画法之后，我们还需要对图像上的辅助组件做进一步的了解，包括坐标轴、图例、工具等。
本关将介绍坐标轴的相关知识。
直角坐标系下的网格
Echarts中的网格是直角坐标系下定义网格布局和大小及颜色的组件。用于定义直角坐标系的整体布局。
网格有很多属性，我们分两部分来看，第一部分是有关网格位置和大小的属性，如下所示：
| 参数 | 默认值 | 含义 |
|---|---|---|
| x | 80 | 直角坐标系内绘制出来的图的左上角的x轴坐标 |
| y | 60 | 直角坐标系内绘制出来的图的左上角的y轴坐标 |
| x2 | 80 | 直角坐标系内绘制出来的图右下角的x轴坐标 |
| y2 | 0 | 直角坐标系内绘制出来的图的右下角的y轴坐标 |
| width | 适应 | 直角坐标系内绘制出来的图的宽度 |
| height | 适应 | 直角坐标系内绘制出来的图的高度 |
因为我们绘制出来的柱状图、柱状图都是在一个矩形区域内的，所以要指定区域的位置和坐标，上面六个参数就是起这个作用，如下所示是这些参数在坐标轴上的表示：
图 1 坐标轴
可以看到，当指定了width和height的值，x2和y2便会自动计算出来，无需再指定。
第二部分有有关颜色等的属性，如下：
| 参数 | 默认值 | 含义 |
|---|---|---|
| backgroundColor | 'transparent' | 背景颜色 |
| borderWidth | 1 | 网格的边框线的宽度 |
| borderColor | '#ccc' | 网格的边框线的颜色 |
来看一个具体的例子加深理解：
<!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,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组件中设置，它就是网格的意思。
最终的效果如下所示：
图 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><!-- 引入 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: {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>
最终的效果如下：
图 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>
1469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
