echarts 實例(一:動態數據)

<div class="chart-pic">
			<div id="divMainBar" class="chart"></div>
		</div>
<!-- ECharts單文件引入 -->
<script type="text/javascript" src="<c:url value="/scripts/echarts/echarts.js"/>"></script>
<script type="text/javascript">
	var xAxisDataJson = [];
	var seriesDataJson = [];
	$.ajax({
		url:"${ctx}/backoffice/Unitinfo/subJson.do",
		type:"post",
		async:false,
		success:function(data){
			$.each(data,function(index,obj){
				xAxisDataJson.push(obj.name);
				seriesDataJson.push(obj.code);
			});
		}
	});

	var barData = {
			xAxisData:function(){
				return xAxisDataJson;
			},
			seriesData:function(){
				return seriesDataJson;
			}
	};
	
	var optionBar = {
		    tooltip: {
		        trigger: 'item'
		    },
		    toolbox: {
		        show: true,
		        feature: {
		            saveAsImage: {show: true}
		        }
		    },
// 		    calculable: true,
		    grid: {
		        borderWidth: 0,
		        x:20,//直角座標系內繪圖網格左上角橫座標
		        x2:20,
		        y: 30,
		        y2: 30
		    },
		    xAxis: [
		        {
		            type: 'category',
		            show: true,
		            data: xAxisDataJson,
		            axisLabel:{
		            	interval:0//X座標顯示內容非自動
		            }
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value',
		            show: true
		        }
		    ],
		    series: [
		        {
		            name: 'ECharts例子個數統計',
		            type: 'bar',
		            itemStyle: {
		                normal: {
		                    color: function(params) {
		                        var colorList = [
		                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
		                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
		                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
		                        ];
		                        return colorList[params.dataIndex]
		                    },
		                    label: {
		                        show: true,
		                        position: 'top',
		                        formatter: '{b}\n{c}'
		                    }
		                }
		            },
		            data: seriesDataJson
		        }
		    ]
		};
		      
	// 路徑配置
    require.config({
        paths: {
            echarts: '<c:url value="/scripts/echarts"/>'
        }
    });
	require(
	    [
	        'echarts',
            'echarts/chart/bar'
	    ],
	    requireCallbackBar
	);
	
	function requireCallbackBar(ec) {
        // 基於準備好的dom,初始化echarts圖表
        var myChartBar = ec.init(document.getElementById('divMainBar'));
        // 爲echarts對象加載數據 
        myChartBar.setOption(optionBar); 
        //自適應大小
        window.onresize = myChartBar.resize;
    }

	
</script>

發佈了55 篇原創文章 · 獲贊 13 · 訪問量 36萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章