glassmapecharts linear配置项内容和展示

      var xAxisPanelQty =3; //xAxis panel qty
var yAxisPanelQty =6; //yAxis panel qty
var QpanelSplitX = 6; //panel split xAxis qty
var QpanelSplitY = 6; //panel split yAxis qty
var glassWidth = 2200;
var glassHeight = 2500;
var leftposition = 10; 
var topposition = 10;
var rightposition = 4;
var buttomposition = 6;
var visualMapMinValue = 0;
var visualMapMaxValue = 100;
var panelshow = true; //panel grid show
var grids = [];
var xAxes = [];
var yAxes = [];
var series = [];
var titles = [];

var xAxisIndexByZoom = []; //设置Zoom操作时关联的X坐标系
var yAxisIndexByZoom = []; //设置Zoom操作时关联的Y坐标系

var dataRect = [
        [1, 2, 2, 1],
        [7, 5, 8, 4], 
        [9,10,10, 9],
        [10,11,11,10]
    ];
    
// var colorRectEmphasis = {
//                         type: 'linear',
//                         x: 0,
//                         y: 0,
//                         x2: 1,
//                         y2: 1,
//                         colorStops: [{
//                             offset: 0, color: 'black' // 0% 处的颜色
//                         }, {
//                             offset: 0.5, color: 'red' // 50% 处的颜色
//                         }, {
//                             offset: 1, color: 'blue' // 100% 处的颜色
//                         }]

//                 };
// var colorRect = {
//     type: 'radial',
//     x: 0.5,
//     y: 0.5,
//     r: 0.5,
//     colorStops: [{
//                             offset: 0, color: 'red' // 0% 处的颜色
//                         }, {
//                         //     offset: 0.5, color: 'red' // 50% 处的颜色
//                         // }, {
//                             offset: 1, color: 'blue' // 100% 处的颜色
//                         }]

// };
var colorRect = 'rgba(255,0,0,0.3)';                
dataRect = echarts.util.map(dataRect, function (item) {
    return {
        value: [item[0]*glassWidth/xAxisPanelQty/QpanelSplitX,item[1]*glassHeight/yAxisPanelQty/QpanelSplitY,item[2]*glassWidth/xAxisPanelQty/QpanelSplitX,item[3]*glassHeight/yAxisPanelQty/QpanelSplitY],
        itemStyle: {

                color: colorRect

            
        },
        // emphasis :{
        //     itemStyle: {
        //         color: colorRectEmphasis
        //     }
        // }
       
    };
});

var data = [];

var random = function (max) {
    return (Math.random() * max).toFixed(3);
};
// random data
for (var i = 0; i < 50; i++) {
    data.push([random(glassWidth), random(glassHeight), random(visualMapMaxValue)]);
}

titles.push({
    text: "Product GlassMap (Width:"+glassWidth+"mm,Height:"+glassHeight+"mm)",
    left: 'center',
    textAlign:'left'
});
//第个Panel 再进行分割
var qpanelXAxisCoordData =[];
for(m=0;m<QpanelSplitX;m++){
    qpanelXAxisCoordData.push('');
}
var qpanelyAxisCoordData =[];
for(n=0;n<QpanelSplitY;n++){
    qpanelyAxisCoordData.push('');
}

//把整个glass 设置成第一个grid
//给玻璃设置外边沿
grids.push({
    left: (leftposition-1)+'%',
    show:true,
    borderWidth: 0.5,
    backgroundColor: '#fff',
    shadowColor: 'rgba(0, 0, 0, 0.3)',
    shadowBlur: 1,
    height: 100-(topposition-1)-(buttomposition-1)+'%',
    top: (topposition-1)+'%',
    width: 100-(rightposition-1)-(leftposition-1)+'%',
    right: rightposition-1 + '%'
});
//设置glass中实际使用面积的grid
grids.push({
    left: (leftposition)+'%',
    show:true,
    borderWidth: 0.5,
    backgroundColor: '#fff',
    shadowColor: 'rgba(0, 0, 0, 0.3)',
    shadowBlur: 1,
    height: 100-(topposition)-(buttomposition)+'%',
    top: (topposition)+'%',
    width: 100-(rightposition)-(leftposition)+'%',
    right: rightposition + '%'
});
//给第一个grid 添加坐标轴
var xAxisCoordData =[];
for(m=0;m<xAxisPanelQty;m++){
    xAxisCoordData.push((glassWidth/xAxisPanelQty*m).toFixed(0).toString());
}
var yAxisCoordData =[];
for(n=0;n<yAxisPanelQty;n++){
    yAxisCoordData.push('');
}
xAxes.push({
    // data: xAxisCoordData,
        name: '',  //该处虽然是设置第一个x轴，但当第一个不设置时，第二个的name 显示位置不正常
        nameLocation: 'center',
        min: 0,
        max: glassWidth,
        splitNumber: xAxisPanelQty,
        // interval:(2200/xAxisPanelQty).toFixed(2),
        interval:glassWidth/xAxisPanelQty,
        splitLine: {
            show:false
        } ,
        axisLine: {
                show: true
            },
        axisLabel : {
            show: false,
        },
        // offset: 500,
        axisTick : {
            // show: true,
            inside: true//该处虽然是设置第一个x轴，但当第一个不设置时,第二个的显示不正常
        },
        gridIndex: 1  //default is 0     
        
    });
xAxes.push({
        name: 'Width (mm)',
        nameLocation: 'center',
        nameGap:'30',
        min: 0,
        max: glassWidth,
        splitLine: {
            show:false
        },
        axisLine:{
          show : true  
        },
        splitNumber: xAxisPanelQty,
        // interval:(2200/xAxisPanelQty).toFixed(2),
        interval:glassWidth/xAxisPanelQty,
        axisLabel : {
            show: true,
            formatter:function(value,index){
                return value.toFixed(0).toString();
            }
        },
        axisTick: {
            // show: true
        },
        // offset:'100%',
        gridIndex: 1  //default is 0         
    });
xAxisIndexByZoom.push(1);
yAxes.push({
        name: 'Height (mm)',
        nameLocation: 'center',
        nameGap:'60',
        min: 0,
        inverse: true,
        max: glassHeight,
        splitNumber: yAxisPanelQty,
        // interval:(2500/yAxisPanelQty).toFixed(1),
        interval:glassHeight/yAxisPanelQty,
        splitLine: {
            show : false
        },
        axisLine: {
                show: true
            },
        axisLabel : {
            show: true,
            formatter: function(value,index){
                return value.toFixed(0).toString();
            }
        },
        axisTick : {
            show: true
        },
        gridIndex: 1  //default is 0            
    });
yAxes.push({
        axisLine: {
                show: true
            },
        gridIndex: 1  //default is 0
    });
yAxisIndexByZoom.push(0);
//每个panel 都对应成一个grid
for(var i=0 ; i < xAxisPanelQty ; i++) {
    for( var j =0 ; j < yAxisPanelQty ; j++ ) {
        if(panelshow) {
            titles.push({
                text: String.fromCharCode(65+i)+(j+1),
                top: topposition + (j)/yAxisPanelQty*(100-topposition-buttomposition)+1/yAxisPanelQty*(100-topposition-buttomposition)/2+'%',
                left: (leftposition) + (i)/xAxisPanelQty*(100-leftposition-rightposition)+1/xAxisPanelQty*(100-topposition-buttomposition)/2+ '%',
                textAlign: 'center',
                textBaseline: 'middle', //
                // textVeticalAlign: 'middle'
            });
        }
        
        
        if(i===0){
            if ( j===0 ) {
                grids.push({
    	            left:leftposition +'%',
    	            show: panelshow,
    	            borderWidth: 0,
    	            backgroundColor: '#fff',
    	            shadowColor: 'rgba(0, 0, 0, 0.3)',
    	            shadowBlur: 1,
    	            height:1/yAxisPanelQty*(100-topposition-buttomposition)+'%',
    	            top: topposition +'%',	            
    	            width: (1/xAxisPanelQty*(100-leftposition-rightposition))+'%',
    	            //右边距right的位置：左边100先减去第一个左移的leftposition%，再减去宽度 (1/xAxisPanelQty*(100-leftposition))+'%'
    	            right: ((100-leftposition)-(1/xAxisPanelQty*(100-leftposition-rightposition)))+'%' 
        	    });
        	    
        	}else{
        	    
                grids.push({
                    left:((leftposition)+(i)/xAxisPanelQty*(100-leftposition-rightposition))+'%',//除去第一个左边距的4%,剩余渐分都以96%进行分割
                    show: panelshow,
                    borderWidth: 0,
                    backgroundColor: '#fff',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 1,
                    height: 1/yAxisPanelQty*(100-topposition-buttomposition)+'%',
                    // top: (100-topposition)-(j/yAxisPanelQty*(100-topposition-buttomposition))+ '%',
                    top: topposition + j/yAxisPanelQty*(100-topposition-buttomposition)+'%',
                    Width: (1/xAxisPanelQty*(100-leftposition-rightposition))+'%',
                    //右边距right的位置：左边100%先减去第一个左移的leftposition%，再减去(100-leftposition)%为起始的该grid的左边距(i/xAxisPanelQty*(100-leftposition))，再减去宽度 (1/xAxisPanelQty*(100-leftposition))+'%'
                    right:((100-leftposition)-(i/xAxisPanelQty*(100-leftposition-rightposition))-(1/xAxisPanelQty*(100-leftposition-rightposition)))+'%'
        	   });
        	   
        	}
        	
        }else {
            if ( j===0 ) {
                grids.push({
    	            left:((leftposition)+(i)/xAxisPanelQty*(100-leftposition-rightposition))+'%',
    	            show: panelshow,
    	            borderWidth: 0,
    	            backgroundColor: '#fff',
    	            shadowColor: 'rgba(0, 0, 0, 0.3)',
    	            shadowBlur: 1,
    	            height:1/yAxisPanelQty*(100-topposition-buttomposition)+'%',
    	            top: topposition +'%',	            
    	            width: (1/xAxisPanelQty*(100-leftposition-rightposition))+'%',
    	            //右边距right的位置：左边100先减去第一个左移的leftposition%，再减去宽度 (1/xAxisPanelQty*(100-leftposition))+'%'
    	            right: ((100-leftposition)-(1/xAxisPanelQty*(100-leftposition-rightposition)))-(1/xAxisPanelQty*(100-leftposition-rightposition))+'%' 
        	    });
        	}else{
        	    
                grids.push({
                    left:((leftposition)+(i)/xAxisPanelQty*(100-leftposition-rightposition))+'%',//除去第一个左边距的4%,剩余渐分都以96%进行分割
                    show: panelshow,
                    borderWidth: 0,
                    backgroundColor: '#fff',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 1,
                    height: 1/yAxisPanelQty*(100-topposition-buttomposition)+'%',
                    top: topposition + j/yAxisPanelQty*(100-topposition-buttomposition)+'%',
                    Width: (1/xAxisPanelQty*(100-leftposition-rightposition))+'%',
                    //右边距right的位置：左边100%先减去第一个左移的leftposition%，再减去100-leftposition%为起始的该grid的左边距(i/xAxisPanelQty*(100-leftposition-rightposition))，再减去宽度 (1/xAxisPanelQty*(100-leftposition-rightposition))+'%'
                    right:((100-leftposition)-(i/xAxisPanelQty*(100-leftposition-rightposition))-(1/xAxisPanelQty*(100-leftposition-rightposition)))+'%'
        	   });
        	}
        }
        //给每一个panel对应的grid 添加坐标轴
        xAxes.push({
        	data: qpanelXAxisCoordData,
        	axisLine: {
                show: panelshow
            },
            splitLine: {
                show: true
                } ,
            axisLabel : {
                show: true
                },
            axisTick : {
                show: false
                },
            // axisLine: {
            //     show: true
            // },
            gridIndex: grids.length -1
        });
        xAxes.push({
            axisLine: {
                show: panelshow
            },
            gridIndex: grids.length -1 ,
            // axisLine: {
            //     show: false
            // }
        });
        xAxisIndexByZoom.push((grids.length-2)*2);
        yAxes.push({
            data:qpanelyAxisCoordData,
            axisLine: {
                show: panelshow
            },
            splitLine: {
                    show : true
                },
            axisLabel : {
                    show: false
                },
            axisTick : {
                    show: false
            },
            // axisLine: {
            //     show: false
            // },
            gridIndex: grids.length -1  
        });
        yAxes.push({
            axisLine: {
                show: panelshow
            },
            gridIndex: grids.length -1 ,
            // axisLine: {
            //     show: false
            // }
        });
        yAxisIndexByZoom.push((grids.length-2)*2);
    }
}
//设置series
series.push({
    //example data : [xAxisCoordData,yAxisCoordData,value]
    data:data,
    type:'scatter'
},{
    type:'custom',
    coordinateSystem: 'cartesian2d',
    xAxisIndex: 1,
    yAxisIndex: 0,
    renderItem: function (params, api) {
        var yValue = api.value(3);
        var start = api.coord([api.value(0),  api.value(3)]);
        var end = api.coord([api.value(2), api.value(1)]);
        // var size = api.size([api.value(2)-api.value(0),api.value(1)-api.value(3)]);
        var width = api.size([10, 100])[0] * ((api.value(2)-api.value(0))/10);
        var height = api.size([10, 100])[1] * ((api.value(1)-api.value(3))/100);
        var rectShape = echarts.graphic.clipRectByRect({
            x: start[0],
            y: start[1],
            width: width,
            height: height
        }, {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
        });
    
        return (
            rectShape && {
                type: 'rect',
                shape: rectShape,
                style: api.style()
            }
        );
            

    },
    

    dimensions: ['left', 'top', 'right','bottom'],
    encode: {
            x: [0, 2],      // 表示维度 0、2映射到 x 轴。
            y: [3, 1],              // 表示维度 1，3 映射到 y 轴。
            // tooltip: [0, 1, 2, 3] // 表示维度 0, 1, 2, 3 会在 tooltip 中显示。
        },
    data: dataRect
});

option = {
    grid: grids,
    title: titles,
    xAxis: xAxes,
    yAxis: yAxes,
    series: series,
    toolbox: {
        show: true,
        feature: {
            dataView: {readOnly: true},
            restore: {},
            saveAsImage: {}
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            if(params.value.length ===4){
                return "start["+params.value[0]+","+params.value[1]+"]"+"<br/>"+"end["+params.value[2]+","+params.value[1]+"]";
            }
            
            return params.name + ' position: ['+params.value[0]+','+params.value[1]+']'+'<br/>value:'+(params.value[2]);
        }
    },
    visualMap: {
        type: 'continuous',
        min: visualMapMinValue,
        top: 0,
        orient:'vertical',
        max: visualMapMaxValue,
        text:['High','Low'],
        realtime: false,
        calculable : true,
        color: ['orangered','yellow','blue'],
        seriesIndex : 0
    },
    dataZoom: [
        {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: xAxisIndexByZoom,
            filterMode: 'filter',
            showDataShadow: false,
            height: 10,
            handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
        handleSize: 20,
        handleStyle: {
            shadowBlur: 6,
            shadowOffsetX: 1,
            shadowOffsetY: 2,
            shadowColor: '#aaa'
        },
        borderColor: 'transparent',
        backgroundColor: '#e2e2e2',
        },
        {
            id: 'dataZoomY',
            type: 'slider',
            yAxisIndex: yAxisIndexByZoom,
            filterMode: 'filter',
            showDataShadow: false,
            width:10,
            handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
        handleSize: 20,
        handleStyle: {
            shadowBlur: 6,
            shadowOffsetX: 1,
            shadowOffsetY: 2,
            shadowColor: '#aaa'
        },
        borderColor: 'transparent',
        backgroundColor: '#e2e2e2',
        },
        {
            id: 'dataZoomXinside',
            type: 'inside',
            xAxisIndex: xAxisIndexByZoom,
            filterMode: 'filter'
        },
        {
            id: 'dataZoomYinside',
            type: 'inside',
            yAxisIndex: yAxisIndexByZoom,
            filterMode: 'filter'
        }
    ],
};