您的位置：首页 > Web前端 > JavaScript

ECharts实例开发学习笔记一

2015-08-27 11:44 585 查看

由于这段时间比较忙，所以隔了这么久，才开始真正的ECharts实例学习，首先，官网参考手册里给出了一个入门的demo，即”5分钟上手写ECharts的第一个图表“，就从它开始吧，另外发现ECharts出了配置项查找工具，这查找API就简单方便多了，废话不多说了，直接上代码。

<span style="font-size:14px;"><!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>

<div id="main" style="height:400px"></div>

<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模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));

var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body></span>

上面这个官方手册demo的原始代码，也就这个代码是完整的，而给的其它案例都只是给出了option模块，虽然很多时候直接套换即可，但是有些示例还是有些细微的差别，并不是直接套换就可以的，另外在其给出的示例数据也是直接写死，并没有给出动态的数据加载说明，这对于js的初学者来说可能还不知如何去加载大量的自有数据，下面就以上面的demo为基础介绍如何添加动态添加本地文件或其它接口数据。

在配置ECharts时，我采用的是其推荐的模块化单文件引入，这种引入方法简便，至于其它的几种可参考其官网手册说明。上面的demo引入直接采用CDN地址，即百度提供在线的加载，如果不想自己下载ECharts库，则可直接采用上面的CDN方法，本地引入ECharts库，如下所示：

CDN：<span style="font-size:14px;">
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});</span>本地引入：

<span style="font-size:14px;"><!--    本地引入ECharts,'js/dist/'本地文件路径下 -->
<script src="js/dist/echarts.js"></script>
<script type="text/javascript">
//        路径配置,'./js/dist'本地文件路径
require.config({
paths: {
echarts:'./js/dist'
}
});
</script></span>

下面给出一个动态加载本地数据文件的示例。
data.txt，数据为json格式，如下所示。<span style="font-size:14px;">[{"NAME":"衬衫","VAL":"53"},{"NAME":"羊毛衫","VAL":"20"},{"NAME":"雪纺衫","VAL":"33"},{"NAME":"裤子","VAL":"43"},{"NAME":"高跟鞋","VAL":"28"},{"NAME":"袜子","VAL":"29"}]</span>读入以上数据并在ECharts中显示

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Test</title>
<style>
body{background-color:#000000}
</style>
</head>
<body>
<div id="main" style="height:500px;width: 100%; margin-left: 0px;float: left;"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts:'http://echarts.baidu.com/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));

$.getJSON("data.txt", function(json) {
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : (function(){
var data=[];
for(var i=0;i<json.length;i++){
data.push(json[i].NAME);
}
return data;
})()
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data": (function(){
var data=[];
for(var i=0;i<json.length;i++){
data.push(json[i].VAL);
}
return data;
})()
}
]
};

myChart.setOption(option);
});
}
);
</script>

</body>
</html></span>

同官网示例相似，只是为了展示如何从其它地方动态加载数据显示，代码里用到了jQuery方法 $.getJSON("data.txt", function(json)，此是从其它地方获取json格式的数据，同样适用于其它API请求的json数据，只需换成相应的路径即可，如 $.getJSON("data.php", function(json)，则为请求php页面的json数据，更多详细介绍可参考jQuery文档或者Ajax请求方法介绍。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js图表库 ECharts

相关文章推荐

新的分享

章节导航