Echarts使用心得

前言

Echarts是一个 JavaScript 的开源可视化图表库，可以快速画出许多图形，我们有时候会用到它，但是官方教程对于新手来说确实不友好，至少在我看来是这样的，看了我几天才大概有所了解，为了加深记忆，故在此记下，方便日后忘记可以回来查看

---

一、基础画图

基础画一个图，首先要知道的是重点在于配置项setOption,现在先不急了解，我们先简单画一个图

1、在页面创建一个div标签，id值为myChart

<div id="myChart" style=""width:300px;height:300px;"></div>

2、引入echarts.js并绘画，echats.js的 Github下载地址

 // 初始化echarts实例
 var myChart = echarts.init(document.getElementById('myChart'));
 
// 指定图表的配置项和数据
var option = {
  	xAxis: {
    	data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  	},
  	yAxis: {},
  	series: [{
    	name: '销量',
    	type: 'bar',
    	data: [5, 20, 36, 10, 10, 20]
  	}]
};
 
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

3、一开始还是挺好理解的，就是这两个步骤,你也可以选择封装一下

/**
 * Echarts绘画 
 * @param {String} id       元素id值
 * @param {Object} option   配置项
 */
function _Chart(id,option){
	var myChart = echarts.init(document.getElementById(id));
	myChart.setOption(option);
	return myChart;  // 有需要就返回，不需要可以去除
}

把上面第2步简化一下就是：(option和第2步的option 相同，这里就不写了）

_Chart('myChart',option);

有时候如果宽高不设死需要自适应，可以使用 resize() 方法，这时候 return myChart 的作用就出来了,这里就不写配置项option了

var myChart = _Chart('myChart',option);

/**
 * 简体页面宽高发生改变，使得Echarts所画图表自动适应 
 */
function _Resize(){
    myChart.resize();
    // ...这里可以写更多的图表自适应，如：myChart1.resize()、myChart2.resize()
}

window.addEventListener('resize', _Resize);

如果觉得麻烦，就用第2步就行，下面重点介绍配置项setOption

二、配置项setOption

下面这些为本人所用过的以及一些个人理解，如有错误还请看：官网配置项详情，也可以边看此文和官网一起学习

var option = {
	title:{}, 		// 标题
	legend:{}, 		// 图例（不知道怎么解释，看官网吧，那里有试一试）
	grid:{},		// 网格，这个可以控制图表的位置，设置图表上下左右的距离
	xAxis:{},		// X轴，这个用来设置X轴的
	yAxis:{},		// Y轴，这个用来设置Y轴的
	tooltip:{},		// 提示框， 鼠标滑过提示信息（我是这么认为的）
	toolbox:{},		// 工具栏,显示一下控件，如：导出图片，数据视图，动态类型切换，数据区域缩放，重置
	series:[],    	// 暂且称为数据配置吧，这里主要是决定你要画什么图形和一些数据以及配置的，如：柱形图、折线图
	backgroundColor:'', // 背景色，设置画布的背景色，默认为透明
	textStyle:{},  	// 全局的字体样式，写在最外面就是全局配置，写在里面就是局部
	darkMode:false	// 是否是暗黑模式
	
	// ...... 暂时我用过的就这么点，想看更多的可以自己看看官网
}

下面一些为我常用配置，并未盖全，更多可以看：官网配置项详情

1、title

title是该画布的标题，包含主标题和副标题,里面配置项有

title:{
	 show:true,   	  	// 隐藏或显示标题  true-显示 false-隐藏
	 text:'',			// 标题文本
	 textStyle:{  		// 局部字体样式，写在最外面就是全局配置，写在里面就是局部
	 	color:'',		// 文字颜色
	 	fontStyle:'',	// 文字风格 normal-普通 italic-斜体 oblique-类似于斜体
	 	fontSize:'',	// 字体大小
	 	// ............更多请看官网
	 },
	 textAlign:'',		// 对齐方式，默认 auto，可选: left-左 center-中 ringht-右  
	 top:0,				// 标题距离顶部的距离，默认auto 既然有了 top 那么肯定还有 left,right,bottom,这里不一一介绍了
	 // ......更多请看官网
}

2、legend

官方解释：图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。不懂可以看看上面那个官网地址那里面的试一试

legend:{
	show:true,			// 隐藏或显示 true-显示 false-隐藏
	type:'plain', 		// 图例的类型（没怎么用过，我也分不清他俩有啥区别）plain-普通图例 scroll-可滚动翻页的图例
	left:'auto',		// 图例组件离容器左侧的距离,同样有 top,right,bottom
	orient:'', 			// 图例列表的布局朝向 horizontal-水平 vertical-垂直
	itemGap:10,			// 图例每项之间的间隔
	itemWidth:25,		// 图例标记的图形宽度
	// ......更多请看官网
}

3、grid

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。这个可以控制图表的位置，设置图表上下左右的距离

grid:{
	 show:false, 	// 隐藏或显示 true-显示 false-隐藏
	 left:20,		// grid 组件离容器左侧的距离 top,right,bottom
	 // ......更多请看官网 一般我就用这几个属性
}

4、xAxis

图表的X轴

xAxis:{
	show:false, 	// 隐藏或显示 true-显示 false-隐藏
	type:'',		// 坐标类型 value- 数值轴 category-类目轴 time-时间轴 log-对数轴
	name:'',		// 坐标轴名称
	nameLocation:'',// 坐标轴名称显示位置 start-开头 middle或center-中间 end-末尾
	nameTextStyle:{},// 坐标轴名称的文字样式
	nameGap:10,		// 坐标轴名称与轴线之间的距离
	min:0,			// 坐标轴刻度最小值
	max:0,			// 坐标轴刻度最大值
	axisLine:{		// 坐标轴轴线相关设置
		lineStyle:{			// 坐标线条样式
			 color:'',		// 线条颜色
			 width:1,		// 线条宽度
			 // ......更多请看官网 一般我就用这几个属性
		},		
	},	
	axisTick:{	 // 坐标轴刻度相关设置
		show:true,   			// 显示隐藏 
		alignWithLabel:false,	// false-刻度线和标签不对齐 true-刻度线和标签对齐 
		inside:false,			// 坐标轴刻度是否朝内，默认朝外 true-朝内 false-朝外
		lineStyle:{},			// 刻度线样式
	},	
	axisLabel:{	// 坐标轴刻度标签的相关设置
		show:true,			   // 是否显示刻度标签
		margin:8,			   // 刻度标签与轴线之间的距离
		color:'',			   // 刻度标签文字的颜色
		data:[],			   // 类目数据，在类目轴（type: 'category'）中有效
		// formatter: '{value} kg',  // 使用字符串模板，模板变量为刻度默认标签 {value}
		// 或
		// formatter: function (value, index) {  // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
		//    return value + 'kg';
		// }
	},
	axisPointer:{			// 坐标轴指示器配置项,鼠标滑过显示数据
		 show:true,			// 显示隐藏
		 type:'',			// 指示器类型,line-直线指示器 shadow-阴影指示器 none-无指示器
		 label:{			// 坐标轴指示器的文本标签
			formatter: '',  // 文本标签文字的格式化器 {value} 为轴的值
		}
	}
	// ......更多请看官网 
}

5、yAxis

图标的y轴，与上面xAxis一样，xAxis有的配置项，yAxis也有，参考上面即可

6、tooltip

提示框组件

tooltop:{
	 show:true,			// 显示/隐藏
	 trigger:''      	// 触发类型 item-数据项图形触发 axis-坐标轴触发 none-什么都不触发
	 axisPointer:{},	// 坐标轴指示器配置项
	 // ......更多请看官网
}

7、toolbox

工具栏，这里就不写了，看看官网就行

8、series

重头戏在这个，series可以嵌套多个对象

series:[
	{
		type:'',			// line-折线/面积图  
						 	// bar-柱形图 
							// pie-饼图 
							// radar-雷达图
							// gauge-仪表盘
							// .......目前本人用过就这些，其他还得看官网，这里并未盖全
							
	   	name:'',			// 系列名称，用于tooltip的显示(就是鼠标滑过出现)
	   	colorBy:'',			// series-同一系列中的所有数据都是用相同的颜色 data-每个数据项都使用不同的颜色
	   	symbol:'',			// 标记的图形 circle-圆形 rect-正方形 也可以传svg或png......还是看官网演示吧
	   	symbolSize:'',		// 标记图形的大小 可以是 number Array Function
	   	symbolRotate:'',	// 标记的旋转角度（而非弧度）可以是 number Function
	   	symbolKeepAspect:true, // 如果 symbol 是 path:// 的形式，是否在缩放时保持该图形的长宽比
	   	stack:true,			// 数据堆叠，这个还没用过
	   	connectNulls:false, // 是否连接空数据
	   	clip:true,			// 是否裁剪超出坐标系部分的图形
	   	step:'',			// 是否是阶梯线图 可以设置为 true 显示成阶梯线图，也支持设置成 'start', 'middle', 'end'
	   	label:{				// 图形上的文本标签
			show:true,		// 是否显示标签
			position:'',	// 标签的位置 可以是 string Array
			distance:0,		// 距离图形元素的距离
			rotate:90,		// 标签旋转
			offset:[10,10], // 是否对文字进行偏移
			formatter:'',	// 标签内容格式器 string Function {a}：系列名 {b}：数据名 {c}：数据值
			color:'',		// 颜色
		},
		labelLine:{			// 标签的视觉引导线配置
			show:true,		// 是否显示视觉引导线
			showAbove:true,	// 是否显示在图形上方
			smooth:'',		// 是否平滑视觉引导线，默认不平滑 设置成 true 平滑显示，设置为 0 到 1 的值，表示平滑程度
			lineStyle:{},	// 设置标签视觉引导线的样式
		},
		lineStyle:{			// 线条样式
			color:'',		// 线的颜色
			width:2,		// 线宽
		},
		areaStyle:{			// 区域填充样式。设置后显示成区域面积图。
			color:'',		// 填充的颜色
			origin:'',		// 图形区域的起始位置 auto-默认 start-底部 end-顶部 number 填充指定数值到数据间的区域
			opacity:1,		// 图形透明度 0-1
		},
		emphasis: {			// 折线图的高亮状态
		    focus: '', 		// none-不淡出其它图形 self-只聚焦（不淡出） series-聚焦当前高亮的数据
		    blurScope: '', 	// coordinateSystem-淡出范围为坐标系 series-淡出范围为系列  global-淡出范围为全局
		},
		// .......更多请看官网
	}
]

写多了不难发现几个常见的属性值（请记住这个几个属性）：

• lineStyle：线条样式
• splitNumber：分割段数
• axisLine：轴线相关配置
• splitLine：分隔线样式
• axisTick：刻度样式
• axisLabel：刻度标签
• itemStyle：图形样式
• label ：图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
• labelLine：标签的视觉引导线配置

每个type的选项不同，但这几个属性值几乎每个都包含有，有些配置可能会有些差异。用多几次，你会发现有些属性可以写在局部，也可以写在全局，如: textStyle , lineStyle ……这些都是设置图标样式的，设置样式的属性一般可以在很多地方可以看到，就像在套娃哈哈哈。可以看看实例，你想画什么图直接看示例，然后点进去修改，改到符合自己的样式，多练几次手应该就差不多熟悉了。另外，本人写有一些例子可供参考练手：

Gitee地址

演示地址