ECharts入门

ECharts入门

一、概述

1. 是什么?
   1）ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
   2）开源免费
   3）百度主导开发
   4）官网：http://echarts.baidu.com/index.html
2. 下载
   1）常用：包含常用的图表组件折 柱 饼 散点 图例工具栏 标注/线/域数据区域缩放（398kB）
   2）精简：只包含基础图表折 柱 饼（245KB）
   3）完整：包含所有图表组件（632KB）
   4）源码：包含所有图表组件的源码，常见的警告和错误提示（2.2MB）
3. 引入：

<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>

4. 定义div，存放图表

<div id="main" style="width:800px;height: 400px; "></div>

二、柱状图

1. 创建echarts实例

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

2. 创建Option选项

	// 指定图表的配置项和数据
	var option = {
		//标题，可选
		title : {
			text : 'ECharts 入门示例'//标题文本
		},
		tooltip : {},//提示，可选
		//图例
		legend : {
			data : [ '一月销量','二月销量']//图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）
		},
		//直角坐标系 grid 中的 x 轴
		xAxis : {
			data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]//类目数据，在类目轴（type: 'category'）中有效。
		},
		//直角坐标系 grid 中的 y 轴
		yAxis : {},
		//系列列表。每个系列通过 type 决定自己的图表类型
		series : [ {
				name : '一月销量',
				type : 'bar',
				data : [ 5, 20, 36, 10, 10, 20 ]
			} ,{
				name : '二月销量',
				type : 'bar',
				data : [ 7, 18, 28, 8, 20, 10 ]
			}
		]
	};

3. 关联echarts实例的option选项

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

三、折线图

option = {
	title: {
		text: '未来一周气温变化',
		subtext: '纯属虚构'//副标题文本，支持使用 \n 换行。
	},
	tooltip: {
		trigger: 'axis'//触发类型。'axis':坐标轴触发
	},
	legend: {
		data:['最高气温','最低气温']
	},
	//工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具
	toolbox: {
		show: true,//是否显示工具栏组件
		//各工具配置项
		feature: {
			//数据区域缩放
			dataZoom: {
				yAxisIndex: 'none'//指定哪些 yAxis 被控制
			},
			//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
			dataView: {readOnly: false},
			//动态类型切换
			magicType: {type: ['line', 'bar']},
			//配置项还原
			restore: {},
			//保存为图片
			saveAsImage: {}
		}
	},
	xAxis:  {
		type: 'category',//坐标轴类型,'category':类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
		boundaryGap: false,//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
		data: ['周一','周二','周三','周四','周五','周六','周日']
	},
	yAxis: {
		type: 'value',//坐标轴类型,'value':数值轴，适用于连续数据。
		//坐标轴刻度标签的相关设置
		axisLabel: {
			formatter: '{value} °C'//刻度标签的内容格式器，支持字符串模板和回调函数两种形式
		}
	},
	series: [
		
		{
			name:'最低气温',
			type:'line',
			data:[1, -2, 2, 5, 3, 2, 0],
			//图表标注
			markPoint: {
				data: [
					//name:标注名称，value：标注值，xAxis和yAxis：标注的显示位置			                	
					{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
				]
			},
			//图表标线
			markLine: {
				data: [
					// type:标线的类型，支持 'average', 'min', 'max'
					{type: 'average', name: '平均值'}
				]
			} 
		}
	]
};

四、饼形图

var option = {
		title:{
			text:'饼形图'
		},
		tooltip : {},				
		series:[{
			name:'访问来源',
			type:'pie',
			radius : ['0','89%'],//饼图的半径，数组的第一项是内半径，第二项是外半径
			roseType: 'radius',//是否展示成南丁格尔图，通过半径区分数据大小
			data:[
				{value:335, name:'直接访问'},
				{value:310, name:'邮件营销'},
				{value:274, name:'联盟广告'},
				{value:235, name:'视频广告'},
				{value:400, name:'搜索引擎'}
			].sort(function (a, b) { return a.value - b.value; })
		}]  				
};

五、异步加载数据

1. 在服务器端创建文件夹json,在该文件夹下添加文件：data.json(文件中有中文需转为utf-8编码，使用properties文件转码)

{
	"categories":["\u886C\u886B","\u7F8A\u6BDB\u886B","\u96EA\u7EBA\u886B","\u88E4\u5B50","\u9AD8\u8DDF\u978B","\u889C\u5B50"],
	"data":[5, 20, 36, 10, 10, 20]
}

2. 拷贝jquery库文件到js文件夹下，并导入

<script src="js/jquery-1.8.0.min.js"></script>

3. 页面初始化

<button type="button">显示图表</button>
<div id="main" style="width:600px;height: 400px;"></div>

4. 添加javascript

<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main'));
	// 显示标题，图例和空的坐标轴
	myChart.setOption({
	    title: {
	        text: '异步数据加载示例'
	    },
	    tooltip: {},
	    legend: {
	        data:['销量']
	    },
	    xAxis: {
	        data: []
	    },
	    yAxis: {},
	    series: [{
	        name: '销量',
	        type: 'bar',
	        data: []
	    }]
	});
	
	$(":button").click(function(){
		// 异步加载数据
		$.get('json/data.json').done(function (data) {
		    // 填入数据
		    myChart.setOption({
		        xAxis: {
		            data: data.categories
		        },
		        series: [{
		            // 根据名字对应到相应的系列
		            name: '销量',
		            data: data.data
		        }]
		    });
		});
	});
	
	</script>

视频教程、笔记和源码下载地址

https://download.csdn.net/download/pcbhyy/10764260

api参考：

grid

axis:
position:’’//坐标轴的位置，xAxis:{position:‘top’},yAxis:{position:‘right’}
name:坐标轴名称
nameLocation:坐标轴名称显示位置,默认值为‘end’
可选：
‘start’
‘middle’ 或者 ‘center’
‘end’
yAxis.boundaryGap boolean, Array
坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。 示例：
boundaryGap: [‘20%’, ‘20%’]

yAxis.max number, string
[ default: null ]
坐标轴刻度最大值。
当设置成 function 形式时，可以根据计算得出的数据最大最小值设定坐标轴的最小值。如：
max: function(value) {
return value.max - 20;
}

yAxis.scale boolean
[ default: false ]
只在数值轴中（type: ‘value’）有效。
是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
在设置 min 和 max 之后该配置项无效。

类型：
bar：柱状图
line：折线图

series[i]-pie.roseType boolean, string
[ default: false ]
是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
‘radius’ 扇区圆心角展现数据的百分比，半径展现数据的大小。
‘area’ 所有扇区圆心角相同，仅通过半径展现数据大小。

series[i]-pie.radius Array
[ default: [0, ‘75%’] ]
饼图的半径，数组的第一项是内半径，第二项是外半径。
支持设置成百分比，相对于容器高宽中较小的一项的一半。
可以将内半径设大显示成圆环图（Donut chart）。

grid.tooltip.trigger string
[ default: ‘item’ ]
触发类型。
可选：
‘item’
数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
‘axis’
坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
‘none’
什么都不触发。