秋风萧瑟洪波涌起

简介

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

目前由百度Echarts团队维护，在github社区开源，社区地址为：

1	https://github.com/ecomfe/echarts

echarts的使用介绍和内部处理流程分析

使用

首先是echarts的引入，分为模块化包引入、模块化单文件引入、标签式单文件引入三种
其次通过echarts.init()加载使用的dom，实例化图表对象
配置图表设置option
通过myChart.setOption()将配置好的设置加载到图表对象中，然后由echarts自动生成并绘制图表

内部处理流程

ChartConfig:function(container,option){ …..},//加载Echarts配置文件
ChartDataFormate:{….},//数据格式化
ChartOptionTemplates:{….},//初始化常用的图表类型
Charts:{ RenderChart:function(option){….},//渲染图表
RenderMap:function(option){…}//渲染地图

上面的步骤在实际绘图中不会完全的使用到，渲染图表和渲染地图通常只会使用到一种

图表类型介绍

echarts提供的图表类型有十余种：

line 折线图
bar 柱形图
scatter 散点图
k K线图
pie 饼图
radar 雷达图
chord 和弦图
force 力导向图
map 地图
heatmap 热力图
gauge 仪表盘图
funnel 漏斗图
eventRiver 时间河流图
treemap 矩形树图
venn 韦恩图
tree 树图
wordCloud 字符云图

echarts的简单使用

这里我借助echarts官方文档的第一个例子使用最简单的标签式单文件引入的方法简单介绍一下它的使用方法

新建一个HTML5页面

<!DOCTYPE html>
<head>
    <mate charset="utf-8">
	<title>Echarts bar</title>
</head>
<body>
</body>
</html>

在页面中添加一个<div>标签用来绘制图表（必须规定宽高）

<!DOCTYPE html>
<head>
    <mate charset="utf-8">
    <title>Echarts bar</title>
</head>
<body>
    <div id="bar" style="height: 400px"></div>
</body>
</html>

新建<script>标签引入标签式单文件echarts-all.js

<!DOCTYPE html>
<head>
    <mate charset="utf-8">
    <title>Echarts bar</title>
    <script src="js/dist/echarts-all.js"></script>
</head>
<body>
    <div id="bar" style="height: 400px"></div>
</body>
</html>

新建<script>标签，使用全局变量echarts初始化图表并驱动图表的生成

<!DOCTYPE html>
<head>
    <mate charset="utf-8">
	<title>Echarts bar</title>
	<script src="js/dist/echarts-all.js"></script>
</head>
<body>
	<div id="bar" style="height: 400px;width: 600px"></div>
	
    <script>
	var myChart = echarts.init(document.getElementById('bar'));
        
	var option = {
		tooltip: {
			show: true,
			tigger: 'axis'
		},
		legend: {
			data: ['GDP', '人口']
		},
		grid: {
			borderWidth: 0
		},
		xAxis: [
			{
				type: 'category',
				name: '时间',
				axisTick: {show: false},
				splitLine: {show: false},
				data: ['2012', '2013', '2014', '2015']
			}
		],
		yAxis: [
			{
				type: 'value',
				splitLine: {show: false},
				name: '中国GDP(万亿)'
			},
			{
				type: 'value',
				splitLine: {show: false},
				name: '中国人口(万)'
				}
			],
		series: [
			{
				name: 'GDP',
				type: 'bar',
				yAxisIndex: 0,
				data: [534123, 588019, 635910, 676708]
			},
			{
				name: '人口',
				type: 'bar',
				yAxisIndex: 1,
				data: [135404, 136072, 136782, 137325]
			}
		]
	};

	myChart.setOption(option);
	</script>
</body>
</html>

通过以上步骤就能成功使用echarts绘制出一个双Y轴的柱状图

点此在线预览

小结

这次主要介绍了echarts的信息和与其他工具的对比，简要说明了echarts的使用方法和内部处理流程，并且完成了一个双Y轴的柱状图demo

echarts介绍及使用（一）

简介

同类对比

echarts的使用介绍和内部处理流程分析

使用

内部处理流程

图表类型介绍

echarts的简单使用

小结