版权声明:本文为博主原创文章,未经博主允许不得转载。 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'));
效果图: