echarts条形图添加滚动条
效果展示:
测试数据:
taskList:[{majorDeptName:'测试',finishCount:54,notFinishCount:21},
{majorDeptName:'测试',finishCount:54,notFinishCount:21},
{majorDeptName:'测试',finishCount:54,notFinishCount:21},
{majorDeptName:'测试',finishCount:54,notFinishCount:21},
{majorDeptName:'测试',finishCount:54,notFinishCount:41},
{majorDeptName:'测试',finishCount:54,notFinishCount:41},
{majorDeptName:'测试',finishCount:54,notFinishCount:41},
{majorDeptName:'测试',finishCount:54,notFinishCount:41},
{majorDeptName:'测试',finishCount:54,notFinishCount:41},]
代码如下:
initBarchart(){
this.barChart = this.$echarts.init(this.$refs.barChart);
let finishData = [];
let unFinishData = []
let chartName = [];
if ( this.taskList && this.taskList.length > 0) {
this.taskList.forEach(item => {
chartName.push(item.majorDeptName)
finishData.push(item.finishCount)
unFinishData.push(item.notFinishCount)
})
}
let max = Math.max.apply(null,finishData.concat(unFinishData));
let emptyData = finishData.map(function(v, i) {
let item = {
value: max,
label: {
formatter: '{a|' + v + '}',
position: 'right',
rich: {
a: {
color:'#BFF4FF',
fontSize:14,
padding:[5, 10]
}
}
}
}
return item
});
let emptyData2 = unFinishData.map(function(v, i) {
let item = {
value: max,
label: {
formatter: '{a|' + v + '}',
position: 'right',
rich: {
a: {
color:'#BFF4FF',
fontSize:14,
padding:[5, 10]
}
}
}
}
return item
});
const barGap = '80%'
let option = {
tooltip: {
show: true,
trigger: 'item',
},
legend: {
data: ['已完成','未完成'],
right:'5%',
// itemWidth:15,
textStyle:{
color:'#fff'
},
},
grid: {
top: '10%',
right: '15%',
left: '10%',
bottom: '5%',
containLabel: true
},
xAxis: [
{
type : 'value',
position: 'top',
name: '/个',
axisLabel:{ //坐标轴字体颜色
show:false,
},
axisLine:{
show:false,
lineStyle: {
color: "#218BA0",
}
},
axisTick:{ //y轴刻度线
show:false
},
splitLine:{ //网格
show: false,
},
max: function(value) {
return value.max
},
}
],
yAxis: [{
type: 'category',
data:chartName,
inverse: true,
axisTick:{ //y轴刻度线
show:false,
},
axisLabel: {
formatter: '{value}',
color: '#218BA0',
fontSize:14
},
axisLine: {
show:false,
},
splitLine: {
show:false
},
},
{
type: "category",
name: "",
axisTick: {
show: false,
},
splitLine: {
show: false
},
axisLabel: {
show: false,
},
axisLine: {
show: false
},
inverse: true,
data: chartName
}],
series: [
{
type: 'bar',
show: true,
barWidth: '18%',
yAxisIndex: 0,
barGap,
silent:true,
itemStyle: {
normal: {
color: '#11353d',
}
},
label: {
show:true,
},
data: emptyData
},
{
show: true,
type: 'bar',
barGap,
yAxisIndex: 1,
barWidth: '18%',
name:'已完成',
z: 2,
label: {
show: false,
},
itemStyle: {
normal: {
color: '#03bae2',
barBorderRadius: [0,0],
}
},
data: finishData,
},
{
type: 'bar',
show: true,
barWidth: '18%',
barGap,
yAxisIndex: 0,
silent:true,
itemStyle: {
normal: {
color: '#11353d',
barBorderRadius: [0,0],
}
},
label: {
show:true,
},
data: emptyData2
},
{
show: true,
type: 'bar',
barWidth: '18%',
barGap,
yAxisIndex: 1,
name:'未完成',
z: 2,
label: {
show: false,
},
itemStyle: {
normal: {
color:'#e27903' ,
barBorderRadius: [0,0],
}
},
data: unFinishData,
}
],
dataZoom: [
{
yAxisIndex:[0,1],//这里是从X轴的0刻度开始
show: false,//是否显示滑动条，不影响使用
weight:2,
type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0,
endValue: 3,
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
},
{
yAxisIndex: [0,1],//这里是从X轴的0刻度开始
show: false,//是否显示滑动条，不影响使用
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
fillerColor: "#0089d1", // 滚动条颜色
borderColor: "rgba(17, 100, 210, 0.1)",
zoomLock:true, // 是否只平移不缩放
handleSize:10, // 两边手柄尺寸
width:8,
heigh:8,
bottom: 2,
backgroundColor: 'rgba(255,255,255,.4)',
brushSelect:false,
showDetail:false,
showDataShadow:false
}
],
};
if ( this.taskList && this.taskList.length > 4) {
option.dataZoom[0].show = true
option.dataZoom[1].show = tru
}
this.barChart.setOption(option)
},```