您的位置：首页 > 其它

百度图表数据插件echarts的初试

2015-01-09 11:50 309 查看
身为一个小前端，当得知需要在页面根据后台数据绘制统计数据的图表时，一筹莫展，幸好遇见了百度的ECharts插件，这款插件容易入手：

一下为初试：

prepare.js//稍微封装，易于复用

/*
*function getJson()
*为获取后台的数据json
*json.data为报表数据对应横轴的值
*json.name为报表横坐标的名称
*/
function getJson(){
var jsondata = {};
jsondata.legendName = [];  //图表的表面
jsondata.type = 'line';  //设置其为折线图'line',还是条形图'bar'
jsondata.data = [];   //设置对应横轴的值
jsondata.name = [];   //设置横轴的名称
jsondata.color = [];  //设置柱形图颜色
jsondata.trigger = '';  //设置拥有对应横轴的辅助线 axis，一般折线图会用到

return jsondata;
}

/*
*function setOptionData(json)
*设置报表的option样式
*参数json为设置样式和数据
*json.data为报表数据对应横轴的值
*json.name为报表横坐标的名称
*返回值：option
*/

function setOptionData(json){

var option = {
color : json.color,
tooltip: {
show: true,
trigger: json.trigger
},
legend: {
data:json.legendName
},
xAxis : [
{
type : 'category',
data : json.name
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":json.legendName,
"type":json.type,
"data":json.data
}
]
};

return option;
}


下面为两种不同的引入使用：

一种为模块化：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>使用prepare.js</title>
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
<script src="prepare.js"></script>
</head>
<style>
#draw{
width: 80%;
height: 400px;
margin:0 auto;
}
</style>
<body>
<p>已下为报表</p>
<div id="draw">
</div>
</body>
<script>
// 路径配置
require.config({
paths:{
// 'echarts' : 'http://echarts.baidu.com/build/echarts',
// 'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts'
'echarts': 'echarts-2.0.3/build/echarts',
'echarts/chart/bar':'echarts-2.0.3/build/echarts.js'
}
});

require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function(ec){

var mydraw = {};
mydraw.obj = document.getElementById("draw");
mydraw.json = getJson();
////因为没有从后台获取统计的数据，所以在此初始化

mydraw.json.legendName = ['浏览量'];
mydraw.json.trigger = 'axis';
mydraw.json.type = 'line';
mydraw.json.color = ['#e2e2e2'];
mydraw.json.data = [10,15,40,70,20,10,80,99,11,31,12,42];
mydraw.json.name = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
////
mydraw.option = setOptionData(mydraw.json);

//   drawEchart(mydraw);
var myChart = ec.init(mydraw.obj);
myChart.setOption(mydraw.option);

});
</script>
</html>


另一种为非模块导入：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>使用prepare.js</title>
<script src="echarts-2.0.3/build/echarts-plain.js"></script>
<script src="prepare.js"></script>
</head>
<style>
#draw{
width: 80%;
height: 400px;
margin:0 auto;
}
</style>
<body>
<p>已下为报表</p>
<div id="draw">
</div>
</body>
<script>
window.onload = function(){

var mydraw = {};
mydraw.obj = document.getElementById("draw");
mydraw.json = getJson();

mydraw.json.legendName = ['浏览量'];
mydraw.json.trigger = 'axis';
mydraw.json.type = 'line';
mydraw.json.color = ['#e2e2e2'];
mydraw.json.data = [10,15,40,70,20,10,80,99,11,31,12,42];
mydraw.json.name = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
////
mydraw.option = setOptionData(mydraw.json);

var myChart = echarts.init(mydraw.obj);
myChart.setOption(mydraw.option);
}
</script>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航