Echarts图表工具使用

一、引用 Echarts

	<script src="echarts-3.2.2/echarts-3.2.2.min.js"></script>

二、Echarts 容器

	<div id="eachartsID"></div> 

三、Echarts 初始化

	var domEchart = echarts.init(document.getElementById('eachartsID'));         // 实例化Eachart
	
	var data = [
		[
			"互联网",
			{
				value:166,
				itemStyle:{
					normal:{
						color:'#0077C9'
					}
				}
			},{
				value:59,
				itemStyle:{
					normal:{
						color:'#00BAF7'
					}
				}
			}
		],
		[
			"语音",
			{
				value:135,
				itemStyle:{
					normal:{
						color:'#00BD5B'
					}
				}
			},{
				value:59,
				itemStyle:{
					normal:{
						color:'#00BAF7'
					}
				}
			}
		]];
		
	var option = {
		title : {
			x: 10,
			y: 145,
			text: '业务总数：123 '+'\n'+'告警数：20',
			textStyle: {
				fontSize: 14,
				fontStyle: 'normal',
				fontWeight: 'normal'
				//fontWeight: 'bold'
			}
		},
		 tooltip : {
			trigger: 'axis',
			axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		xAxis: {
			data: data.map(function (item) {
				return item[0];
			})
		},
		yAxis: {
			splitLine: {
				show: false
			}
		},
		visualMap: {
			x: 10,
			y: 0,
			borderWidth:1,
			borderColor:"#BBBBBB",
			backgroundColor:"#F7F7F7",
			orient:'vertical',//更改图表显示格式
			type:'piecewise',
			categories: ['互联网', '语音'],
			outOfRange: {},
			inRange: {
				color:['#0077C9', '#00BD5B']
			}
		},
		grid: {
			width:'65%',
			height:'80%',
			x:170,
			y:10,
			borderWidth:1,
			borderColor:"#BBBBBB",
			backgroundColor:"#F7F7F7"
		},
		series: [{
			name: '业务量',
			type: 'bar',
			label: {
				normal: {
					show: true,
					position: 'top'
				}
			},
			data: data.map(function (item) {
				return item[1];
			})
		},{
			name: '告警',
			type: 'bar',
			label: {
				normal: {
					show: true,
					position: 'top'
				}
			},
			data: data.map(function (item) {
				return item[2];
			})
		}]
	}
		
	domEchart.setOption(option);

四、Echarts 事件绑定

	var timeFn = null;
	domEchart.on('click', function (params) {
		doSomething();
	});
	
	domEchart.on('dblclick', function (params) {
		doSomething();
	});