身为一个小前端，当得知需要在页面根据后台数据绘制统计数据的图表时，一筹莫展，幸好遇见了百度的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>
时间： 2024-11-05 12:26:35