echarts圖表實(shí)現(xiàn)自定義縮放功能產(chǎn)品露出來(lái)姨媽笑
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,?//是否顯示滑動(dòng)條，不影響使用
??????type:?"slider",
??????start,?//?從頭開始。
??????end,?//?一次性展示6個(gè)
??????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,?//是否顯示數(shù)據(jù)陰影?默認(rèn)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,?//即拖拽時(shí)候是否顯示詳細(xì)數(shù)值信息?默認(rèn)true
??????filterMode:?"filter",
??????handleSize:?24,
??????handleStyle:?{
????????color:?"rgba(4,115,255,0)",
????????borderWidth:?0,
??????},
??????moveOnMouseMove:?true,
??????moveHandleSize:?0,?//該處為0則表示時(shí)間軸滾動(dòng)條上面拖拽的那個(gè)高度可以與時(shí)間齊平
??????brushSelect:?false,?//刷選功能，設(shè)為false可以防止拖動(dòng)條長(zhǎng)度改變?************（這是一個(gè)坑）
????},
??];
??return?dataZoom;
};
