效果
initChart6() {
// 竖直柱状图
var option = {
grid:{
x:20,
y:20,
x2:20,
y2:50,
containLabel:true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
splitLine: {show: false},
data: ['助洁','助餐','助医','助浴','助行','助聊'],
axisLabel: {
show: true,
textStyle: {
color: '#fff', //更改坐标轴文字颜色
fontSize : 12 //更改坐标轴文字大小
}
},
axisTick: {
show: false
},
axisLine:{
lineStyle:{
color:'#5e97b5' //更改坐标轴颜色
}
}
},
yAxis: {
splitLine:{ //分割线
show:true,
lineStyle:{
color:'#5e97b5',
width: 1,
opacity:.5,
}
},
axisLabel: {
show: true,
textStyle: {
color: '#5e97b5', //更改坐标轴文字颜色
fontSize : 12 //更改坐标轴文字大小
}
},
axisTick: {
show: false
},
axisLine:{
lineStyle:{
color:'#5e97b5' //更改坐标轴颜色
}
}
},
series: [{
name: 'bar',
type: 'bar',
barWidth: 15,
top: 0,
bottom: 50,
itemStyle: {
normal: {
barBorderRadius: 15,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#4cfdf7'},
{offset: 1, color: '#2a72eb'}
]
)
}
},
data: [650,700,800,900,1000,1200]
}]
};
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(
document.getElementById("main6"),
"walden"
);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},