Incubator-echarts: 请问如何调整dataZoom的样式？
One-line summary [问题简述]
请问如何调整dataZoom的样式？比如高度，圆角这些属性，文档上只找到了背景色相关的配置项，
我目前遇到个需求是图标可以左右滑动并且下方有个滚动条指示范围，
左右滑动已经使用dataZoom-inside实现了，滚动条自然而然的就想到了使用dataZoom-slider。但是发现slider没有办法调整除了背景色之外的样式，如：圆角、高度等
Version & Environment [版本及环境]
- ECharts version [ECharts 版本]: 3.6.2
- Browser version [浏览器类型和版本]: chrome 58
- OS Version [操作系统类型和版本]: win10
Expected behaviour [期望结果]
希望能够增加此类功能，或者能够指引我其他的变通解决方式，谢谢！
ECharts option [ECharts配置项]
const colors = {
kNormal: '#234B65',
kHighlight: '#F5A623',
tag: 'rgba(56, 56, 56, 0.5)',
splitLine: 'rgba(56, 56, 56, 0.5)',
label: '#A6A6A6'
};
var rawData = [
{
"tradingDay": "2017-03-27",
"openPrice": 3268.92,
"highPrice": 3283.24,
"lowPrice": 3262.12,
"closePrice": 3266.96,
"dealQuantity": 20185267500
},
{
"tradingDay": "2017-03-28",
"openPrice": 3265.63,
"highPrice": 3265.63,
"lowPrice": 3246.09,
"closePrice": 3252.95,
"dealQuantity": 16171001300
},
{
"tradingDay": "2017-03-29",
"openPrice": 3252.87,
"highPrice": 3262.1,
"lowPrice": 3233.28,
"closePrice": 3241.31,
"dealQuantity": 21610557500
},
{
"tradingDay": "2017-03-30",
"openPrice": 3235.14,
"highPrice": 3240.02,
"lowPrice": 3195.85,
"closePrice": 3210.24,
"dealQuantity": 24713547900
},
{
"tradingDay": "2017-03-31",
"openPrice": 3206.25,
"highPrice": 3226.25,
"lowPrice": 3205.54,
"closePrice": 3222.51,
"dealQuantity": 19644292200
},
{
"tradingDay": "2017-04-05",
"openPrice": 3235.66,
"highPrice": 3270.65,
"lowPrice": 3233.24,
"closePrice": 3270.31,
"dealQuantity": 24832020200
},
{
"tradingDay": "2017-04-06",
"openPrice": 3272.19,
"highPrice": 3286.67,
"lowPrice": 3265.76,
"closePrice": 3281,
"dealQuantity": 24528799900
},
{
"tradingDay": "2017-04-07",
"openPrice": 3280.62,
"highPrice": 3295.19,
"lowPrice": 3275.05,
"closePrice": 3286.62,
"dealQuantity": 23610894200
},
{
"tradingDay": "2017-04-10",
"openPrice": 3285.46,
"highPrice": 3285.46,
"lowPrice": 3265.01,
"closePrice": 3269.39,
"dealQuantity": 23269461600
},
{
"tradingDay": "2017-04-11",
"openPrice": 3266.22,
"highPrice": 3290.39,
"lowPrice": 3244.4,
"closePrice": 3288.97,
"dealQuantity": 28128124800
},
{
"tradingDay": "2017-04-12",
"openPrice": 3283.84,
"highPrice": 3284.93,
"lowPrice": 3262.28,
"closePrice": 3273.83,
"dealQuantity": 26938179000
},
{
"tradingDay": "2017-04-13",
"openPrice": 3265.22,
"highPrice": 3281.14,
"lowPrice": 3261.49,
"closePrice": 3275.96,
"dealQuantity": 20734687500
},
{
"tradingDay": "2017-04-14",
"openPrice": 3276.14,
"highPrice": 3276.71,
"lowPrice": 3238.9,
"closePrice": 3246.07,
"dealQuantity": 21450855800
},
{
"tradingDay": "2017-04-17",
"openPrice": 3229.95,
"highPrice": 3229.95,
"lowPrice": 3199.91,
"closePrice": 3222.17,
"dealQuantity": 21273718900
},
{
"tradingDay": "2017-04-18",
"openPrice": 3215.4,
"highPrice": 3225.05,
"lowPrice": 3196.49,
"closePrice": 3196.71,
"dealQuantity": 18866135300
},
{
"tradingDay": "2017-04-19",
"openPrice": 3184.67,
"highPrice": 3189.44,
"lowPrice": 3147.07,
"closePrice": 3170.69,
"dealQuantity": 21323807500
},
{
"tradingDay": "2017-04-20",
"openPrice": 3165.67,
"highPrice": 3178.18,
"lowPrice": 3148.18,
"closePrice": 3172.1,
"dealQuantity": 19087398500
},
{
"tradingDay": "2017-04-21",
"openPrice": 3170.29,
"highPrice": 3180.79,
"lowPrice": 3158.63,
"closePrice": 3173.15,
"dealQuantity": 16476174000
},
{
"tradingDay": "2017-04-24",
"openPrice": 3164.25,
"highPrice": 3164.25,
"lowPrice": 3111.21,
"closePrice": 3129.53,
"dealQuantity": 18627743400
},
{
"tradingDay": "2017-04-25",
"openPrice": 3123.89,
"highPrice": 3145.27,
"lowPrice": 3117.45,
"closePrice": 3134.57,
"dealQuantity": 15341830700
},
{
"tradingDay": "2017-04-26",
"openPrice": 3132.92,
"highPrice": 3152.95,
"lowPrice": 3131.42,
"closePrice": 3140.85,
"dealQuantity": 16987810700
},
{
"tradingDay": "2017-04-27",
"openPrice": 3131.35,
"highPrice": 3155,
"lowPrice": 3097.33,
"closePrice": 3152.19,
"dealQuantity": 21179307300
},
{
"tradingDay": "2017-04-28",
"openPrice": 3144.02,
"highPrice": 3154.73,
"lowPrice": 3136.58,
"closePrice": 3154.66,
"dealQuantity": 16288989900
},
{
"tradingDay": "2017-05-02",
"openPrice": 3147.23,
"highPrice": 3154.78,
"lowPrice": 3136.54,
"closePrice": 3143.71,
"dealQuantity": 15422296200
},
{
"tradingDay": "2017-05-03",
"openPrice": 3138.31,
"highPrice": 3148.29,
"lowPrice": 3123.75,
"closePrice": 3135.35,
"dealQuantity": 16376392400
},
{
"tradingDay": "2017-05-04",
"openPrice": 3127.11,
"highPrice": 3143.82,
"lowPrice": 3111.39,
"closePrice": 3127.37,
"dealQuantity": 17796748500
},
{
"tradingDay": "2017-05-05",
"openPrice": 3114.77,
"highPrice": 3117.61,
"lowPrice": 3092.09,
"closePrice": 3103.04,
"dealQuantity": 17621364100
},
{
"tradingDay": "2017-05-08",
"openPrice": 3090.07,
"highPrice": 3093.45,
"lowPrice": 3067.69,
"closePrice": 3078.61,
"dealQuantity": 18052690400
},
{
"tradingDay": "2017-05-09",
"openPrice": 3064.85,
"highPrice": 3084.21,
"lowPrice": 3056.56,
"closePrice": 3080.53,
"dealQuantity": 13506667400
},
{
"tradingDay": "2017-05-10",
"openPrice": 3078.17,
"highPrice": 3090.82,
"lowPrice": 3051.59,
"closePrice": 3052.79,
"dealQuantity": 16079445200
},
{
"tradingDay": "2017-05-11",
"openPrice": 3036.79,
"highPrice": 3063.56,
"lowPrice": 3016.53,
"closePrice": 3061.5,
"dealQuantity": 19134190100
},
{
"tradingDay": "2017-05-12",
"openPrice": 3054.11,
"highPrice": 3090.49,
"lowPrice": 3051.87,
"closePrice": 3083.51,
"dealQuantity": 15968409900
},
{
"tradingDay": "2017-05-15",
"openPrice": 3085.93,
"highPrice": 3098.91,
"lowPrice": 3085.93,
"closePrice": 3090.23,
"dealQuantity": 13566072800
},
{
"tradingDay": "2017-05-16",
"openPrice": 3082.87,
"highPrice": 3113.51,
"lowPrice": 3060.53,
"closePrice": 3112.96,
"dealQuantity": 17377556400
},
{
"tradingDay": "2017-05-17",
"openPrice": 3107.8,
"highPrice": 3119.58,
"lowPrice": 3101.3,
"closePrice": 3104.44,
"dealQuantity": 16867415800
},
{
"tradingDay": "2017-05-18",
"openPrice": 3082.33,
"highPrice": 3103.44,
"lowPrice": 3077.96,
"closePrice": 3090.14,
"dealQuantity": 14862003500
},
{
"tradingDay": "2017-05-19",
"openPrice": 3086.71,
"highPrice": 3095.48,
"lowPrice": 3081.28,
"closePrice": 3090.63,
"dealQuantity": 12963523000
},
{
"tradingDay": "2017-05-22",
"openPrice": 3087.17,
"highPrice": 3103.94,
"lowPrice": 3063.15,
"closePrice": 3075.68,
"dealQuantity": 15368373000
},
{
"tradingDay": "2017-05-23",
"openPrice": 3069.39,
"highPrice": 3084.24,
"lowPrice": 3050.84,
"closePrice": 3061.95,
"dealQuantity": 17831059900
},
{
"tradingDay": "2017-05-24",
"openPrice": 3047.57,
"highPrice": 3064.81,
"lowPrice": 3022.3,
"closePrice": 3064.08,
"dealQuantity": 13981335300
},
{
"tradingDay": "2017-05-25",
"openPrice": 3055.34,
"highPrice": 3114.66,
"lowPrice": 3052.83,
"closePrice": 3107.83,
"dealQuantity": 19139184100
},
{
"tradingDay": "2017-05-26",
"openPrice": 3101.29,
"highPrice": 3120.66,
"lowPrice": 3100.39,
"closePrice": 3110.06,
"dealQuantity": 15592348600
},
{
"tradingDay": "2017-05-31",
"openPrice": 3125.33,
"highPrice": 3143.28,
"lowPrice": 3111.56,
"closePrice": 3117.18,
"dealQuantity": 15295043000
},
{
"tradingDay": "2017-06-01",
"openPrice": 3108.42,
"highPrice": 3113.52,
"lowPrice": 3097.68,
"closePrice": 3102.62,
"dealQuantity": 16301571900
},
{
"tradingDay": "2017-06-02",
"openPrice": 3094.23,
"highPrice": 3110.39,
"lowPrice": 3081.85,
"closePrice": 3105.54,
"dealQuantity": 14250492500
},
{
"tradingDay": "2017-06-05",
"openPrice": 3102.11,
"highPrice": 3105.51,
"lowPrice": 3084.83,
"closePrice": 3091.66,
"dealQuantity": 13257030000
},
{
"tradingDay": "2017-06-06",
"openPrice": 3084.54,
"highPrice": 3102.86,
"lowPrice": 3078.79,
"closePrice": 3102.13,
"dealQuantity": 11343996300
},
{
"tradingDay": "2017-06-07",
"openPrice": 3101.76,
"highPrice": 3140.77,
"lowPrice": 3098.95,
"closePrice": 3140.32,
"dealQuantity": 17322901400
},
{
"tradingDay": "2017-06-08",
"openPrice": 3136.47,
"highPrice": 3153.26,
"lowPrice": 3132.83,
"closePrice": 3150.33,
"dealQuantity": 15227765900
},
{
"tradingDay": "2017-06-09",
"openPrice": 3147.45,
"highPrice": 3165.92,
"lowPrice": 3146.11,
"closePrice": 3158.4,
"dealQuantity": 16013633400
},
{
"tradingDay": "2017-06-12",
"openPrice": 3149.53,
"highPrice": 3164.95,
"lowPrice": 3135.31,
"closePrice": 3139.88,
"dealQuantity": 14672942500
},
{
"tradingDay": "2017-06-13",
"openPrice": 3134.01,
"highPrice": 3155.99,
"lowPrice": 3131.04,
"closePrice": 3153.74,
"dealQuantity": 12831827900
},
{
"tradingDay": "2017-06-14",
"openPrice": 3146.75,
"highPrice": 3149.17,
"lowPrice": 3125.35,
"closePrice": 3130.67,
"dealQuantity": 13834704200
},
{
"tradingDay": "2017-06-15",
"openPrice": 3125.59,
"highPrice": 3137.59,
"lowPrice": 3117.08,
"closePrice": 3132.49,
"dealQuantity": 14695424500
},
{
"tradingDay": "2017-06-16",
"openPrice": 3126.37,
"highPrice": 3134.25,
"lowPrice": 3117.86,
"closePrice": 3123.17,
"dealQuantity": 12965275800
},
{
"tradingDay": "2017-06-19",
"openPrice": 3122.16,
"highPrice": 3146.77,
"lowPrice": 3121.78,
"closePrice": 3144.37,
"dealQuantity": 13489175800
},
{
"tradingDay": "2017-06-20",
"openPrice": 3148.02,
"highPrice": 3150.46,
"lowPrice": 3134.61,
"closePrice": 3140.01,
"dealQuantity": 14119180200
},
{
"tradingDay": "2017-06-21",
"openPrice": 3148.99,
"highPrice": 3157.03,
"lowPrice": 3132.62,
"closePrice": 3156.21,
"dealQuantity": 13668826800
},
{
"tradingDay": "2017-06-22",
"openPrice": 3152.24,
"highPrice": 3186.98,
"lowPrice": 3146.64,
"closePrice": 3147.45,
"dealQuantity": 19134400600
},
{
"tradingDay": "2017-06-23",
"openPrice": 3138.44,
"highPrice": 3158.05,
"lowPrice": 3118.09,
"closePrice": 3157.87,
"dealQuantity": 15484364800
},
{
"tradingDay": "2017-06-26",
"openPrice": 3157,
"highPrice": 3187.89,
"lowPrice": 3156.98,
"closePrice": 3185.44,
"dealQuantity": 17357921100
},
{
"tradingDay": "2017-06-27",
"openPrice": 3183.42,
"highPrice": 3193.46,
"lowPrice": 3172.46,
"closePrice": 3191.2,
"dealQuantity": 14820119800
},
{
"tradingDay": "2017-06-28",
"openPrice": 3183.63,
"highPrice": 3193.44,
"lowPrice": 3170.79,
"closePrice": 3173.2,
"dealQuantity": 14651672000
},
{
"tradingDay": "2017-07-03",
"openPrice": 3192,
"highPrice": 3196.29,
"lowPrice": 3177.02,
"closePrice": 3195.91,
"dealQuantity": 140305717
}
];
var kData = [];
var kDate = [];
rawData.map(item => {
kDate.push(item.tradingDay);
kData.push([
item.openPrice,
item.closePrice,
item.lowPrice,
item.highPrice
]);
});
option = {
animation: false,
grid: {
left: 20,
right: 45,
top: '10%',
bottom: 50
},
dataZoom: [
{
type: 'inside',
show: true,
// filterMode: 'empty', // 不改变Y轴刻度, 并且平移超出的部分不显示(none会显示)
zoomLock: true, // 不改变X轴刻度
xAxisIndex: 0,
start: 50,
end: 100
},
{
type: 'slider',
showDetail: false,
backgroundColor: '#272727',
borderColor: '#272727',
fillerColor: '#393A3A',
handleSize: 0,
bottom: -20,
left: 0,
right: 0,
dataBackground: {
lineStyle: {
opacity: 0
},
areaStyle: {
opacity: 0
}
}
}
],
xAxis: {
gridIndex: 0,
type: 'category',
data: kDate,
axisLine: { show: false },
axisTick: {
show: false,
inside: true
},
axisLabel: {
showMinLabel: true,
showMaxLabel: true,
formatter: (value) => {
return value.substr(5);
},
textStyle: {
fontSize: 12
},
// interval: (index, value) => {
// if (index === 0 ||
// (index + 1) % (Math.ceil(kDate.length / 6)) === 0 ||
// index === kDate.length - 1) {
// return value;
// }
// return false;
// }
}
},
yAxis: {
gridIndex: 0,
position: 'right',
scale: true,
splitNumber: 3,
axisLine: { show: false },
splitLine: {
show: true,
lineStyle: {
color: colors.splitLine
}
},
axisTick: { show: false }
},
textStyle: {
color: colors.label
},
series: [
{
type: 'candlestick',
name: '日K',
data: kData,
itemStyle: {
normal: {
color: colors.kNormal,
color0: colors.kNormal,
borderColor: colors.kNormal,
borderColor0: colors.kNormal
}
},
markPoint: {
itemStyle: {
normal: {
color: '#db4f13',
opacity: 0.8
}
},
data: []
},
markLine: {
silent: true,
symbolSize: 5,
lineStyle: {
normal: {
color: '#000000',
opacity: 0.5
}
},
// 假数据
data: []
}
}
]
};
Other comments [其他信息]
hayderGo
❤1
👍1
All 12 comments
可以参考这个例子里对 dataZoom 样式的处理：
http://echarts.baidu.com/demo.html#candlestick-touch
100pah
on 6 Jul 2017
我发现dataZoom：slider能够只能width和height，圆角没有试出来，但是文档里没有说明
hayderGo
on 7 Jul 2017
圆角是指最终要什么效果？
如果是『slider 框』要设成圆角，现在倒是不支持。
是否有图片呢？如果这个效果我们觉得不错，可以支持下。
100pah
on 12 Jul 2017
❤1
👎1
你好，谢谢你的解答，不好意思这么久了才看到你的回复。
圆角指的其实就是border-radius这样的，目前暂时放弃了，
下面的图就是我用dataZoom实现的最终效果,
对了，当触屏点是在图表上时不能够上下滑动屏幕，只能够左右滑动图表，请问有什么方法可以解决这个问题？
hayderGo
on 31 Jul 2017
@hayderGo 能把你的配置黏一下吗，我想要你的实现效果。
自己实现圆角，只能用svg画了，如：
dataZoom: [
{
show: true ,
handleIcon: `M 100, 100
m -75, 0
a 75,75 0 1,0 150,0
a 75,75 0 1,0 -150,0` ,
handleSize: '85%' ,
handleStyle: {
color: '#ff0000' ,
borderWidth: 0 ,
}
}
],
缺点就是fill的是圆角，外面的背景，还是长方形的
lcoder
on 28 Feb 2018
👍1
@100pah 建议支持slider框的圆角 +1 ； 另外加一个padding的需求怎么样？比如，需要fill和外面的slider有个内边距的需求
lcoder
on 28 Feb 2018
@lcoder 其实我想说的就是slider外框的圆角，实现不了，先放弃了...
hayderGo
on 8 Mar 2018
我也放弃了。。。
lcoder
on 9 Mar 2018
请问圆角支持了吗
Kelier
on 12 Mar 2019
提问过去2年多了， 为什么还不支持圆角，崩溃
wuyuchang
on 9 Oct 2019
🚀3
请问如何修改鼠标悬浮样式呢
7neves
on 16 Jan 2020
@hayderGo 能把你的配置黏一下吗，我想要你的实现效果。
自己实现圆角，只能用svg画了，如：dataZoom: [ { show: true , handleIcon: `M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0` , handleSize: '85%' , handleStyle: { color: '#ff0000' , borderWidth: 0 , } } ],缺点就是fill的是圆角，外面的背景，还是长方形的
很好，这个svg目前符合了需求，THK
7neves
on 20 Jan 2020
Was this page helpful?
0 / 5 - 0 ratings
Related issues
antorman
·
3Comments
akvaliya
·
3Comments
RoxetteI
·
3Comments
wm370857724
·
3Comments
hanhui
·
3Comments
Most helpful comment
提问过去2年多了， 为什么还不支持圆角，崩溃