echarts柱图小结（部分转载）

最新推荐文章于 2025-05-19 11:17:04 发布

转载最新推荐文章于 2025-05-19 11:17:04 发布 · 794 阅读

本文详细介绍了如何使用ECharts配置柱状图的各项参数，包括标题样式、数据滑动条、柱体颜色及宽度、坐标轴标识等，并提供了完整的配置代码示例。

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

echarts柱图title设置，柱体颜色、宽度、x、y坐标标识、数据显示、鼠标悬浮时显示的数据框（format）设置：

option = { 
       title:{
		text:'各部门提供目录数量',
		left: '-2',
		textStyle: {                        //设置标题样式
		          color: '#999',
		          fontFamily: '微软雅黑',
		          fontWeight: 'bolder',
		          fontSize: 15
		}
	},
	dataZoom: [               //横坐标数据较多时，可设置为滑动模式
		{
            show: true,		//是否显示滑动条		    	
		  height:12,            //滑动条高度
	          bottom:'1%',          //滑动条距离画布底边的距离
		  start: 65,            //滑动条起始结束百分比例
	          end: 100
		},
		{type: "inside"}        //滑动条样式inside为内置，可在图上滑动鼠标进行缩放，slider为滑块模式，拖动滑块调整缩放。
	],
	color: ['#3398DB'],
	tooltip : {
	        trigger: 'axis',
		axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			     type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		}
	},
	grid: {                 //图距离画布边缘的距离设置
		left: '3%',
		right: '4%',
		bottom: '10%',
		containLabel: true
	}
        xAxis : [
            {
                type : 'category',
//                 name:'额度',
　　　　　　　　//这是设置的false，就不不显示下方的x轴，默认是true的
                show: false,
　　　　　　　　//这里呢，就是每个柱的name了，根据实际情况下就好了，我就先写这三个
                data : ['最多','平均','最少'],
                axisLabel: {
　　　　　　　　　　　　　//这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜
                    rotate: 30,
　　　　　　　　　　　　//这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，标示全部显示，当然，如果x轴都不显示，那也就没有意义了
                    interval :0
                    }
            }
        ],
        yAxis : [
            {
                type : 'value',
                name:'数量',
　　　　　　　　　　//下面的就很简单了，最小是多少，最大是多少，默认一次增加多少
                 min: 0,
                 max: 30,
                 interval: 6,
　　　　　　　　　　//下面是显示格式化，一般来说还是用的上的
                 axisLabel: {
                     formatter: '{value} 包'
                 }
            }
        ],
        series : [
            {
                name: '数量',
                type: 'bar',
                itemStyle: {
                    normal: {
　　　　　　　　　　　　　　//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function(params) {
                            // build a color map as your need.
                            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: '{c}'
                            formatter: '{b}\n{c}'
                        }
                    }
                },
　　　　　　　　　　//设置柱的宽度，要是数据太少，柱子太宽不美观~
　　　　　　　　　　barWidth:70,
                data: [28,15,9,4,7,8,23,11,17]
            }
        ]
};