效果
代码
initChart7() {
// 带阴影柱状图
var option = {
grid: {
left: "left",
right: "15%",
top: "5%",
// bottom: "20px",
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
show:false,
},
yAxis: {
show:true,
type:'category',
data: ['公益服务项目','政府购买服务'],
splitLine: {show: false},
axisLine: {
show:false,
lineStyle: {
color: '#fff'
}
},
axisLabel:{
color:'#fff'
}
},
series: [
{
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
barBorderRadius: 7,
color: 'rgba(255,255,255,0.5)'
}
},
barGap:'-100%',
barCategoryGap:'60%',
// data: [50,50], //背景基数
},
{
name: 'bar',
type: 'bar',
barWidth: 15,
barCategoryGap:'60%',
itemStyle: {
normal: {
barBorderRadius: 10,
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: '#2A72EB'},
{offset: 1, color: '#4CFDF7'}
]
)
}
},
//每个柱状图加文字
data:[
{ value: 20,
label: {
color: "#fff)",
fontSize: 14,
show: true,
position: [120, -35],
formatter: '{a|506}{b|单}',
rich: {
a: {
color: "#fff",
fontSize: 19,
lineHeight: 40,
},
b:{
color: "#fff",
fontSize: 12,
lineHeight: 40,
},
}
},
},
{ value: 30,
label: {
color: "#fff)",
fontSize: 14,
show: true,
position: [180, -35],
formatter: '{a|396}{b|单}',
rich: {
a: {
color: "#fff",
fontSize: 18,
lineHeight: 40,
},
b:{
color: "#fff",
fontSize: 12,
lineHeight: 40,
},
}
},
},
]
}]
};
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(
document.getElementById("main7"),
"walden"
);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}