let xdata = ['大海则选煤厂建筑', '大海则选煤厂2', '大海则选煤厂3', '大海则选煤厂4', '大海则选煤厂5', '大海则选煤厂6', '大海则选煤厂7', '大海则选煤厂8']
let seriesdata = [10, 2, 6, 7, 8, 9, 10, 13]
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
textStyle: {
color: '#ffffff'
},
borderWidth: '0',
backgroundColor: 'rgba(0,0,0,0.5)'
},
grid: {
left: '1%',
right: '3%',
bottom: '1%',
top: '3%'
},
xAxis: {
show: false
},
yAxis: {
type: 'category',
inverse: true,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
inside: true,
interval: 0, //横轴信息全部显
splitNumber: 50,
// boundaryGap: [20, 20],
textStyle: {
color: '#111',
verticalAlign: 'bottom',
fontSize: 16,
align: 'left',
padding: [0, 0, 15, -5]
}
},
data: xdata
},
dataZoom: [
{
type: 'inside',
startValue: 0,
endValue: 5,
minValueSpan: 5,
maxValueSpan: 6,
yAxisIndex: [0],
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
},
{
type: 'slider',
realtime: true,
startValue: 0,
endValue: 5,
width: '3.5',
height: '80%',
yAxisIndex: [0], // 控制y轴滚动
fillerColor: 'rgba(154, 181, 215, 1)', // 滚动条颜色
borderColor: 'rgba(17, 100, 210, 0.12)',
backgroundColor: '#cfcfcf', //两边未选中的滑动条区域的颜色
handleSize: 0, // 两边手柄尺寸
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
top: '1%',
right: '5'
}
],
series: [
{
type: 'bar',
data: seriesdata,
showBackground: true,
backgroundStyle: {
borderRadius: 40
},
barWidth: '15',
itemStyle: {
barBorderRadius: 20,
color: (param) =>
{
//实现柱状图条 下面四种颜色循环显示
let colorList = ['#ffa865', '#f8d26b', '#74dcc4', '#47c0ff']
return colorList[param.dataIndex % 4]
}
},
label: {
normal: {
show: true,
fontSize: 16,
//数值展示在最右边，通过调节offset显示
position: 'insideLeft',
offset: [480, -20],
textStyle: {
color: '#111'
}
}
}
}
]
};
参考文章
发表评论