option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50, 60, 70]
}],
dataZoom: [
{
type: 'slider', // 缩放型数据区域组件
start: 0, // 起始位置(百分比)
end: 50, // 结束位置(百分比)
handleStyle: {
color: '#3398DB' // 滑块的颜色
},
dataBackground: {
lineStyle: {
color: 'rgba(0, 0, 0, 0.2)' // 数据阴影的线条颜色
},
areaStyle: {
color: 'rgba(0, 0, 0, 0.1)' // 数据阴影的区域颜色
}
}
}
]
};
在上述示例中:
- handleStyle 用于设置滑块的样式,包括颜色、大小等。
- dataBackground 用于设置数据阴影的样式,其中 lineStyle 用于配置数据阴影的线条颜色,areaStyle 用于配置数据阴影的区域颜色。
你可以根据实际需求调整这些配置参数,以满足你的设计要求。
转载请注明出处:http://www.zyzy.cn/article/detail/5288/ECharts