echarts 自定义Z值直方图

<script>
			$(function() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main'));				

				// 指定图表的配置项和数据
				var data = [
				//   维度0   维度1  维度2  维度3
					[-15, -5, 45, 'A'], // 这是第一个 dataItem
					[-5, -3, 150, 'B'], // 这是第二个 dataItem
					[-3, -1, 390, 'C'], // 这是第三个 dataItem
					[-1, 1, 520, 'D'], // 这是第四个 dataItem
					[1, 4, 280, 'E'], // 这是第五个 dataItem
					[4, 10, 220, 'F'], // 这是第六个 dataItem
					[10, 15, 70, 'G'], // 这是第七个 dataItem
					[15, 22, 170, 'H'] // 这是第八个 dataItem
				];
				var colorList = ['#4f81bd', '#c0504d', '#9bbb59', '#604a7b', '#948a54', '#e46c0b', 'green', '#436EEE'];

				data = echarts.util.map(data, function(item, index) {
					return {
						value: item,
						itemStyle: {
							normal: {
								color: colorList[index]
							}
						}
					};
				});
				

				/*
					params：包含了当前数据信息和坐标系的信息。
					api：是一些开发者可调用的方法集合。
					api.value(...)，意思是取出 dataItem 中的数值。例如 api.value(0) 表示取出当前 dataItem 中第一个维度的数值。
					api.coord(...)，意思是进行坐标转换计算。例如 var point = api.coord([api.value(0), api.value(1)]) 表示 dataItem 中的数值转换成坐标系上的点。
					api.size(...) 函数，表示得到坐标系上一段数值范围对应的长度。
					shape 属性描述了这个矩形的像素位置和大小。
				*/
				
				function renderItem(params, api) {
					// 对于 data 中的每个 dataItem，都会调用这个 renderItem 函数。
            		// （但是注意，并不一定是按照 data 的顺序调用）
            		
					var yValue = api.value(2); // 3,15,12,22,7,17
					var start = api.coord([api.value(0), yValue]); //将数据值映射到坐标系上。
					var size = api.size([api.value(1) - api.value(0), yValue]);
					var style = api.style();				
					
					// 这里返回为这个 dataItem 构建的图形元素定义。
					return {
						type: 'rect', // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
						shape: { //shape 属性描述了这个矩形的像素位置和大小。
							x: start[0],
							y: start[1],
							width: size[0],
							height: size[1]
						},
						style: style, // 用 api.style(...) 得到默认的样式设置。这个样式设置包含了option 中 itemStyle 的配置和视觉映射得到的颜色。
                
					};
				}

				option = {
					title: {
						text: 'Z值直方图',
						left: 'center'
					},
					tooltip: {},
					xAxis: {
						//scale: true, //是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
						splitLine: { //是否显示分隔线。默认数值轴显示，类目轴不显示。
							lineStyle: {
								type: 'dashed'
							},
						},
						min: -15,
						max: 25,						
						splitNumber:10, //坐标轴的分割段数，	

					},
					yAxis: {
						type: 'value', //坐标轴类型
						name: 'Z值',
						nameLocation: 'center',
						nameGap: 40,
						splitLine: { //是否显示分隔线。默认数值轴显示，类目轴不显示。
							lineStyle: {
								type: 'dashed'
							},
						},
						min: 0,
						max: 550,
						interval: 550 / 11,
						//splitNumber:11, //坐标轴的分割段数，						
						axisLine: {
							show: true, //是否显示坐标轴轴线。
							onZero: false, //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
							//symbol:'arrow', //轴线两边的箭头
							lineStyle: {
								width: 2,
							},
						},
					},
					series: [{
						type: 'custom',
						renderItem: renderItem, //custom 系列需要开发者自己提供图形渲染的逻辑。这个渲染逻辑一般命名为 renderItem
						label: {
							normal: {
								show: true,
								position: 'top'
							}
						},
						dimensions: ['from', 'to', 'profit'], //定义了每个维度的名称。这个名称会被显示到默认的 tooltip 中。
						encode: { //可以定义 data 的哪个维度被编码成什么
							x: [0, 1], // data 中『维度0』和『维度1』对应到 X 轴
							y: 2, // data 中『维度2』对应到 Y 轴
							tooltip: [0, 1, 2], // 表示维度 0、1、2 会在 tooltip 中显示。
							itemName: 3 // 表示维度 3指定 tooltip 中数据项名称。
						},
						data: data
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			});
</script>