var myChart1 = echarts.init(document.getElementById('id'));
var option = {
grid: {
containLabel: true,
left: '5%',
right: '10%',
top: '-1',
},
tooltip:{
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
xAxis: {
splitLine:{
show: false
},//去除网格线
axisLine:{//坐标轴线
show:false,
lineStyle:{
color:'rgba(0, 160, 233, 1)'
}
},
axisLabel:{//坐标轴刻度设置
color:'rgba(40, 40, 40, 1)'
},
},
yAxis: {
data: ['账面净值', '市值', '资产原值'],
type: 'category',
axisLine:{//坐标轴线
show:false,
},
axisTick: {
show: false
},
axisLabel:{//坐标轴刻度设置
color:'rgba(40, 40, 40, 1)'
},
},
series: [{
type: 'bar',
data: [820, 932, 901],
barWidth:16,//宽度
label:{
normal:{
show:true,
position: [10,5,5,10],//文字文字
textStyle:{color:"rgba(255, 255, 255, 1)"}//文字颜色
}
},
itemStyle:{
normal:{
//柱状颜色
color:function(params){
var colorList=['rgba(255, 0, 255, 1)','rgba(242, 155, 118, 1)','rgba(0, 160, 233, 1)'];
return colorList[params.dataIndex];
}
}
}
}]
};
myChart1.setOption(option);
//图表根据窗口大小显示
$(window).resize(myChart1.resize);
效果图: