归纳总结echarts柱状图的基本使用

阿拉灯神丁-Java

于 2020-05-15 08:45:27 发布

阅读量394

点赞数

本文链接：https://blog.youkuaiyun.com/JavaStudyljh/article/details/106133988

版权

本文详细介绍使用ECharts实现各区接警数统计的柱状图方法。通过具体代码实例，展示了如何配置图表样式、设置数据集合及实现图表自适应屏幕大小等功能。

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

<div class="echarts" id="areaStatisticesEcharts"></div>

var areaNameList=[[${maiorg.areaNameList}]];
var areaCountList=[[${maiorg.areaCountList}]];
var areaChart =echarts.init(document.getElementById("areaStatisticesEcharts"));
	     
//柱状图
var areaoption = {
	        	color: ['#3398DB'], //设置柱状颜色
	            title : {
	                text: '各区接警数统计'     //图表标题
	            },
	            tooltip : {
	                trigger: 'axis'
	            },
	            grid:{
	                x:30,
	                x2:20,  //图表与边界距离
	                y2:24
	            },
	            calculable : true,
	            xAxis : [
	                {
	                	//将横轴坐标信息全部显示
	                	axisLabel:{  interval: 0},
	                    type : 'category',
	                    data : areaNameList   //数据集合
	                }
	            ],
	            yAxis : [
	                {
	                    type : 'value'
	                }
	            ],
	            series : [
	                {
	                    name:'接警数',
	                    type:'bar',
	                    barWidth: '40%',  //设置柱状的大小
	                    data:areaCountList,  //数据集合
	                }
	            ]
	        };

  areaChart .setOption(areaoption);
    $(window).resize(areaChart .resize);        //设置图表自适应屏幕大小