ECharts.js快速上手

ECharts.js官网

一、ECharts快速上手

步骤1：引入 echarts.js 文件

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

步骤2：准备一个呈现图表的盒子

<div id="myEcharts" style="width: 600px;height:400px;"></div>

步骤3：初始化 echarts 实例对象

var myChart = echarts.init(document.getElementById('myEcharts'))

步骤4：配置项

//准备配置项
var option = { 
	// 直角坐标系 中的 x 轴
	xAxis: { 
		type: 'category', 
		data: ['小明', '小红', '小王'] 
	},
	//直角坐标系 中的 y 轴
	yAxis: { type: 'value' },
	series: [ 
		{ 
			name: '语文', 
			type: 'bar', 			// 图表类型 => bar柱状图 line折线图 pie饼图 （更多请查看官方文档）
			data: [70, 92, 87], 	// 图表数据 
			label: {...}, 			// 数值显示
			barWidth: {...}, 		// 柱宽度
			markPoint: {...}, 		// 最大值\最小值
			markLine: {...}, 		// 平均值
		} 
	] 
}

// 给 echarts 实例对象设置配置项
myChart.setOption(option)

二、通用配置

1、标题：title

var option = { 
	title: { 
		text: "成绩", 			// 标题文字 
		textStyle: { 
			color: 'red' 		// 文字颜色 
		},
		borderWidth: 5, 		// 标题边框 
		borderColor: 'green', 	// 标题边框颜色 
		borderRadius: 5, 		// 标题边框圆角 
		left: 20, 				// 标题的位置 
		top: 20 				// 标题的位置 
	} 
}

2、提示框：tooltip

var option = { 
	tooltip: { 
		trigger: 'item', 			//触发类型: item\axis
		triggerOn: 'click', 		//触发时机：mouseOver\click
		//字符串模板
		//formatter: '{b}:{c}' 		// 格式化显示：{b} 和 {c} 的含义在官方文档中有详细的描述
		//回调函数
		formatter: function (arg) { 
			return arg.name + ':' + arg.data 
		} 
	} 
}

3、工具按钮：toolbox

toolbox 是 ECharts 提供的工具栏, 内置有 导出图片，数据视图, 重置, 数据区域缩放, 动态类型切
换五个工具

var option = { 
	toolbox: { 
		feature: { 
			saveAsImage: {}, 		// 将图表保存为图片 
			dataView: {}, 			// 是否显示出原始数据 
			restore: {}, 			// 还原图表 
			dataZoom: {}, 			// 数据缩放 
			magicType: { 			// 将图表在不同类型之间切换,图表的转换需要数据的支持 
				type: ['bar', 'line'] 
			} 
		} 
	} 
}

4、图例: legend

用于筛选类别,需要和 series 配合使用

var option = { 
	legend: { 
		data: ['新增用户', '活跃用户'] //data 的值需要和 series 数组中某组数据的 name 值一致
	},
	xAxis: { 
		type: 'category', 
		data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'] 
	},
	yAxis: { type: 'value' },
	series: [ 
		{ 
			name: '新增用户', 
			type: 'bar', 
			data: [88, 92, 63, 77, 94, 80, 72, 86] 
		}, {
			name: '活跃用户', 
			type: 'bar', 
			data: [93, 60, 61, 82, 95, 70, 71, 86] 
		} 
	] 
}