echarts基本使用

普通文件

一、引入 echarts 文件

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/2.1.10/echarts.js"></script>

二、准备呈现的一个容器

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

三、初始化 echart实例对象（参数：dom决定最终呈现的位置）

var mCharts = echarts.init(document.querySelector('div'))

四、准备配置项

var options = {
	title: { // 标题
		text: '成绩展示',
		textStyle: {
			color: '#f90'
		},
		borderWidth: 5,
		borderColor: '#4096ef',
		borderRadius: 5,
		left: 10,
		top: 10
	},
	tooltip: { // 提示框
		// trigger: 'item', // 触发类型 item 对应 series 中的每一项
		trigger: 'axis', // 触发类型 轴
		triggerOn: 'click', // 触发时机 click / mouseover
		// formatter: '${b} 的成绩是 ${c}', // 格式化  字符串模板 和 回调函数两种
		formatter: function (arg) {
			return arg[0].name + '的成绩是' + arg[0].data
		},
	},
	toolbox: { // 工具栏
		feature: {
			 saveAsImage: {}, // 导出图片
			 dataView: {}, // 数据视图
			 restore: {}, // 重置
			 dataZoom: {}, // 区域缩放
			 magicType: { // 动态图表类型转换
			 	type: ['bar', 'line']
			 }
		}
	},
	legend: { // 图例，用于筛选系列, 需要和 series 配合使用 
		// legend 中的 data 是一个数组
		// legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致
		data: ['语文', '数学']
	},
	// 竖轴 begin
	xAxis: { // x 轴 配置项
		type: 'category', // 类目轴
		data: ['小明', '小红', '小王']
	},
	yAxis: { // y 轴 配置项
		type: 'value' // 数值轴
	},
	// 竖轴 end
	// 横轴 begin
	// xAxis: {
	//	type: 'value' // 数值轴
	//},
	//yAxis: { // y 轴 配置项
	//	type: 'category', // 类目轴
	//	data: ['小明', '小红', '小王']
	//},
	// 横轴 end
	series: [ // 系列
		{
			name: '语文',
			type: 'bar',
			data: [70, 92, 87],
			markPoint: {
				data: [
					{
						type: 'max',
						name: '最大值' 
					},
					{
						type: 'min',
						name: '最小值' 
					}
				]
			},
			markLine: {
				data: [
					{
						type: 'average',
						name: '平均值'
					}
				]
			},
			label: {
				show: true,
				rotate: 60,
				position: 'top'
			},
			barWidth: '30%'
		},
		{
			name: '数学',
			type: 'bar',
			data: [90, 68, 76]
		}
	]
}

五、将配置项给 echarts 实例对象

mCharts.setOptions(options)