echarts图表实现自定义缩放功能产品露出来姨妈笑
import * as echarts from "echarts";
import circle from "@/assets/img/icon/touch.png";
export default (
start = 70,
end = 100,
bottom = -10,
width = 300,
zoomLock = false
) => {
const dataZoom = [
{
left: "3%",
xAxisIndex: [0], //这里是从X轴的0刻度开始
show: true, //是否显示滑动条，不影响使用
type: "slider",
start, // 从头开始。
end, // 一次性展示6个
height: 40, //组件高度
bottom,
width,
// maxSpan: '30%',
fillerColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(0,0,0,0)",
},
{
offset: 0.44,
color: "rgba(4, 115, 255, 0)",
},
{
offset: 0.45,
color: "#0473FF",
},
{
offset: 0.5,
color: "#0473FF",
},
{
offset: 0.55,
color: "#0473FF",
},
{
offset: 0.56,
color: "rgba(4, 115, 255, 0)",
},
{
offset: 1,
color: "rgba(0,0,0,0)",
},
]),
zoomLock: zoomLock,
showDataShadow: false, //是否显示数据阴影 默认auto
backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(0,0,0,0)",
},
{
offset: 0.44,
color: "rgba(4, 115, 255, 0)",
},
{
offset: 0.45,
color: "rgba(4, 115, 255, 0.1)",
},
{
offset: 0.5,
color: "rgba(4, 115, 255, 0.1)",
},
{
offset: 0.55,
color: "rgba(4, 115, 255, 0.1)",
},
{
offset: 0.56,
color: "rgba(4, 115, 255, 0)",
},
{
offset: 1,
color: "rgba(0,0,0,0)",
},
]),
borderRadius: 6,
borderColor: "rgba(0,0,0,0)",
handleIcon: "image://" + circle,
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
filterMode: "filter",
handleSize: 24,
handleStyle: {
color: "rgba(4,115,255,0)",
borderWidth: 0,
},
moveOnMouseMove: true,
moveHandleSize: 0, //该处为0则表示时间轴滚动条上面拖拽的那个高度可以与时间齐平
brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
},
];
return dataZoom;
};
