javascript ecmascript Echarts 显示指定区域内容 + 不允许控制缩放

需求

在开发中，遇到如下一个需求，要展示指定区域的图形，并控制其不允许缩放

分析

第一想到的就是控件 dataZoom 中设置指定展示的区域，总结如下

解决

示例

源码

option: {

xAxis: {

type: "category",

data: ["A", "B", "C", "D", "E", "F", "G"],

},

yAxis: {

type: "value",

},

series: [

{

data: [120, 200, 150, 80, 70, 110, 130],

type: "line",

},

],

// 添加dataZoom组件

dataZoom: [

{

// X 轴设置dataZoom类型为slider

type: "slider",

show: false,

// 锁定选择区域的大小

zoomLock: true,

// 设置dataZoom的范围，百分比表示

start: 20,

end: 80,

// 控制手柄的尺寸

handleSize: '80%',

// 两侧缩放手柄的样式配置

handleStyle: {

color: '#fff',

shadowBlur: 3,

shadowColor: 'rgba(0,0,0,0.6)',//阴影颜色

shadowOffsetX: 2,// 阴影水平方向上的偏移距离

shadowOffsetY: 2,// 阴影垂直方向上的偏移距离

}

},

{

// 设置dataZoom类型为inside

type: "inside",

// 设置dataZoom的范围，百分比表示

xAxisIndex: [0],

start: 20,

end: 80,

},

],

}

X 轴设置dataZoom类型为slider type: “slider”,是否展示 show: false,锁定选择区域的大小 zoomLock: true,设置dataZoom的范围，百分比表示 start: 20, end: 80,控制手柄的尺寸 handleSize: ‘80%’,两侧缩放手柄的样式配置 handleStyle: { color: ‘#fff’, shadowBlur: 3,阴影颜色 shadowColor: ‘rgba(0,0,0,0.6)’,阴影水平方向上的偏移距离 shadowOffsetX: 2,阴影垂直方向上的偏移距离 shadowOffsetY: 2, }

相关文章