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

关注

原创最新推荐文章于 2026-02-27 02:11:58 发布 438 阅读 AI 写同款· GEO 优化 ›

Echarts学习笔记1（简介）技术要点 Echarts5+Vue3 ! 什么是数据可视化？顾名思义，数据可视化就是将数据转换成图或表等，以一种更直观的方式展现和呈现数据。通过“可视化”的方式，我们看不懂的数据通过图形化的手段进行有效地表达，准确高效、简洁全面地传递某种信息，甚至我们帮助发现某种规律和特征，挖掘数据背后的价值。同时关于数据可视化的定义有很多，像百度百科的定义是：数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量阅读详情

<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);        //设置图表自适应屏幕大小