您的位置：首页 > 其它

百度Echarts完全教程（一）

2016-10-10 22:01 239 查看
我感觉我每次写博客都挖坑，这一次保证，真的不挖坑了。。。

这一次要介绍的是百度的一个可视化神器——百度Echarts。

相比较与highcharts，echarts毕竟是国内的，而且完全开源，文档写的也很全，最近我在用echarts做可视化，非常之好用。

目前echarts有2和3两个版本，我更喜欢2。因为2的demo更多，文档写的也全。3的话，我不是很喜欢。不过echarts2和3差别不大。本次教程以echarts2为主。

   Echarts2：http://echarts.baidu.com/echarts2/index.html       

   Echarts3：http://echarts.baidu.com/

今天，第一篇首先来讲入门。

首先，我们先来看一下可视化的效果：http://sandbox.runjs.cn/show/yqzosjkw

是不是还是可以的。

完成这个也是比较简单的。

一、创建HTML文档，以及设置好DOM

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
</body>


二、引入echarts.js

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>


三、配置echarts配置和图标路径

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
</script>
</body>


在这里要进行说明：（1）require.config是用来设置echarts的配置文件，因为我们用的是在线的echarts.js，所以按照这种方式配置就可以。如果你用的是下载下来的js，那么就要重新配置好路径。（2）关于第二个require，这里是用来设置要表。除了第一个‘echarts’必要引用外，还要引用所需要显示的图。例如，我们这个表用到的是柱状图，所以要引用bar，那么如果我们要引用折线图，那么就要引用line了，依次类推，具体可以看官方文档。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航