echarts开发

页面包含多个echarts，初始化页面是计算页面展示echarts个数及页面高度，赋予各echarts块的高度，保持各echarts高度一致。

//获取页面的高度并赋值给个table及下属的元素，避免出现echarts高度不一致的问题
function initHeight(){
	//设定每一个的echarts的高度为252
	var   initEcharts=252;
	//获取页面的总高度
	var winHeight=$(window).height();
	//获取页面查询的高度
	var  queryTabHeight=$("#queryTab").height();
	// echarts内容区总大小 3个区域总大小
	var AllTabHeight=winHeight-queryTabHeight;
	//每一个echarts高度
	var nrTabHeight=AllTabHeight/3*0.86;
	if(nrTabHeight<initEcharts){
		nrTabHeight=initEcharts;
	}
	//每一个echarts主题的高度
	var  titleTabHeight=nrTabHeight/0.86*0.14;
	$("#rklsdjzb").height(nrTabHeight);
	$("#rklsdjzbTitle").height(titleTabHeight);
	$("#lssgkdpm").height(nrTabHeight);
	$("#lssgkdpmTitle").height(titleTabHeight);
	$("#lssgdhpm").height(nrTabHeight);
	$("#lssgdhpmTitle").height(titleTabHeight);
	$("#lsrkslqs").height(nrTabHeight);
	$("#lsrkslqsTitle").height(titleTabHeight);
	$("#jsjeqkqs").height(nrTabHeight);
	$("#jsjeqkqsTitle").height(titleTabHeight);
	$("#lsrkqktb").height(nrTabHeight);
	$("#lsrkqktbTitle").height(titleTabHeight);
	//收购数量
	$("#sgslDiv").height(nrTabHeight/0.86*0.46);
	//收购车数
	$("#sgcsDiv").height(nrTabHeight/0.86*0.46);
	//正在进行收购的收购点
	$("#zzjxsgsgdDiv").height(nrTabHeight/0.86*0.46);
	//结算情况汇总
	$("#jsqkhzDiv").height($("#lssgkdqsDiv").height());
}

 

//粮食入库情况同比
function queryLsrkqktb(){
	//清空div数据
    document.getElementById("lsrkqktb").innerHTML = "";
	//刷新图表
    var myChart = echarts.init(document.getElementById("lsrkqktb"));
    var option = {
	    tooltip: {
	        trigger: 'axis',
	        formatter: '{a0}：{c0}吨</br>{a1}：{c1}吨</br>{a2}：{c2}%</br>{a3}：{c3}%'
	    },
	    toolbox: {
	        feature: {
	            dataView: {show: false, readOnly: false},
	            magicType: {show: false, type: ['line', 'bar']},
	            restore: {show: false},
	            saveAsImage: {show: false}
	        }
	    },
	    legend: {
	        data: ['去年', '今年', '同比增长率','环比增长率']
	    },
	    xAxis: [
	        {
	            type: 'category',
	            data: [],
	            axisPointer: {
	                type: 'shadow'
	            },
	            axisLabel: {interval:0,rotate:40}
	            
	        }
	    ],
	    yAxis: [
	        {
	            type: 'value',
	            name: '吨',
	            axisLabel: {
	                formatter: '{value} ',
	                show: false
	            },
	            position: 'left',
	            axisTick:{
		             show:false
		        }
	        },
	        {
	            type: 'value',
	            name: '',
	            axisLabel: {
	                formatter: '{value} %',
	                show: false 
	            },
	            position: 'right',
	            axisTick:{
		             show:false,
		        }
	        }
	    ],
	    series: [
	        {
	            name: '去年',
	            type: 'bar',
	            yAxisIndex: 0,
	            itemStyle: {
	                    normal: {
	                        color:'#12B6B0'
	                    }
	          		},
	            data: []
	        },
	        {
	            name: '今年',
	            type: 'bar',
	            yAxisIndex: 0,
	            itemStyle: {
	                    normal: {
	                        color:'#6EB74B'
	                    }
	          		},
	            data: []
	        },
	        {
	            name: '同比增长率',
	            type: 'line',
	            yAxisIndex: 1,
	            itemStyle: {
	                    normal: {
	                        color:'#F39900'
	                    }
	          		},
	            data: []
	        },
	        {
	            name: '环比增长率',
	            type: 'line',
	            yAxisIndex: 1,
	            itemStyle: {
                 	normal: {
	                        color:'#B668D0'
	                }
	          	},
	            data: []
	        }
	    ]
    };
    myChart.setOption(option,true);
	echartsLoading(myChart);
	//获取查询条件
    var  cxtj=getCxtj();
	//ajax请求
	$.ajax({
	    url:"rkqkfx.cmd?method=queryLsrkqktb",
	    data:cxtj,
	    type:'post',
		async:true,
		success:function(data){
		    option.yAxis[0].axisLabel.show=true;
			option.yAxis[1].axisLabel.show=true;
			myChart.hideLoading();
		    if(data!=null&&data!=""){
		        var dataJson = $.parseJSON(data);
		        //当前月的数据
		        var dnyDataList=dataJson.dnyDataList;
		        //去年月的数据
		        var qnyDataList=dataJson.qnyDataList;
		        //同比增长
		        var tbzzDataList=dataJson.tbzzDataList;
		        //环比增长
		        var hbzzDataList=dataJson.hbzzDataList;
		        //x轴赋值年月
		        var xzNyList =dataJson.xzNyList;
		        //获取数量的最大值
		        var slMax=dataJson.slMax;
		        //获取数量的最小值
		        var slMin=dataJson.slMin;
		        //获取数量的区间值
		        var slInteval=dataJson.slInteval;
		        //获取百分比的最小值
		        var bfbMin=dataJson.bfbMin;
		        //获取百分比的最大值
		        var bfbMax=dataJson.bfbMax;
		        //获取百分比的区间值
		        var bfbInteval=dataJson.bfbInteval;
		        //去年月赋值
		        option.series[0].data=qnyDataList;
		        //今年月赋值
		        option.series[1].data=dnyDataList;
		        //同比增长赋值
		        option.series[2].data=tbzzDataList;
		        //环比增长赋值
		        option.series[3].data=hbzzDataList;
		        //x轴当前年月赋值
		        option.xAxis[0].data=xzNyList;
		        //数量的最大值最小值赋值
		        option.yAxis[0].max=slMax;
				option.yAxis[0].min=slMin;
				option.yAxis[0].interval=parseInt(slInteval);
				// option.yAxis[0].splitNumber=5;
				//百分比最大值最小值赋值
		        option.yAxis[1].max=bfbMax;
				option.yAxis[1].min=bfbMin;
				option.yAxis[1].interval=parseInt(bfbInteval);
				//option.yAxis[1].splitNumber=5;
		        myChart.clear();
		        myChart.setOption(option,true);
		    }
	    }
    });
    charts.push(myChart);
}

 

• 添加echarts加载中效果

//echarts 显示loading中
function  echartsLoading(myChart){
      myChart.showLoading();
 }

 

 

• echarts的图表自适应问题，resize.

echarts本身是提供了一个resize的函数的，不过需要在容器大小发生改变时需要手动调用。

于是当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas。

window.onresize = function(){
    for(var i = 0; i < charts.length; i++){
        charts[i].resize();
    }
};

 

• echarts图标上添加点击事件。例如，柱状图点击后显示明细信息

    //控制点击事件
    myChart.on('click', function (params) {
  	     if(dataList!=null && dataList.length>0){
  	        // 控制台打印数据的名称
  		    var  queryIndex=params.dataIndex;
  	        var queryKhsfzh=dataList[queryIndex].KHSFZH;
  	        var  queryParam=cxtj+"&sfzh="+queryKhsfzh;
  	        //查询的具体的数据的时候还得加上getCxtj 查询条件
  	        modalShow(queryParam);
  	     }
    });