echarts 实例（一：动态数据）

最新推荐文章于 2021-11-27 07:30:00 发布

原创最新推荐文章于 2021-11-27 07:30:00 发布 · 1.6w 阅读

2 ·

CC 4.0 BY-SA版权

该博客通过一个实例展示了如何利用ECharts库动态加载并显示数据。内容包括从后台获取数据，设置ECharts配置项，如X轴和Y轴类型，以及如何在页面上创建并初始化ECharts图表。此外，还提供了窗口自适应调整图表大小的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>