echart使用
2016-03-24 17:16
369 查看
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>折线图</title>
<script type="text/javascript" src="./echarts/build/dist/echarts.js"></script>
<style type="text/css">
*{margin: 0;padding: 0}
#bar_chart{width: 600px;height: 500px;margin-left: 10%;margin-top: 50px;}
</style>
</head>
<body>
<div id="line_chart" style="height:400px"></div>
<script type="text/javascript">
// 路径配置
require.config({ paths: {echarts: './echarts/build/dist'}});
// 使用
require(
[ 'echarts','echarts/chart/line'],// 使用柱状图就加载bar模块，按需加载
function (ec) {
var myChart = ec.init(document.getElementById('line_chart')); // 基于准备好的dom，初始化echarts图表
option = {
title : {text: '服务器访问流量统计'},//subtext: '纯属虚构'
tooltip : {trigger: 'axis'},//表示是否mouseover时显示当前坐标值
legend: {data:['杭州','北京']},
/*表示一些工具框 toolbox: {
show : true,
feature : {mark : {show: true}, dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},restore : {show: true},
saveAsImage : {show: true}
}
},*/
calculable : true,
xAxis : [{type : 'category', boundaryGap : false,
data : ['2015-03-31_12:00','2015-03-31_12:05','2015-03-31_12:10',
'2015-03-31_12:15','2015-03-31_12:20','2015-03-31_12:25','2015-03-31_12:30'
,'2015-03-31_12:35','2015-03-31_12:40','2015-03-31_12:45','2015-03-31_12:50'
,'2015-03-31_12:55'],name:'时间'}],
yAxis : [{type : 'value',axisLabel : {formatter: '{value}'},name:'访问量'}],
series : [
{
name:'杭州',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10,22,18,15,17,16]
// markPoint : {
// data : [
// {type : 'max', name: '最大值'},
// {type : 'min', name: '最小值'}
// ]
// },
// markLine : {
// data : [
// {type : 'average', name: '平均值'}
// ]
// }
},
{
name:'北京',
type:'line',
data:[15, 22, 24, 15, 13, 12, 10,21,26,24,23,20]
// markPoint : {
// data : [
// {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
// ]
// },
// markLine : {
// data : [
// {type : 'average', name : '平均值'}
// ]
// }
},
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
<head>
<meta charset="utf-8">
<title>折线图</title>
<script type="text/javascript" src="./echarts/build/dist/echarts.js"></script>
<style type="text/css">
*{margin: 0;padding: 0}
#bar_chart{width: 600px;height: 500px;margin-left: 10%;margin-top: 50px;}
</style>
</head>
<body>
<div id="line_chart" style="height:400px"></div>
<script type="text/javascript">
// 路径配置
require.config({ paths: {echarts: './echarts/build/dist'}});
// 使用
require(
[ 'echarts','echarts/chart/line'],// 使用柱状图就加载bar模块，按需加载
function (ec) {
var myChart = ec.init(document.getElementById('line_chart')); // 基于准备好的dom，初始化echarts图表
option = {
title : {text: '服务器访问流量统计'},//subtext: '纯属虚构'
tooltip : {trigger: 'axis'},//表示是否mouseover时显示当前坐标值
legend: {data:['杭州','北京']},
/*表示一些工具框 toolbox: {
show : true,
feature : {mark : {show: true}, dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},restore : {show: true},
saveAsImage : {show: true}
}
},*/
calculable : true,
xAxis : [{type : 'category', boundaryGap : false,
data : ['2015-03-31_12:00','2015-03-31_12:05','2015-03-31_12:10',
'2015-03-31_12:15','2015-03-31_12:20','2015-03-31_12:25','2015-03-31_12:30'
,'2015-03-31_12:35','2015-03-31_12:40','2015-03-31_12:45','2015-03-31_12:50'
,'2015-03-31_12:55'],name:'时间'}],
yAxis : [{type : 'value',axisLabel : {formatter: '{value}'},name:'访问量'}],
series : [
{
name:'杭州',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10,22,18,15,17,16]
// markPoint : {
// data : [
// {type : 'max', name: '最大值'},
// {type : 'min', name: '最小值'}
// ]
// },
// markLine : {
// data : [
// {type : 'average', name: '平均值'}
// ]
// }
},
{
name:'北京',
type:'line',
data:[15, 22, 24, 15, 13, 12, 10,21,26,24,23,20]
// markPoint : {
// data : [
// {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
// ]
// },
// markLine : {
// data : [
// {type : 'average', name : '平均值'}
// ]
// }
},
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 