任务描述
本关任务：按照要求绘制柱状图。
相关知识
本关将介绍Echart中的标题和图例组件。
标题组件
标题组件就是图像的标题，它用来概述图像表达的内容。
在Echarts中，绘制组件都是通过对组件属性的配置来实现的，标题也不例外，所以我们先来了解下标题组件的属性项以及属性项对应属性的值。
| 属性名字 | 属性默认值 | 属性含义 |
|---|---|---|
| show | true | 是否展示标题组件 |
| text | '' | 主标题，可以使用'\n'来实现换行 |
| link | '' | 主标题文本超链接 |
| target | 'blank' | 指定窗口打开主标题超链接，可选self或blank |
| subtext | '' | 副标题文本超链接 |
| subtarget | 'blank' | 指定窗口打开副标题超链接，可选self或blank |
| x | 'left' | 标题左上角横坐标，可以是具体数字，也可以是left、center 、right |
| y | 'top' | 标题左上角纵坐标，可以是具体数字，也可以是top、center 、bottom |
| textAlign | 'tuto' | 水平对齐方式，可选auto、left、right、center |
| backgroudColor | 'transparent' | 标题背景颜色 |
| borderWidth | 0 | 标题的边框线的宽度 |
| borderColor | '#ccc' | 标题的边框线的颜色 |
| padding | 5 | 标题内边距 |
很明显可以看出，这里面的很多属性借用了Html和Css中的基本概念，比如target是Html中超链接的属性。这也告诉我们，知识是相通的。
通过一个例子学习下如何使用这些属性：
<!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:30,width:'100%',height:'60%'},title : {show : true,subtext : '前五大岛',target: 'blank',subtarget: 'blank',textAlign : 'center',padding: 5,backgroundColor: '#5ff',borderColor: '#444',borderWidth: 3,left: '50%',text : "世界岛屿面积排名"//标题},tooltip : {},xAxis : [{show:true,type : 'category',//表示x轴的每一项由几组数据组成data : ['格林兰岛','新几内亚岛','加里曼丹岛','马达加斯加岛','巴芬岛']//x轴标题}],yAxis : [{type : 'value'//每一项都是数据}],series : [{type:'bar',//表示柱状图data:[216, 78, 74, 58, 50]//数据}]});</script></body></html>
最终的效果如下所示：
图 1 设置复杂的标题组件绘制出来的柱状图
图例组件
图例组件的作用是：标识图像中不同的颜色的具体含义，是对图的附加说明。和标题组件类似，图例组件的个性化配置也是通过设置它的属性来实现的，它的属性如下所示：
| 属性名字 | 属性默认值 | 属性含义 |
|---|---|---|
| show | true | 是否展示图例 |
| type | 'plain' | 图例的类型，'plain'表示普通的图例，'scroll'表示支持翻页的图例 |
| orient | 'horizontal' | 'horizontal'表示水平布局，'vertical'表示垂直布局 |
| x | 'center' | 图例组件左上角横坐标，可以是具体数字，也可以是left、center 、right |
| y | 'top' | 图例组件左上角纵坐标，可以是具体数字，也可以是top、center 、bottom |
| backgroudColor | 'transparent' | 图例背景颜色 |
| borderWidth | 0 | 图例的边框线的宽度 |
| borderColor | '#ccc' | 图例的边框线的颜色 |
| padding | 5 | 图例内边距 |
| itemWidth | 25 | 图例标记的图形宽度 |
| itemHeight | 14 | 图例标记的图形高度 |
| data | {} | 图例的数据 |
看到这里你可能已经发现了，图例组件的很多属性和标题组件一模一样。其实，本质上来说，标题和图例都参考了CSS中的盒模型。
来通过一个例子看下图例组件的使用：
<!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: {show: true, //展示图例type: 'plain', //普通图例orient: 'horizontal', //水平图例x: 'right', //图例水平居于右侧y: 'top', //图例垂直居于上侧backgroundColor: '#fffeee', //图例的背景颜色borderColor: 'red', //图例的边框的颜色borderWidth: 1, //图例的边框的宽度padding: 8, //图例的内边距itemWidth: 30, //每一个图例的宽度itemHeight: 15, //每一个图例的高度data : ['鲫鱼','鲤鱼','鲢鱼','鲈鱼','螃蟹'], //图例的具体内容},xAxis : [{show:true,type : 'category',//表示x轴的每一项由几组数据组成data : ['一月','二月','三月','四月','五月']//x轴标题}],yAxis : [{type : 'value'//每一项都是数据}],series : [{name:'鲫鱼',type:'bar',//表示柱状图data:[1021, 1090, 960, 789, 854]//数据},{name:'鲤鱼',type:'bar',//表示柱状图data:[612, 737, 843, 936, 729]//数据},{name:'鲢鱼',type:'bar',//表示柱状图data:[856, 997, 544, 983, 477]//数据},{name:'鲈鱼',type:'bar',//表示柱状图data:[747, 912, 960, 523, 834]//数据},{name:'螃蟹',type:'bar',//表示柱状图data:[567, 597, 436, 456, 554]//数据}]});</script></body></html>
一般来说，图例的设置中，最常用到的是x和y，因为图例的位置很重要，图例既不能挡住标题，也不应该挡住具体的数据。
最后来看下我们设置的这个图例的效果：
图 2 图例设置参考
编程要求
根据提示，在右侧编辑器Begin和End之间补充代码，绘制柱状图，数据如下：
| 年份\种类 | 蔬菜 | 水果 | 肉类 | 禽蛋 |
|---|---|---|---|---|
| 2015 | 102 | 89 | 16 | 30 |
| 2016 | 107 | 86 | 18 | 34 |
| 2017 | 113 | 91 | 17 | 29 |
| 2018 | 118 | 95 | 20 | 36 |
| 2019 | 120 | 97 | 21 | 32 |
柱状图的最终效果如下：
图 3 柱状图的最终效果
一切以图片为准，下面的要求是图片无法直观展示出的：
- 柱子未设置样式，采用的默认的样式；
- 标题的
x的属性的值是40，背景颜色是#ffffee，其它都是采用的默认值； - 图例的类型是支持翻页的图例，布局方向是水平方向，
x值是right，y的值是top，背景色是#ffffef，图例的边框宽度是0，背景色是yellow。图例的内边距是1，宽度是30，高度是15。其它未做说明的均采用的是默认值。
测试说明
我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！”
同时我们将展示你生成的图像和正确的图像，你可以通过观察图像的方式修改自己尚未通过的代码。
测试输入： 预期输出：图像对比一致，恭喜通关！
开始你的任务吧，祝你成功！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/JavaScript" src="../static/jquery.min.js"></script>
<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'));
url = "http://127.0.0.1:8080/static/data.txt";
/********* Begin *********/
myChart.setOption({
title : {
show :true,
x:40,
subtext: '单位（吨）',
text : "某农场农产品产量",//标题
backgroundColor:'#ffffee',
},
tooltip : {
},
legend: {
show: true, //展示图例
type: 'scroll', //普通图例
orient: 'horizontal', //水平图例
x: 'right', //图例水平居于右侧
y: 'top', //图例垂直居于上侧
backgroundColor: '#ffffef', //图例的背景颜色
borderColor: 'yellow', //图例的边框的颜色
borderWidth: 0, //图例的边框的宽度
padding: 1, //图例的内边距
itemWidth: 30, //每一个图例的宽度
itemHeight: 15, //每一个图例的高度
data : ['蔬菜','水果','肉类','禽蛋'], //图例的具体内容
},
xAxis : [
{
show: true,
type : 'category',//表示x轴的每一项由几组数据组成
data : ['2015','2016','2017','2018','2019']//x轴标题
}
],
yAxis : [
{
type : 'value'//每一项都是数据
}
],
series : [
{
name:'蔬菜',
type:'bar',//表示柱状图
data:[102, 107, 113, 118, 120]//数据
},
{
name:'水果',
type:'bar',//表示柱状图
data:[89,86,91,95,97]//数据
},
{
name:'肉类',
type:'bar',//表示柱状图
data:[16,18,17,20,21]//数据
},
{
name:'禽蛋',
type:'bar',//表示柱状图
data:[30,34,29,36,32]//数据
},
]
});
/********* End *********/
</script>
</body>
</html>
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
