echarts 柱状图基本配置

最新推荐文章于 2025-06-21 15:04:44 发布

iwusan

最新推荐文章于 2025-06-21 15:04:44 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/qq_25027593/article/details/82454567

这篇博客介绍了如何使用ECharts库创建柱状图。首先引入echarts.js，然后在HTML中添加用于展示图表的div元素，并设置其高度和宽度。接着初始化ECharts实例，通过调用echarts.init()方法和setOption()方法配置并绘制柱状图。

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

var getOption = function(chartType) {
	var chartOption = {
		grid: {
			x: 20,
			x2: 20,
			y: 20,
			y2: 75,
			borderWidth: 0 //去除白色边框
		},
		calculable: false,
		xAxis: [{
			type: 'category',
			data: ['政府采购', '环保绿化', '工程建设', '高校招标', '信息建设', '办公文教', '服务业', '资源交易'],
			inverse: false,
			axisLabel: {
			    interval: 0, //横轴信息全部显示  
				//rotate: -40,//X轴旋转角度
				textStyle: {
					fontSize: 15, //X轴字体大小
					//fontWeight: 700,//X轴字体加粗
					color: '#FFFFFF' //X轴字体颜色
				},
				//X轴文字竖排
				formatter: function(value) {
					return value.split('').join("\n");
				}
			},
			axisLine: {
				show: false
			},
			axisTick: {
				show: false //隐藏X轴刻度长度
			},
			splitLine: {
				show: false
			}, //去除网格线
			splitArea: {
				show: false
			} //去除网格背景颜色
		}],
		yAxis: [{
			type: 'value',
			show: false, //去除Y轴线
			splitArea: {
				show: false
			},
			axisLabel: {
				show: false //隐藏y轴数值
			},
			splitLine: {
				show: false //去除网格线
			},