echarts 增加x轴的缩放与滚动

echarts 增加x轴的缩放与滚动

主要属性 dataZoom
`
let initDom = null
const initChart = () => {
let option = {}
if (powerDate.value.length && powerVal.value.length) {
option = {
// echarts 图的位置
grid: {
top: 40,
left: 45,
right: 40,
bottom: 40,
},
// 提示框
tooltip: {
trigger: ‘item’,
},
left: ‘right’,
top: ‘5%’,
show: true,
legend: {
show: true,
top: ‘0’,
right: ‘50%’,
textStyle: {
color: ‘#B6D3EB’,
},
},
xAxis: {
type: ‘category’,
boundaryGap: false,
data: powerDate.value, // x轴数据
axisLine: {
show: false, // 隐藏x轴线
},
axisTick: {
show: false, // 隐藏x轴刻度
},
axisLabel: {
show: true,
margin: 20,
textStyle: {
fontSize: 16,
},
interval: ‘auto’,
},
},
yAxis: {
type: ‘value’,
axisLabel: {
show: true,
margin: 5,
textStyle: {
fontSize: 16,
},
},
splitLine: {
lineStyle: {
color: ‘#192B3C’,
type: ‘dashed’,
},
},
boundaryGap: [0, ‘100%’],
},
dataZoom: [
{
type: ‘inside’,
start: 0,
end: 30,
show: false, // 是否显示下面的滑动组件
},
{
start: 0,
end: 30,
show: false,
},
],
series: [
{
name: ‘右上角title’,
type: ‘line’,
symbolSize: 6, // 拐点大小
label: {
show: true,
position: ‘top’,
textStyle: {
color: ‘#fff’,
fontSize: 16,
},
},
data: [], // y轴数据
lineStyle: {
color: ‘#0099FF’,
},
markLine: {
data: xAxlist.length
? [
{
name: ‘标记线’,
yAxis: 1,
},
]
: [],
silent: true,
},
},
],
}
} else {
option = {
title: {
text: ‘暂无数据’,
x: ‘center’,
y: ‘center’,
textStyle: {
fontSize: ‘30px’,
fontWeight: ‘600’,
color: ‘#00cfff’,
},
},
}
}
nextTick(() => {
// 不要使用ref 包装echarts !!!
initDom = echarts.init(document.getElementById(‘consumptionEcharts’))
initDom.setOption(option, true)
})
}