携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情
当坐标轴数据过多，展示不完时，这时候就要添加滑动效果，但是echarts图表滑动默认情况下鼠标滚动是会缩放显示数据个数多少，操作起来别扭且样式也和正常得滚动条差别巨大 附上以最近得一个项目中实际效果图：
在dataZoom中加入zoomOnMouseWheel: false, moveOnMouseMove: true, moveOnMouseWheel: true, 属性
zoomOnMouseWheel:false 如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放
moveOnMouseWheel:true 鼠标滚轮实现移动
具体实现：
initChart(data) {
console.log('tu', data)
if (data.noData) {
this.noData = true
return
}
this.noData = false
let { emitName, isShowUnit, seriesData } = data
var targetData = [],
actualData = [],
yAxisData = []
if (seriesData && seriesData.length) {
actualData = seriesData.map(item => {
if (item.actualDays > item.targetDays) {
return {
label: {
normal: {
show: true,
formatter: '{c}' + ' 天',
color: '#fff',
position: 'insideRight'
}
},
value: item.actualDays,
itemStyle: {
color: '#F17373',
borderRadius: 5 //圆角
}
}
} else {
return {
value: item.actualDays,
label: {
normal: {
show: true,
formatter: '{c}' + ' 天',
color: '#fff',
position: 'insideRight'
}
},
itemStyle: {
color: '#3ed473',
borderRadius: 5 //圆角
}
}
}
})
seriesData.map(item => {
targetData.push(item.targetDays)
yAxisData.push(item.contractNum)
})
}
// console.log('actualData', actualData)
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption(
{
grid: {
top: '30',
left: '20',
right: '40',
bottom: '10',
containLabel: true
},
tooltip: {
trigger: 'axis'
formatter: function (params) {
console.log(params)
}
},
dataZoom: [
{
start: 0, //默认为0
end: 1000, //默认为100
type: 'slider',
maxValueSpan: 4, //显示5条数据(默认显示10个)
realtime: true,
show: yAxisData && yAxisData.length > 5 ? true : false,
yAxisIndex: [0],
handleSize: 0, //滑动条的 左右2个滑动条的大小
width: 12,
height: '76%', //组件高度
// left: 600, //左边的距离
right: 38, //右边的距离
top: 40, //上边边的距离
fillerColor: '#C4C4CE',
backgroundColor: 'rgba(0,0,0,0.06)',
borderColor: 'rgba(0,0,0,0.1)',
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: true, //即拖拽时候是否显示详细数值信息 默认true
realtime: true, //是否实时更新
filterMode: 'filter',
yAxisIndex: [0, 1] //控制的y轴
},
//滑块的属性
{
type: 'inside',
show: true,
zoomOnMouseWheel: false,
moveOnMouseMove: true,
moveOnMouseWheel: true,
yAxisIndex: [0, 1],
start: 1,
end: 100
}
],
xAxis: {
type: 'value',
name: isShowUnit ? '天' : '',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
margin: 0,
textStyle: {
color: 'rgba(0,0,0,0.5)',
fontSize: 13
}
},
splitLine: {
show: false,
lineStyle: {
color: '#fff'
}
}
},
// 保存为图片时添加标题
title: {
text: '',
show: true,
textStyle: {
fontSize: 'normal',
fontStyle: 'normal',
fontWeight: 'normal'
},
left: '50%',
top: '0'
},
yAxis: {
name: isShowUnit ? '合同号' : '',
nameLocation: 'start',
nameTextStyle: {
color: '#000'
},
type: 'category',
data: yAxisData,
inverse: true,
boundaryGap: true,
axisLine: {
show: true,
lineStyle: {
color: '#DFDDDD'
}
},
splitLine: {
show: false
},
axisLabel: {
margin: 20,
textStyle: {
color: 'rgba(0,0,0,0.5)',
fontSize: 13
}
},
axisTick: {
show: false
}
},
// series: series1
series: [
{
name: '承诺交付周期',
type: 'bar',
markLine: false,
barWidth: 16,
itemStyle: {
color: '#fcbf63',
borderRadius: 5 //圆角
},
data: targetData,
label: {
show: true,
position: 'insideRight',
// formatter: '承诺交付周期 ' + '{c}' + ' 天',
formatter: '{c}' + ' 天',
color: '#fff',
fontSize: 12
}
},
{
name: '实际交付周期',
type: 'bar',
markLine: false,
barWidth: 16,
barGap: '22%',
// barGap: '0',
// itemStyle: {
// color: res => {
// console.log('params', res)
// if (res.value > 30) {
// return '#3ed473'
// } else {
// return '#F17373'
// }
// },
// borderRadius: 5 //圆角
// },
data: actualData
// label: {
// show: true,
// position: 'insideRight',
// // formatter: '目标值 ' + '{c}' + ' 天',
// formatter: '{c}' + ' 天',
// color: '#fff',
// fontSize: 12
// }
}
]
},
true
)
this.chart.on('click', param => {
console.log('当前订单号', param, emitName)
emitName && this.$emit(emitName, param.name)
})
this.chart.off('click', () => {
console.log('解决多次调用接口问题')
})
}
