用ECharts绘制折线图

发表于   |  

忙了好久，终于把毕业论文搞定了。最近做一些模型训练的实验，考虑如果对实验结果进行可视化，想到曾经接触过的ECharts是个挺不错的可视化工具，不妨绘制一个简单的折线图，也分享下相关的经验，不断学习。

ECharts简介

ECharts是一个纯Javascript的图表库，其底层依赖轻量级的Canvas类库——ZRender。ECharts可以支持PC端和移动端，兼容绝大部分浏览器。使用ECharts可以轻松绘制基本柱状图、折线图、饼状图、散点图等，还有用于统计的盒形图，股票交易k线图，表示数据关系的关系图等。除此之外，Echarts还特别擅长绘制地理数据相关的地图，热力图和线图等等。还有很多，可以参考ECharts官方文档示例。

对于懂得一些前端开发的人来说，ECharts文档也是特别容易理解，并且能迅速上手操作。所以，大家基本上都可以从官方文档中直接学习使用了。

使用ECharts绘制图表的步骤

step1: 获取ECharts库

这个有多种方式，最简单的可以直接在官网下载界面中下载到本地，在本地引用。当然，也可以直接引用下载界面中的文件。

step2：在HTML文件中引用ECharts库文件
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</header>
</html>
step3：预备一个具有宽高的DOM容器

在页面中预备一个DOM容器，用于呈现图表。

1
2
3
4
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

step4：用echarts.init方法初始化一个echarts实例，设置实例的option，并且setOption生成图表。
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
    <!-- 基于准备好的dom，初始化echarts实例-->
    var myChart = echarts.init(document.getElementById('main'));
    <!-- 指定图表的配置项和数据-->
    var option = {
    title:{...},
    ...
    }
        
    <!-- 使用刚指定的配置项和数据显示图表。-->
    myChart.setOption(option);
</script>

一个完整的实例代码

安装上面步骤，下面通过一些测试数据，用ECharts绘制一个基本的面积折线图。其完整的代码和注释如下：

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts绘制折线图</title>
    <!-- 引入 echarts.js -->
    <script src="http://echarts.baidu.com/dist/echarts.common.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 700px;height:400px;"></div>
    <script type="text/javascript">
	
        <!-- 基于准备好的dom，初始化echarts实例-->
        var myChart = echarts.init(document.getElementById('main'));  
	<!--生成x轴 1-200的数值。-->
	var xData = [];
	for(var i = 1; i < 200; i++){
	xData.push(i);
	}
		
	<!-- y轴数据 -->
	var data = [0.716877,0.716877,0.716916,0.716972,0.716972,0.716939,0.716939,0.716939,0.716939,0.716939,0.716939,0.717044,0.717044,0.717044,0.717024,0.717026,0.717026,0.717026,0.717023,0.717026,0.717020,0.717002,0.717005,0.717004,0.717004,0.717004,0.717010,0.717007,0.717009,0.720009,0.720059,0.720092,0.720092,0.720092,0.720079,0.720089,0.720447,0.720449,0.720555,0.720740,0.720740,0.720784,0.720847,0.721437,0.721556,0.721478,0.721522,0.721598,0.721615,0.721702,0.721621,0.721632,0.726977,0.734446,0.731617,0.731502,0.732236,0.734982,0.734982,0.734729,0.737468,0.737404,0.737593,0.737626,0.737564,0.737647,0.737305,0.737620,0.739023,0.738938,0.739963,0.740864,0.741118,0.741813,0.741929,0.741886,0.741914,0.742123,0.741998,0.742212,0.742722,0.742845,0.742921,0.743136,0.743993,0.744155,0.744609,0.745486,0.745486,0.745449,0.745930,0.745799,0.745777,0.745666,0.745419,0.745429,0.746695,0.747007,0.746970,0.746944,0.746939,0.747172,0.747478,0.747972,0.748028,0.748028,0.747980,0.748222,0.748267,0.748356,0.748433,0.748417,0.748463,0.748604,0.748564,0.748511,0.748910,0.749096,0.749116,0.749250,0.749178,0.749163,0.749163,0.749148,0.749252,0.749436,0.749523,0.749815,0.749815,0.750052,0.749880,0.749831,0.749910,0.749951,0.749984,0.750235,0.750294,0.750217,0.750148,0.750130,0.750226,0.750402,0.750149,0.750432,0.750482,0.750305,0.750549,0.750659,0.750696,0.750762,0.750798,0.750880,0.750880,0.750878,0.750592,0.750662,0.750627,0.750588,0.750652,0.750779,0.751111,0.751113,0.751047,0.751082,0.751035,0.751258,0.751280,0.751298,0.751275,0.751411,0.751394,0.751359,0.751381,0.751423,0.751481,0.751495,0.751563,0.751563,0.751466,0.751426,0.751662,0.751630,0.751660,0.751920,0.752200,0.752274,0.752302,0.752345,0.752456,0.752538,0.752615,0.752631,0.752629,0.752625,0.752613,0.752724,0.752786,0.752742,0.752892,0.752947];
    <!-- 指定图表的配置项和数据-->
        var option = {
            tooltip: {
	            trigger: 'axis',
		    position: function(pt){
	    	        return [pt[0], '10%'];
		        }
		    },
		
		title:{
			left:'center',  <!--title离容器左侧距离-->
			text: '用ECharts绘制面积折线图',
			subtext: '测试数据'
		        },
			
                xAxis: {
			type:'category',
			boundaryGap:false,
			name: 'x坐标值',
                        data: xData,
                        },
                yAxis: {
			type: 'value',
			name: 'y坐标值',
			min:0.6, <!--y轴从0.6开始-->
			boundaryGap:[0, '100%']
			},
		dataZoom: [{  <!--dataZoom用于区域放缩，对于图标下方的滑动条-->
			type: 'inside',
			start: 0,  <!--初始化时，窗口范围的起始百分比-->
			end: 30   <!--初始化时，窗口范围的终止百分比-->
			}, {
				start: 0,
				end: 30,
				handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',  <!--手柄的 icon 形状，支持路径字符串-->
				handleSize: '80%',  <!--控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。-->
				handleStyle: {
					color: '#fff',
					shadowBlur: 3,
					shadowColor: 'rgba(0, 0, 0, 0.6)',  <!--阴影颜色。支持的格式-->
					shadowOffsetX: 2,
					shadowOffsetY: 2
				}
			}],
	
                series: [{
			name:'test',   
			type:'line',  <!--图表类型-->
			smooth:true,  <!--平滑显示-->
			symbol: 'none',  
			sampling: 'average',  <!--折线图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率，average即取过滤点的平均值-->
			itemStyle: {
				normal: {
					color: 'rgb(255, 70, 131)'  <!--线条颜色-->
				}
			},
			areaStyle: {
				normal: {  <!--绘制面积区域的渐变颜色-->
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgb(255, 158, 68)'
					}, {
						offset: 1,
						color: 'rgb(255, 70, 131)'
					}])
				}
			},
			data: data
		    }]
        };
        <!-- 使用刚指定的配置项和数据显示图表。-->
        myChart.setOption(option);
    </script>
</body>
</html>

绘制图表

以上代码效果图