ECharts 制作折线图/统计图

发表于 | 分类于 ，

官方api

官网 http://echarts.baidu.com/examples/
官方api http://echarts.baidu.com/api.html#echarts
配置项详细介绍 http://echarts.baidu.com/option.html#title

介绍

ECharts2.0提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
ECharts 3 开始加强了对多维数据的支持。

直接贴代码

以下部分配置项注释已加，还需要配置其他请查看配置项详细介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div>
	<div id="main" style="height:400px;width:800px;margin: auto;"></div>
</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/line' ,
	'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载				
	],
function (ec) {			
	// 基于准备好的dom，初始化echarts图表
	var myChart = ec.init(document.getElementById('main')); 		
	var option = {
		title : {//标题
			text: '一周内流量统计变化',					 
			x:'center',	//此处使用 left:"center",textAlign:"center"均不可用，
						//换成x后才好使，下面的同理
		},
		tooltip: { //提示框
			show: true, 
			trigger: 'axis' //坐标轴触发
		},
		toolbox: { //工具箱
			show: true, //是否展示按钮
			x:'left',
			feature: {
				magicType: { //模式切换（折线图，柱状图）
					type: ['line', 'bar', ],
					show: true
				},
				dataZoom: { //区域放大
					show: true
				},
				dataView: { //数据视图
					show: true
				},
				restore: { //还原按钮
					show: true
				},
				saveAsImage: { //保存图片按钮
					show: true
				}
			}
		},
		legend: { //名称
			data:['统计',"累计"],
			 y:'8%',
		},		
		xAxis : [ //x轴数据
			{
				type : 'category', //分类
				boundaryGap : true,  //数据边界线
				data : 
				['2018-08-21','2018-08-22',
				'2018-08-23','2018-08-24',
				'2018-08-25','2018-08-26',
				'2018-08-27']
			}
		],
		yAxis : [ //y轴数据
			{
				type : 'value'
			}
		],
		series : [
			{
				"name":"统计",
				"type":"line",				
				"data":[5, 20, 40, 10, 10, 20,55]
			},
			 {
				"name":"累计",
				"type":"line",				
				"data": [0,21,15,6,0,0,3]
			}
		]
	};
	
	// 为echarts对象加载数据 
	myChart.setOption(option); 
	}
);
</script>
</body>

效果

点击查看效果 ECharts_demo.html

参考地址

参考地址:http://echarts.baidu.com/echarts2/doc/example/line2.html