echarts 柱状图基本配置

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_25027593/article/details/82454567

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 //去除网格线
			},
			splitArea: {
				show: false //去除网格背景颜色
			},
		}],
		series: [{
			name: '公告数',
			type: chartType,
			barWidth: '30',
			itemStyle: {
				normal: {　　　　　　　　　　　　　
					label: {
						show: true,
						position: 'top',
						color: '#F7EFBE',
						formatter: '{c}' //显示数值
					},
					barBorderRadius: 7, //柱状图边角元化
					//渐变色
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: '#F7EFBE'
					}, {
						offset: 1,
						color: '#8ECBFF'
					}])
				}
			},
			data: [20, 40, 17, 23, 25, 76, 35, 62]
		}]
    };
    return chartOption;
};

引入echarts.js

//添加显示图表div，注意宽高都需要设置

<div class="chart" id="barChart" style="height:230px;width:100%"></div>

//配置图表

var byId = function(id) {
      return document.getElementById(id);
};
var barChart = echarts.init(byId('barChart'));

//bar 为饼图，line为折线图，pie为饼图
 barChart.setOption(getOption('bar'));

效果图：