[JavaScript知识库]Echart 整理（方便查看）

制作一些 Echart图时，一直翻阅 Echarts官方文档API 。这次总结在这里，以后可以方便自己。如果大家感觉不错的话，也可以收藏，到时候随时可以回来查看，希望能帮到大家!!
总的来说，我自己把最主要的分为如下这几大类：

• title 标题
• legend 图例
• xAxis x轴
• yAxis y轴
• dataZoom 区域缩放
• tooltip 提示框
• visualMap 视觉映射组件
• geo 地图组件

option = {
	// 标题
	title: {
		text: "Main Title", // 大标题
		subtext: "Sub Title", // 次标题
		left: "center", // 根据left、right、top、bottom取位置
		top: "center",
		textStyle: {
		  fontSize: 30,
		  color: 'red'
		},
		subtextStyle: {
		  fontSize: 20
		},
		itemGap: 10, // 主副标题之间的间距。
		backgroundColor: 'transparent', // 标题背景色，默认透明。
	},
	// 图例组件
	legend: {
		type: 'scroll', // 'plain'：普通图例。缺省就是普通图例。'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。
		orient: 'vertical', // 'horizontal' 默认横向, 'vertical' 竖向排列
		right: 10,
		top: 20,
		bottom: 20,
		selectedMode: true, // 默认开启图例选择，可以设成 false 关闭。
		inactiveColor: '#ccc', // 图例关闭时的颜色。
		selected: { // 图例选中状态表。
			'系列1': true, // 选中'系列1'
			'系列2': false // 不选中'系列2'
		},
		textStyle:{
		
		},
		formatter: function (name) { // 配合tooltip 显示提示框内容
			return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
		},
		tooltip: { // 提示框
			show: true,
			position: function (pos, params, dom, rect, size) {
				  // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
				  var obj = {top: 60};
				  obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
				  return obj;
			},
			formatter: function (params, ticket, callback) {
				$.get('detail?name=' + params.name, function (content) {
					callback(ticket, toHTML(content));
				});
				return 'Loading';
			}
			
		},
		icon: 'circle', // 图例项的 icon。
		data: [{ // 图例的数据数组。
			name: '系列1',
			// 强制设置图形为圆。
			icon: 'circle',
			// 设置文本为红色
			textStyle: {
				color: 'red'
			}
		}],
		series: [{
			data: [],
			type: '',
		
		
		}]
	},

	// x轴相关属性
	xAxis: {
	  axisLabel: { // 坐标轴刻度标签的相关设置。
	      interval: 'auto' // 如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
	      rotate: 45, // 刻度标签旋转的角度, -90 度到 90 度。
	      margin: 8, // 刻度标签与轴线之间的距离。
	      // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
	      formatter: function (value, index) {
	          // 格式化成月/日，只在第一个刻度显示年份
	          var date = new Date(value);
	          var texts = [(date.getMonth() + 1), date.getDate()];
	          if (index === 0) {
	              texts.unshift(date.getYear());
	          }
	          return texts.join('/');
	      },
	      textStyle: {
	          color: function (value, index) {
	              return value >= 0 ? 'green' : 'red';
	          }
	      }
	  },
	  splitLine:{ // 坐标轴在 grid 区域中的分隔线。
	      show: true
	  }
	}
	
	// y轴相关属性
	yAxis: {
	    show: false, // 是否显示，true/false,默认true。
	    axisLabel: { // 坐标轴刻度标签的相关设置。
	        interval: 'auto' // 如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
	        rotate: 45, // 刻度标签旋转的角度, -90 度到 90 度。
	        margin: 8, // 刻度标签与轴线之间的距离。
	        // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
	        formatter: function (value, index) {
	            // 格式化成月/日，只在第一个刻度显示年份
	            var date = new Date(value);
	            var texts = [(date.getMonth() + 1), date.getDate()];
	            if (index === 0) {
	                texts.unshift(date.getYear());
	            }
	            return texts.join('/');
	        },
	        textStyle: {
	            color: function (value, index) {
	                return value >= 0 ? 'green' : 'red';
	            }
	        }
	    },
	    splitLine:{ // 坐标轴在 grid 区域中的分隔线。
	        show: true
	    }
	}
	
	// datazoom 用于区域缩放
	dataZoom: [{ // 内置在坐标系里。
	    type: "inside",
	    disabled: true, // 是否停止组件,默认true。
	    // 'none': 不过滤数据，只改变数轴范围。
	    // 'weakFilter'：只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
	    // 'filter' 效果是：过滤数据后使另外的轴也能自动适应当前数据的范围。
	    // 'empty'：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
	    filterMode: 'filter', 
	    start: 50, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
	    end: 100, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
	    startValue: 0, // 设置了start 则startvalue 无效
	    endValue: 10,
	    minSpan: 0, // 用于限制窗口大小的最小值（百分比值），取值范围是 0 ~ 100。设置了minValueSpan 则 minSpan 失效。
	    maxSpan: 100, // 用于限制窗口大小的最大值（百分比值），取值范围是 0 ~ 100。
	    minValueSpan: 3600 * 24 * 1000 * 5, // 用于限制窗口大小的最小值（实际数值）。设置为：3600 * 24 * 1000 * 5 表示 5 天。 在类目轴上可以设置为 5 表示 5 个类目。
	    maxValueSpan: 3600 * 24 * 1000 * 5, // 用于限制窗口大小的最大值（实际数值）。
	    orient: 'horizontal', // 布局方向 'horizontal'：水平。'vertical'：竖直。
	    zoomLock: true, // 如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
	    zoomOnMouseWheel: true, // 鼠标滚轮 true：能触发缩放。false：不能触发缩放。'shift'。'ctrl'。'alt'。
	    moveOnMouseMove: true, // 鼠标移动 true:能触发平移。false：不能触发平移。'shift'。'ctrl'。'alt'。
	    moveOnMouseWheel: true, // 鼠标滚轮 true:能触发平移。false：不能触发平移。'shift'。'ctrl'。'alt'。
	},{ // 滑动条型数据区域缩放组件
	    type: "slider", 
	    show: true,
	    backgroundColor: 'rgba(47,69,84,0)', // 组件背景颜色
	    handleIcon: '', // 两侧缩放手柄的 icon 形状
	    start: 50, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
	    end: 100, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
	    startValue: 0, // 设置了start 则startvalue 无效
	    endValue: 10,
	    minSpan: 0, // 用于限制窗口大小的最小值（百分比值），取值范围是 0 ~ 100。设置了minValueSpan 则 minSpan 失效。
	    maxSpan: 100, // 用于限制窗口大小的最大值（百分比值），取值范围是 0 ~ 100。
	    minValueSpan: 3600 * 24 * 1000 * 5, // 用于限制窗口大小的最小值（实际数值）。设置为：3600 * 24 * 1000 * 5 表示 5 天。 在类目轴上可以设置为 5 表示 5 个类目。
	    maxValueSpan: 3600 * 24 * 1000 * 5, // 用于限制窗口大小的最大值（实际数值）。
	    orient: 'horizontal', // 布局方向 'horizontal'：水平。'vertical'：竖直。
	    zoomLock: true, // 如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
	}],
	
	// 视觉映射组件
	visualMap: [
	    { // 第一个 visualMap 组件
	        type: 'continuous', // 定义为连续型 visualMap
	        show: true,
	        min: 0,
	        max: 100,
	        range: [0, 50000], // 自动随 min max 而改变的能力。
	        calculable: true, // 是否显示拖拽用的手柄
	        realtime: true, // 拖拽时，是否实时更新。
	        orient: 'vertical', // 横向 纵向 horizontal
	        inverse: 'false', // 是否反转 visualMap 组件。
	        precision: 2, // 数据展示的小数精度，默认为0，无小数点。
	        itemWidth: 20, // 图形的宽度，即长条的宽度。
	        itemHeight: 140, // 图形的高度，即长条的高度。
	        align: 'auto', // 指定组件中手柄和文字的摆放位置，'auto' 自动决定。orient: horizontal - 'right'/'left'。orient: vertical - 'bottom'/'top' 。
	        text: ['High', 'Low'], // 两端的文本
	        dimension: 1, // 指定用数据的『哪个维度』,series.data ,dimension 为 1 时，取第二列,默认取 data 中最后一个维度。
	        ...
	    },
	    { // 第二个 visualMap 组件
	        type: 'piecewise', // 定义为分段型 visualMap
	        ...
	    }
	],
}

• 额外知识一：

tooltip 提示框组件：
可以设置在全局，即 tooltip
可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip

可以设置在系列中，即 series.tooltip

可以设置在系列的每个数据项中，即 series.data.tooltip