由于项目需要,参考各种资料画出来的,时间紧迫,比较简陋。主要方便后面自己查阅参考。后续更新优化
option = {
textStyle:{
// fontSize: arr.initHeight,
color: 'red'//字体颜色
},
tooltip: {
trigger: "axis",
textStyle:{
// fontSize: arr.initHeight,
color: 'red'//字体颜色
},
// formatter: function (params) {
// return params[0].name + ': ' + params[0].value+"%";
// },
},
// grid: {
// x: 90,
// y: 120,
// x2: 60,
// y2: 120
// },//直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。
yAxis: {
// type: 'category',
axisLabel: {
textStyle: {
color: 'red',
// fontSize: arr.initHeight,
}
},
data: ['q去','qre','qwer','ere'],
axisTick:{ //x轴刻度线
show:false
},
splitLine: { //网格线
show: false
},
axisLine:{ //坐标轴线
show:false
}
},
xAxis: {
// type: 'value',
// show:false,
max: 50,
min:0,
},
series: [{
name: '可用',
type: 'bar',
stack:'使用情况',
data:[12,23,11,33],
barWidth : 10,//柱图宽度
itemStyle:{
// color: function(params) {
// var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ];
// return colorList[params.dataIndex]
// },
barBorderRadius: [50, 0, 0, 50] // 统一设置四个角的圆角大小
},
markPoint : {
symbol:'pin',//标记类型
symbolSize: 10,//图形大小
itemStyle: {
normal: {
borderColor: 'red',
borderWidth: 1, // 标注边线线宽,单位px,默认为1
label: {
show: true,
fontSize: 14
}
}
},
data :[{value:10,xAxis:50,yAxis:0},{value:10,xAxis:50,yAxis:1},{value:10,xAxis:50,yAxis:2},{value:10,xAxis:50,yAxis:3}]//配置项
}
},
{
name: '不可用',
type: 'bar',
stack:'使用情况',
data: [28,17,29,7],
itemStyle:{
color:"rgba(255,0,0,.1)",
barBorderRadius: [0, 0, 0, 0]// 统一设置四个角的圆角大小
}
}
]
};