echarts线柱图

<script type="text/javascript" src="${ctx}/assets/javascripts/libs/echarts/esl.js"></script> //引入所需js
<script type="text/javascript" src="${ctx}/assets/javascripts/libs/echarts/echarts.js"></script> //引入所需js
<script>
var myChart;
require(
    [
  'echarts',
  'echarts/chart/bar',//柱图
  'echarts/chart/line'//线图
    ],
    function (ec) {
        myChart = ec.init(document.getElementById("sales-chart"));  //sales-chart为容器
    }
 
);
</script>

 

<script>
    seajs.use(['appc/policy/analysis/model-promotion-analysis'], function(controller) {

    	var lineChart;
    	var lineJsonData;
    	
        /*
         * @description 渲染折线图
         * @json {object} 图表数据
         */
        window.renderLineChart = function(json) {
			var tooltip = {trigger: 'axis'}
			console.log(JSON.stringify(json));
			if(json && json.yAxis){
				if($('#compareType').store().value != 2){
            		if($('#compareCarModel').store().value.length == 0){
            			json.yAxis[0].axisLabel = {margin:30,formatter:function(v1,v2,v3){return formatComma(v1);}};
            		}
            	}else{
            		if($('#compareCarModel').store().value.length == 0){
            			json.yAxis[0].axisLabel = {margin:30};
            		}
            		//折扣率的时候给数值加上"%"
            		tooltip = {trigger: 'axis',
            	 		   formatter: function(params) {
            	 				var v1 = params[0][2].replace("NaN","");
            	 				var v2 = params[1][2].replace("NaN","");
								var v3 = params[2][2].replace("NaN","");
								if(v1 && "-" != v1) v1 = formatComma(v1);
								if(v2 && "-" != v2) v2 = formatComma(v2);
								if(v3 && "-" != v3) v3 += "%";
								return params[0][1] + "<br/>" + params[0][0] + ":" + v1 + "<br/>" + params[1][0] + ":" + v2 + "<br/>" + params[2][0] + ":" + v3;
							}
						}
            	}
			}
			
            if($('#compareCarModel').store().value.length == 0 && json.series){
            	//非对比车型时
            	json.yAxis[1].axisLabel = {show:false};
            	json.series[0].itemStyle.normal.label.formatter = function(v1,v2,v3) {if(v3 > 0 || v3 <0){return formatComma(v3);}else{return '';}};
            	json.series[1].itemStyle.normal.label.formatter = function(v1,v2,v3) {if(v3 > 0 || v3 <0){return formatComma(v3);}else{return '';}};
				json.series[2].itemStyle.normal.label.formatter = function(v1,v2,v3){if(v3 > 0 || v3 <0){return formatComma(v3);}else{return '';}};
				json.series[3].itemStyle.normal.label.formatter = function(v1,v2,v3){if(v3 > 0 || v3 <0){return formatComma(v3);}else{return '';}};
        
            	json.series[0].itemStyle.normal.label.position = "top"
            	json.series[1].itemStyle.normal.label.position = "top"
            	json.series[2].itemStyle.normal.label.position = "bottom"
           		json.series[3].itemStyle.normal.label.position = "top"
            }
            
            if(json && json.series){
				for(var j=0; j<json.series.length; j++){
		           	if(json.series[j].isShow){
		           		json.series[j].itemStyle.normal.label.show = true;
		           	}
				}
	        }
            var x1 = 100;
            var leg = "bottom";
            var categorys = json.category;
            var boundary = false;
            var grids = new Object();
            grids["x"] = x1;
            grids["y"] = 25;grids["y2"] = 60;
            //alert(JSON.stringify(categorys));
            if($('#compareCarModel').store().value.length > 0){
		    	x1=25;leg="bottom";
		    	for(var j=0; j<json.series.length; j++){
	           		json.series[j].itemStyle.normal.label.formatter = function(v1,v2,v3) {if(v3 > 0 || v3 <0){return formatComma(v3);}else{return '';}};
				}
		    	var values;
		    	//重新set category,车型名称换行
		    	for(var y=0; y<categorys.length; y++){
		    		values = categorys[y].toString().split(",");
		    		if(values.length > 0){
		    			categorys[y] = values[1];
		    		}
		    	}
		    	boundary = true;
		    	grids = new Object();
	            grids["x"] = x1;grids["x2"] = 30;
	            grids["y"] = 25;grids["y2"] = 60;
		    }
            var option = {
        		    tooltip : tooltip,
        		    legend: {
        		    	x:'center',
        		    	y:leg,
        		        data : json.lengend,
        		        textStyle: {fontFamily:"微软雅黑"}
        		    },
        		    xAxis : [
        		        {
        		            type : 'category',
        		            data : categorys,
        		            boundaryGap: boundary,
        		            scale: true,
        		            splitLine: {show:true,lineStyle:{color:'#F0F0F0'}},
    						axisTick: {lineStyle:{color:'#F0F0F0'}},
    						axisLine: {lineStyle:{color:'#F0F0F0'}},
    						axisLabel : {
   								textStyle:{fontFamily:"微软雅黑"}
   							}
        		        }
        		    ],
        		    yAxis : json.yAxis,
        		    series : json.series,
        		    grid:grids
        		};

            	                    
        	myChart.clear();
			myChart.setOption(option);
			console.log(JSON.stringify(option));
        	
        	//数据标签使用
	  		lineJsonData = option;
	  		if($('#compareCarModel').store().value.length == 0){
	  			$('#datalabel').show();
	  			setSelectMenu(json.selectMenuDatas);
	  		}else{
	  			$('#datalabel').hide();
	  		}
        }
        
        /**
         * 设置折线图线条数值显示
         */
         $(document).on('change', '#datalabel', function(event, selectData){ 
         	
 	    	var chartJosn = setShowValue(lineJsonData,selectData);
    		myChart.clear();
  			myChart.setOption(chartJosn);
     	});

     	function setSelectMenu(jsonData){
     		var	defaultItem = jsonData[0];
     		for(var y=0;y<jsonData.length;y++){
     			var compare = jsonData[y].id;
     			if(compare == "TP"){
     				defaultItem = jsonData[y];
     				break;
     			}
     		}
     		
   			//defaultItem = jsonData[0].id+","+jsonData[2].id;
 	    	var data={
 	            // id与className可选
 	            //id: '',
 	            className: 'fr',
 	            // 提交到后台的名称
 	            store: 'datalabel',
 	            //是否支持多选
 	            multiSelect: !0, 
 	            //默认选中项
 	            defaultItem: defaultItem,
 	            //渲染方式, 支持replace, append, after, before, html
 	            type: 'replace',
 	            //数据
 	            data: jsonData
 	        };
 	        if(jsonData.length > 0){
 	        	$('#datalabel').waysDropdownToggle(data);
 	 	    }
     	}
         
         //折线图自适应宽度
         $(function() {
         	$('#btn-zoom-main').click(function() {
         		setTimeout(function() {
         			myChart.resize();
         		}, 0);
         		
         	});
         });
    });   
</script>