echarts 自定义Z值直方图

直方图"/>

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,17var 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 系列需要开发者自己提供图形渲染的逻辑。这个渲染逻辑一般命名为 renderItemlabel: {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>