十六、Echarts开源库实现绘图
第1关：Echarts 的下载与使用
任务描述
本关任务：利用 Echarts 绘制一个简单的图表，效果如下：
相关知识
为了完成本关任务，你需要掌握：1.下载 Echarts，2.如何引入 Echarts，3.绘制一个简单的图表。
下载 Echarts
我们选用的版本是：ECharts v4.1.0 rc2
linux 环境： 点击下载
Windows 环境： 点击下载
引入 Echarts
ECharts 3 版本以后，引入方式简单了很多，在 HTML 文件中，只需要像普通的 JavaScript 库一样用script标签引入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
</html>
其中src的路径为你自己下载的echarts.xxx.js路径。
注意：Echarts 有多个版本，你可以根据自己的需要下载精简版或完整版，本实训选用的是ECharts v4.1.0 rc2版。
绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<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.js -->
<script src="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>
各部分设置如下：
总结，生成柱状图的流程为：
• 引入 echarts.js
• 为 ECharts 准备一个具备高宽的 DOM 容器
• 通过 echarts.init 方法初始化一个 echarts 实例
• 在 option 中设置柱状图的标题（ title ）， x 轴， y 轴等数据, series 中 type 属性设置图表类型， bar 代表柱状图
• 通过 setOption 方法使刚才的设置生效
编程要求
仿造实训中的例子，在右侧编辑器补充代码，绘制柱状图，效果如下图：
• 图表标题为： Educoder 实训统计
• 其中实训数量分别为： 300, 280, 386, 180, 210, 50
测试说明
我会对你编写的代码进行测试：
开始你的任务吧，祝你成功！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.simple.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
<!-- Begin 1 -->
var myChart = echarts.init(document.getElementById('main'));
<!-- End 1 -->
// 指定图表的配置项和数据
<!-- Begin 2 -->
var option = {
title: {
text: 'Educoder 实训统计'
},
tooltip: {},
legend: {
data:'实训数量'
},
xAxis: {
data: "Java","Python","Linux","数据库","HTML","Web"
},
yAxis: {},
series: [{
name: '实训数量',
type: 'bar',
data: 300, 280, 386, 180, 210, 50
}]
};
<!-- End 2 -->
// 使用刚指定的配置项和数据显示图表。
<!-- Begin 3 -->
myChart.setOption(option);
<!-- End 3 -->
</script>
</body>
</html>
第2关：Echarts 绘制折线图
任务描述
本关任务：利用 Echarts 绘制一个简单的折线图。
相关知识
为了完成本关任务，你需要掌握：如何利用 Echarts 绘制折线图。
绘制折线图
绘制折线图的流程和柱状图相同，我们只需要在series中指定type类型为折线图line：
series: [{
name: 'xxx',
type: 'line',
data: xx, xx,
}]
编程要求
在右侧编辑器补充代码，绘制折线图，效果如下图：
其中实训数量分别为：data: 300, 800, 2400, 3600, 5600, 8000
测试说明
我会对你编写的代码进行测试：
开始你的任务吧，祝你成功！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.simple.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
<!-- Begin 1 -->
var myChart = echarts.init(document.getElementById('main'));
<!-- End 1 -->
// 指定图表的配置项和数据
<!-- Begin 2 -->
var option = {
title: {
text: 'Educoder 实训统计'
},
tooltip: {},
legend: {
data:'实训数量'
},
xAxis: {
data: "Java","Python","Linux","数据库","HTML","Web"
},
yAxis: {},
series: [{
name: '实训数量',
type: 'line',
data: 300, 800, 2400, 3600, 5600, 8000
}]
};
<!-- End 2 -->
// 使用刚指定的配置项和数据显示图表。
<!-- Begin 3 -->
myChart.setOption(option);
<!-- End 3 -->
</script>
</body>
</html>
第3关：Echarts 绘制饼图
任务描述
本关任务：利用 Echarts 绘制一个饼图。
相关知识
为了完成本关任务，你需要掌握：1.利用 Echarts 绘制饼图，2.如何添加特效。
绘制饼图
和绘制柱状图和折线图相比，饼状图在option中无需设置x轴和y轴，series设置如下（type类型为pie）：
series: [{
name: '实训数量',
type: 'pie',
data: [
{name:"Java",value:300},
{name:"Python",value:280},
{name:"Linux",value:386},
{name:"数据库",value:180},
{name:"HTML",value:210},
{name:"Web",value:50},
]
}]
代码设置后效果如下：
饼图其他设置和每一部分百分比的显示
上面画好了一个最基本的饼图，但我们平常见到的饼图还会显示出每部分所占的百分比，接下来我们一起设置，并美化一下我们的饼图吧~
补充设置series：
series : [{
name: '实训数量',
type: 'pie',
radius : '55%', //设置整个圆的大小
center: '50%', '60%', //设置整个圆的位置
data:[
{value:335, name:'Java'},
{value:310, name:'Python'},
{value:234, name:'Linux'},
{value:135, name:'数据库'},
{value:1548, name:'HTML'},
{value:158, name:'Web'}
]
}]
设置提示框显示百分比：
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
效果如下（把鼠标放到该部分就会有提示框显示该部分的信息和所占百分比）：
编程要求
仿造实训中的例子，在右侧编辑器补充代码，绘制饼图，效果如下图：
要求：
设置圆的大小为55%
设置圆的位置为'40%', '50%'
设置提示框显示圆的百分比
其中实训数量分别为：300, 280, 386, 180, 210, 50
测试说明
我会对你编写的代码进行测试：
开始你的任务吧，祝你成功！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.simple.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
<!-- Begin 1 -->
var myChart = echarts.init(document.getElementById('main'));
<!-- End 1 -->
// 指定图表的配置项和数据
<!-- Begin 2 -->
var option = {
title: {
text: 'Educoder 实训统计'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series : [{
name: '实训数量',
type: 'pie',
radius : '55%', //设置整个圆的大小
center: '40%', '50%', //设置整个圆的位置
data:[
{name:"Java",value:300},
{name:"Python",value:280},
{name:"Linux",value:386},
{name:"数据库",value:180},
{name:"HTML",value:210},
{name:"Web",value:50}
]
}]
};
<!-- End 2 -->
// 使用刚指定的配置项和数据显示图表。
<!-- Begin 3 -->
myChart.setOption(option);
<!-- End 3 -->
</script>
</body>
</html>
有任何问题都可以随时关注私信！