1.简介
ECharts是百度推出的一款强大的作图工具,是基于HTML5的图形库,其开源免费且功能丰富,官网上的资料也很详细,使用ECharts做图需要有一些简单的HTML和JavaScript基础,要用到一些标签。
我们可以根据自己的需要选择下载合适的版本,这里我选择的是完整版,如下图示:
2.使用方法
2.1 引入ECharts
ECharts 的引入方式类似 JavaScript 库一样用 script 标签引入即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
2.2 使用ECharts绘制一个简单的图表
使用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="C:\Users\ming\Downloads\echarts.min.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'));
// 指定图表的配置项和数据
option = {
title: {
text: '近年考研工科学硕国家线'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['A类','B类']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: [2014,2015,2016,2017,2018]
},
yAxis: {
type: 'value'
},
series: [
{
name:'A类',
data: [285,280,265,265,260],
type: 'line'
},
{
name:'B类',
data: [275,270,255,255,250],
type: 'line'
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
得到的折线图如下所示:
再附上一个用ECharts画的一个成绩单的直方图:
总结:
ECharts官网上有丰富的图样模版,官网文档的教程和配置手册很详细,能够帮助我们画出各种优美炫酷的图表,还有很多实例代码开放,相信会满足你对图表的挑剔。