将Echarts 中的 dataZoom 区域缩放配置简单归纳，快速的学习预览配置它的属性。
dataZoom 可以自由选择展示数据范围的情况下都可以使用 dataZoom 组件，用于增强增强图表的交互性，能够根据需求动态地调整图表显示的数据范围，从而更好地理解和分析数据。
我这边上传代码文件在文章中好像是需要 VIP 或者 花钱才能下载，所有打算将使用的示例代码就直接放在文章中算了。
一、dataZoom 区域缩放配置
1. inside 内置型区域缩放配置
option={
// inside 表示数据区域缩放组件将被放置在坐标系内部，默认为该值。当鼠标在坐标系区域内滚动时，可以通过拖拽选择数据区域进行缩放。
// slider 表示数据区域缩放组件将以滑动条的形式放置在坐标系下方。滑动条可以手动拖动或点击选择数据区域进行缩放。
// both 表示同时使用 'inside' 和 'slider' 两种方式的数据区域缩放组件，用户既可以在坐标系内部进行缩放，也可以通过滑动条进行缩放。
xAxis: [
{...}, // 第一个 xAxis
{...}, // 第二个 xAxis
{...}, // 第三个 xAxis
{...} // 第四个 xAxis
],
yAxis: [
{...}, // 第一个 yAxis
{...}, // 第二个 yAxis
{...}, // 第三个 yAxis
{...} // 第四个 yAxis
],
dataZoom:{
type:'inside', //指定数据区域缩放组件的类型
//当类型为 inside 可生效的配置
id:'1', // 组件ID
disAbled:true, // 是否开启缩放功能
xAxisIndex:[0,1], // 控制 X 轴，例如控制 第一个和第二个轴 xAxis 可缩放
yAxisIndex:1, // 控制 Y 轴，例如控制 第二个 yAxis 可缩放
radiusAxisIndex:1, // 控制极坐标中的第二个 radius 轴
angleAxisIndex:1, // 控制极坐标中的第二个 angle 轴
filterMode:'filter', // 数据过滤，来优化数据展示
//百分比值，都通用
start:40, // 数据展示窗口的初始数据
end:80, // 数据展示窗口的结束数据
minSpan:50, // 窗口的最小值
maxSpan:50, // 窗口的最大值
//绝对值吗，一般用在具体数值的轴
startValue:20, // 数据展示窗口的初始数据
endValue:80, // 数据展示窗口的结束数据
minValueSpan:100, // 窗口的最小值
maxValueSpan:100, // 窗口的最大值
orient:'horizontal', // 缩放是水平缩放还是竖直缩放
zoomLock:true, // 是否固定当前窗口，将缩放修改为左右偏移窗口
throttle:100, // 触发视图刷新的频率。
rangeMode:[30,70], // 缩放范围，当设置 start 等时为百分比 比例，若设置了startValue 等时为绝对值
zoomOnMouseWhell:'ctrl', // 如何触发缩放，如鼠标滚轮、 ctrl + 滚轮
moveOnMouseMove:true, // 缩放功能为平移时，如何移动鼠标来触发平移窗口,
moveOnMouseWhell:true, // 缩放功能为平移时，如何操作鼠标滚轮来触发偏移窗口
preventDefaultMouseMove:true, // 是否阻止 mousemove 事件的默认行为
//当类型为 slider 可生效的配置
},
}2. slider 滑动条形式缩放配置
option={
// inside 表示数据区域缩放组件将被放置在坐标系内部，默认为该值。当鼠标在坐标系区域内滚动时，可以通过拖拽选择数据区域进行缩放。
// slider 表示数据区域缩放组件将以滑动条的形式放置在坐标系下方。滑动条可以手动拖动或点击选择数据区域进行缩放。
// both 表示同时使用 'inside' 和 'slider' 两种方式的数据区域缩放组件，用户既可以在坐标系内部进行缩放，也可以通过滑动条进行缩放。
dataZoom:{
type:'slider', //指定数据区域缩放组件的类型
//当类型为 slider 可生效的配置
id:'1', // 组件ID
show:true, // 是否显示
backgroundColor:'red', // 组件的背景颜色
// 数据阴影的配置
dataBackground:{
// 阴影的线条样式
lineStyle:{
color:'red', // 线的颜色
width:2, // 线宽
type:'solid', // 线的类型
dashOffset:10, // 线的类型为 虚线时，虚线的 偏移量
cap:'butt', // 指定线段末端的图形
join:'bevel', // 线段两端连接形状
miterLimit:10, // join 为 miter 时，斜接面比例
shadowBlur:10, // 线的阴影大小
shadowColor:'red', // 线的阴影颜色
shadowOffsetX:10, // 阴影水平方向的偏移量
shadowOffsetY:10, // 阴影竖直方向的偏移量
opacity:0.5, // 阴影透明度
},
// 阴影填充样式
areaStyle:{
color:'red', // 填充颜色
shadowBlur:10, // 阴影大小
shadowColor:'red', // 阴影颜色
shadowOffsetX:10, // 阴影水平方向偏移量
shadowOffsetY:10, // 阴影竖直方向偏移量
opacity:0.8, // 阴影透明度
},
},
// 选中部分数据的阴影样式
selectedDataBackground:{
// ··· 配置与 dataBackground 内容一致
},
fillerColor:'red', // 选中范围的填充颜色
borderColor:'red', // 滑动块的边框颜色
borderRadius:5, // 滑动块的圆角
//缩放手柄配置
handleIcon:'image://图片路径', // 缩放手柄 icon 形状，可选择该属性自带的图标，网上的png格式才生效
handleSize:32, // 缩放手柄的大小
//缩放手柄样式，如果是自定义的图片，可能以下配置会被覆盖无效
handleStyle:{
color:'red', // 图形颜色
borderColor:'red', // 图形描边
borderWidth:2, // 图形描边宽度
borderType:'dashed', // 图形描边类型
borderDashOffset:10, // 描边类型为虚线时的虚线偏移量
borderCap:'butt', // 指定线段末端的图形
borderJoin:'bevel', // 线段连接图形
borderMiterLimit:10, // borderJoin 为 miter 时，斜接面 比例
shadowColor:'red', // 图形阴影颜色
shadowBlur:10, // 图形阴影大小
shadowOffsetX:10, // 图形阴影在水平方向上的偏移
shadowOffsetY:10, // 图形阴影在竖直方向上的偏移
opacity:0.4, // 图形透明度
},
//移动手柄配置
moveHandleIcon:'image://图片路径', // 移动手柄中间的icon ，网上的png格式生效，jpg不行
moveHandleSize:32, // 移动手柄大小
//移动手柄样式
moveHandleStyle:{
// ··· 配置与上面的缩放手柄样式(handleStyle) 内容一致
},
labelPreacision:'auto', // 拖拽时显示范围值 label 的精度
labelFormatter:'{value}单位字符', // label的格式化器
showDetail:true, // 拖拽时是否显示 label 数值
showDataShadow:true, // 是否显示数据阴影
realtime:true, // 在缩放范围时，缩放实时更新系列图表
// label 字体设置
textStyle:{
color:'red', // 字体颜色
fontStyle:'normal', // 字体风格
fontWeight:'normal', // 字体粗细
fontFamily:'Arial', // 字体系列
fontSize:12, // 字体大小
lineHeight:32, // 行高
width:50, // 文本显示宽度
height:50, // 文本显示高度
textBorderColor:'red', // 文字描边颜色
textBorderWidth:20, // 文字描边宽度
textBorderType:'solid', // 文字描边类型
textBorderDashOffset:10, // 文字描边为虚线时，虚线的偏移量
textShadowColor:'red', // 文字阴影颜色
textShadowBlur:10, // 文字阴影长度
textShadowOffsetX:10, // 文字阴影水平偏移量
textShaodwOffsetY:10, // 文字阴影竖直偏移量
overflow:'truncate', // 文本超出宽度之后的配置，换行 || 截断等
ellipsis:'···', // 文本超出长度，且为截断时，文本尾部展示内容
},
// 配置缩放控制的轴
xAxisIndex:0, // 组件控制的 X 轴
yAxisIndex:[0,1], // 组件控制 第一个和第二个 Y 轴
radiusAxisIndex:2, // 组件控制的 radius 轴
angleAxisIndex:1, // 组件控制的 angle 轴
filterMode:'filter', // 数据展示优化设置
start:'10%', // 起始百分比
end:'10%', // 结束百分比
startValue:10, // 起始的绝对数值
endValue:50, // 结束的绝对数值
minSpan:10, // 限制窗口最小值百分比
maxSpan:100, // 限制窗口的最大值百分比
minValueSpan:10, // 限制窗口最小值绝对值
maxValueSpan:100, // 限制窗口最大值绝对值
orient:'vertical', // 布局方式，横着还是竖着展示，在直角坐标系中，同时配置了控制的轴
zoomLock:false, // 是否固定当前的缩放范围
throttle:100, // 触发视图的刷新频率
rangeMode:[10,80], // 限制缩放范围，当设置 start 等时为百分比 比例，若设置了startValue 等时为绝对值
zlevel:1, // 所有图形的 zlevel 值
z:2, // 所有图形的 z 值
// 缩放滑动条的显示设置
left:'auto', // 距离 Echarts 容器的左侧距离
right:'auto', // 距离 Echarts 容器的右侧距离
top:'auto', // 距离 Echarts 容器的上侧距离
bottom:'auto', // 距离 Echarts 容器的底部距离
width:'50%', // 缩放滑动条的宽度
height:'50%', // 缩放滑动条的高度
// 刷选功能设置，是否可以直接在滑动块中直接选择范围来显示数据，不通过缩放手柄
brushSelect:true, // 是否开启刷选功能
// 刷选时，选中范围的样式
brushStyle:{
color:'red', // 选中范围颜色
borderColor:'red', // 选中范围描边颜色
borderWidth:5, // 选中范围描边宽度
borderType:'solid', // 选中范围描边类型
borderDashOffset:10, // 描边类型为虚线时，虚线的偏移量
borderCap:'butt', // 指定线段末端图形
borderJoin:'bevel', // 线段连接方式
borderMiterLimit:50, // borderJoin 为 miter 时，斜接面比例
shadowBlur:10, // 选中范围阴影大小
shadowColor:'red', // 选中范围阴影颜色
shadowOffsetX:10, // 选中范围阴影 水平上的偏移量
shadowOffsetY:10, // 选中范围阴影 竖直上的偏移量
opacity:0.6, // 透明度
}
// 选中滑动块中的手柄时，突出的手柄高亮状态
emphasis:{
// 缩放手柄的高亮状态
handleStyle:{
// ··· 该配置与上面的缩放手柄样式 handleStyle 内容一致
},
// 移动手柄的高亮状态
moveHandleStyle:{
// ··· 该配置与上面的缩放手柄氧
}
};
}
}二、解剖图：
1.内置缩放配置动态图
2.滑动条解剖图
三、解剖图中的配置代码
使用方法：
1.内置缩放配置
option = {
color: ["#3398DB"],
title: {
text: "Beijing AQI"
},
tooltip: {
trigger: "axis"
},
grid:[{
left:'0%',
containLabel:true,
top:'center',
width:'50%',
height:'60%',
},{
left:'55%',
containLabel:true,
top:'center',
width:'50%',
height:'60%',
}],
xAxis:[ {
gridIndex:0,
data: ["2014-07-14", "2014-07-15", "2014-07-16", "2014-07-17", "2014-07-18", "2014-07-19", "2014-07-20", "2014-07-21", "2014-07-22", "2014-07-23", "2014-07-24", "2014-07-25", "2014-07-26", "2014-07-27", "2014-07-28", "2014-07-29", "2014-07-30", "2014-07-31", "2014-08-01", "2014-08-02", "2014-08-03", "2014-08-05", "2014-08-06", "2014-08-07", "2014-08-08", "2014-08-09", "2014-08-10", "2014-08-11", "2014-08-12", "2014-08-13", "2014-08-14", "2014-08-15", "2014-08-16", "2014-08-17", "2014-08-18", "2014-08-19", "2014-08-20", "2014-08-21", "2014-08-22", "2014-08-23", "2014-08-24", "2014-08-25", "2014-08-26", "2014-08-27", "2014-08-28", "2014-08-29", "2014-08-30", "2014-08-31", "2014-09-01", "2014-09-03", "2014-09-04", "2014-09-05", "2014-09-06", "2014-09-07", "2014-09-08", "2014-09-09", "2014-09-10", "2014-09-11", "2014-09-12", "2014-09-13", "2014-09-14", "2014-09-15", "2014-09-16", "2014-09-17", "2014-09-18", "2014-09-19", "2014-09-20", "2014-09-21", "2014-09-22", "2014-09-23", "2014-09-24", "2014-09-25", "2014-09-26", "2014-09-27", "2014-09-28", "2014-09-29", "2014-09-30", "2014-10-01", "2014-10-02", "2014-10-03", "2014-10-04", "2014-10-05", "2014-10-06", "2014-10-07", "2014-10-08", "2014-10-09", "2014-10-10", "2014-10-11", "2014-10-14", "2014-10-15", "2014-10-16", "2014-10-17", "2014-10-18", "2014-10-19", "2014-10-20", "2014-10-21", "2014-10-22", "2014-10-23", "2014-10-24", "2014-10-25", "2014-10-26", "2014-10-27", "2014-10-28", "2014-10-29", "2014-10-30", "2014-10-31", "2014-11-01", "2014-11-03", "2014-11-04", "2014-11-05", "2014-11-07", "2014-11-08", "2014-11-09", "2014-11-10", "2014-11-11", "2014-11-13", "2014-11-14", "2014-11-15", "2014-11-16", "2014-11-17", "2014-11-18", "2014-11-19", "2014-11-23", "2014-11-24", "2014-11-25", "2014-11-26", "2014-11-27", "2014-11-28", "2014-11-29", "2014-12-01", "2014-12-02", "2014-12-03", "2014-12-05", "2014-12-06", "2014-12-07", "2014-12-08", "2014-12-09", "2014-12-10", "2014-12-11", "2014-12-13", "2014-12-14", "2014-12-15", "2014-12-17", "2014-12-19", "2014-12-22", "2014-12-23", "2014-12-25", "2014-12-26", "2014-12-27", "2014-12-28", "2014-12-29", "2014-12-30", "2015-01-01", "2015-01-02", "2015-01-03", "2015-01-04", "2015-01-05", "2015-01-06", "2015-01-07", "2015-01-08", "2015-01-09", "2015-01-10", "2015-01-11", "2015-01-12", "2015-01-13", "2015-01-14", "2015-01-15", "2015-01-16", "2015-01-17", "2015-01-18", "2015-01-19", "2015-01-20", "2015-01-22", "2015-01-23", "2015-01-24", "2015-01-25", "2015-01-26", "2015-01-28", "2015-01-29", "2015-01-31", "2015-02-01", "2015-02-02", "2015-02-03", "2015-02-05", "2015-02-06", "2015-02-09", "2015-02-10", "2015-02-11", "2015-02-12", "2015-02-13", "2015-02-14", "2015-02-15", "2015-02-16", "2015-02-18", "2015-02-19", "2015-02-20", "2015-02-21", "2015-02-22", "2015-02-23", "2015-02-24"]
}, {
gridIndex:1,
data: ["2014-07-14", "2014-07-15", "2014-07-16", "2014-07-17", "2014-07-18", "2014-07-19", "2014-07-20", "2014-07-21", "2014-07-22", "2014-07-23", "2014-07-24", "2014-07-25", "2014-07-26", "2014-07-27", "2014-07-28", "2014-07-29", "2014-07-30", "2014-07-31", "2014-08-01", "2014-08-02", "2014-08-03", "2014-08-05", "2014-08-06", "2014-08-07", "2014-08-08", "2014-08-09", "2014-08-10", "2014-08-11", "2014-08-12", "2014-08-13", "2014-08-14", "2014-08-15", "2014-08-16", "2014-08-17", "2014-08-18", "2014-08-19", "2014-08-20", "2014-08-21", "2014-08-22", "2014-08-23", "2014-08-24", "2014-08-25", "2014-08-26", "2014-08-27", "2014-08-28", "2014-08-29", "2014-08-30", "2014-08-31", "2014-09-01", "2014-09-03", "2014-09-04", "2014-09-05", "2014-09-06", "2014-09-07", "2014-09-08", "2014-09-09", "2014-09-10", "2014-09-11", "2014-09-12", "2014-09-13", "2014-09-14", "2014-09-15", "2014-09-16", "2014-09-17", "2014-09-18", "2014-09-19", "2014-09-20", "2014-09-21", "2014-09-22", "2014-09-23", "2014-09-24", "2014-09-25", "2014-09-26", "2014-09-27", "2014-09-28", "2014-09-29", "2014-09-30", "2014-10-01", "2014-10-02", "2014-10-03", "2014-10-04", "2014-10-05", "2014-10-06", "2014-10-07", "2014-10-08", "2014-10-09", "2014-10-10", "2014-10-11", "2014-10-14", "2014-10-15", "2014-10-16", "2014-10-17", "2014-10-18", "2014-10-19", "2014-10-20", "2014-10-21", "2014-10-22", "2014-10-23", "2014-10-24", "2014-10-25", "2014-10-26", "2014-10-27", "2014-10-28", "2014-10-29", "2014-10-30", "2014-10-31", "2014-11-01", "2014-11-03", "2014-11-04", "2014-11-05", "2014-11-07", "2014-11-08", "2014-11-09", "2014-11-10", "2014-11-11", "2014-11-13", "2014-11-14", "2014-11-15", "2014-11-16", "2014-11-17", "2014-11-18", "2014-11-19", "2014-11-23", "2014-11-24", "2014-11-25", "2014-11-26", "2014-11-27", "2014-11-28", "2014-11-29", "2014-12-01", "2014-12-02", "2014-12-03", "2014-12-05", "2014-12-06", "2014-12-07", "2014-12-08", "2014-12-09", "2014-12-10", "2014-12-11", "2014-12-13", "2014-12-14", "2014-12-15", "2014-12-17", "2014-12-19", "2014-12-22", "2014-12-23", "2014-12-25", "2014-12-26", "2014-12-27", "2014-12-28", "2014-12-29", "2014-12-30", "2015-01-01", "2015-01-02", "2015-01-03", "2015-01-04", "2015-01-05", "2015-01-06", "2015-01-07", "2015-01-08", "2015-01-09", "2015-01-10", "2015-01-11", "2015-01-12", "2015-01-13", "2015-01-14", "2015-01-15", "2015-01-16", "2015-01-17", "2015-01-18", "2015-01-19", "2015-01-20", "2015-01-22", "2015-01-23", "2015-01-24", "2015-01-25", "2015-01-26", "2015-01-28", "2015-01-29", "2015-01-31", "2015-02-01", "2015-02-02", "2015-02-03", "2015-02-05", "2015-02-06", "2015-02-09", "2015-02-10", "2015-02-11", "2015-02-12", "2015-02-13", "2015-02-14", "2015-02-15", "2015-02-16", "2015-02-18", "2015-02-19", "2015-02-20", "2015-02-21", "2015-02-22", "2015-02-23", "2015-02-24"]
}],
yAxis: [{
gridIndex:0,
splitLine: {
show: false
}
},{
gridIndex:1,
splitLine: {
show: false
}
}],
dataZoom: {
start: 20,
end:30,
startValue:10,
type: "inside",
orient:'horizontal',
zoomLock:true
},
series: [
{
xAxisIndex:0,
yAxisIndex:0,
name: "Beijing AQI",
type: "bar",
data: [156, 140, 133, 186, 182, 106, 119, 68, 54, 82, 90, 134, 188, 194, 159, 159, 169, 244, 199, 163, 149, 80, 67, 162, 140, 143, 125, 76, 119, 70, 104, 109, 159, 124, 135, 150, 164, 169, 83, 155, 75, 59, 78, 136, 103, 104, 176, 89, 127, 54, 100, 140, 186, 200, 61, 109, 111, 114, 97, 94, 66, 54, 87, 80, 84, 117, 168, 129, 127, 64, 60, 144, 170, 58, 87, 70, 53, 92, 78, 123, 95, 54, 68, 200, 314, 379, 346, 233, 80, 73, 76, 132, 211, 289, 250, 82, 99, 163, 267, 353, 78, 72, 88, 140, 206, 204, 65, 59, 150, 79, 63, 93, 80, 95, 59, 65, 77, 143, 98, 64, 93, 282, 155, 94, 196, 293, 83, 114, 276, 54, 65, 51, 62, 89, 65, 82, 276, 153, 52, 69, 113, 82, 99, 53, 103, 100, 73, 155, 243, 155, 125, 65, 65, 79, 200, 226, 122, 60, 85, 190, 105, 208, 59, 160, 211, 265, 386, 118, 89, 94, 77, 113, 143, 257, 117, 185, 119, 65, 87, 60, 108, 188, 143, 62, 100, 152, 166, 55, 59, 175, 293, 326, 153, 73, 267, 183, 394, 158, 86, 207]
},{
xAxisIndex:1,
yAxisIndex:1,
name: "Beijing AQI",
type: "bar",
data: [156, 140, 133, 186, 182, 106, 119, 68, 54, 82, 90, 134, 188, 194, 159, 159, 169, 244, 199, 163, 149, 80, 67, 162, 140, 143, 125, 76, 119, 70, 104, 109, 159, 124, 135, 150, 164, 169, 83, 155, 75, 59, 78, 136, 103, 104, 176, 89, 127, 54, 100, 140, 186, 200, 61, 109, 111, 114, 97, 94, 66, 54, 87, 80, 84, 117, 168, 129, 127, 64, 60, 144, 170, 58, 87, 70, 53, 92, 78, 123, 95, 54, 68, 200, 314, 379, 346, 233, 80, 73, 76, 132, 211, 289, 250, 82, 99, 163, 267, 353, 78, 72, 88, 140, 206, 204, 65, 59, 150, 79, 63, 93, 80, 95, 59, 65, 77, 143, 98, 64, 93, 282, 155, 94, 196, 293, 83, 114, 276, 54, 65, 51, 62, 89, 65, 82, 276, 153, 52, 69, 113, 82, 99, 53, 103, 100, 73, 155, 243, 155, 125, 65, 65, 79, 200, 226, 122, 60, 85, 190, 105, 208, 59, 160, 211, 265, 386, 118, 89, 94, 77, 113, 143, 257, 117, 185, 119, 65, 87, 60, 108, 188, 143, 62, 100, 152, 166, 55, 59, 175, 293, 326, 153, 73, 267, 183, 394, 158, 86, 207]
}]
}2.滑动条类型配置
option = {
color: ["#3398DB"],
grid:[
{
left:'5%',
top:'8%',
width:'90%',
height:'50%',
}],
title: {
text: "Beijing AQI"
},
tooltip: {
trigger: "axis"
},
xAxis: [{
data: ["2014-07-14", "2014-07-15", "2014-07-16", "2014-07-17", "2014-07-18", "2014-07-19", "2014-07-20", "2014-07-21", "2014-07-22", "2014-07-23", "2014-07-24", "2014-07-25", "2014-07-26", "2014-07-27", "2014-07-28", "2014-07-29", "2014-07-30", "2014-07-31", "2014-08-01", "2014-08-02", "2014-08-03", "2014-08-05", "2014-08-06", "2014-08-07", "2014-08-08", "2014-08-09", "2014-08-10", "2014-08-11", "2014-08-12", "2014-08-13", "2014-08-14", "2014-08-15", "2014-08-16", "2014-08-17", "2014-08-18", "2014-08-19", "2014-08-20", "2014-08-21", "2014-08-22", "2014-08-23", "2014-08-24", "2014-08-25", "2014-08-26", "2014-08-27", "2014-08-28", "2014-08-29", "2014-08-30", "2014-08-31", "2014-09-01", "2014-09-03", "2014-09-04", "2014-09-05", "2014-09-06", "2014-09-07", "2014-09-08", "2014-09-09", "2014-09-10", "2014-09-11", "2014-09-12", "2014-09-13", "2014-09-14", "2014-09-15", "2014-09-16", "2014-09-17", "2014-09-18", "2014-09-19", "2014-09-20", "2014-09-21", "2014-09-22", "2014-09-23", "2014-09-24", "2014-09-25", "2014-09-26", "2014-09-27", "2014-09-28", "2014-09-29", "2014-09-30", "2014-10-01", "2014-10-02", "2014-10-03", "2014-10-04", "2014-10-05", "2014-10-06", "2014-10-07", "2014-10-08", "2014-10-09", "2014-10-10", "2014-10-11", "2014-10-14", "2014-10-15", "2014-10-16", "2014-10-17", "2014-10-18", "2014-10-19", "2014-10-20", "2014-10-21", "2014-10-22", "2014-10-23", "2014-10-24", "2014-10-25", "2014-10-26", "2014-10-27", "2014-10-28", "2014-10-29", "2014-10-30", "2014-10-31", "2014-11-01", "2014-11-03", "2014-11-04", "2014-11-05", "2014-11-07", "2014-11-08", "2014-11-09", "2014-11-10", "2014-11-11", "2014-11-13", "2014-11-14", "2014-11-15", "2014-11-16", "2014-11-17", "2014-11-18", "2014-11-19", "2014-11-23", "2014-11-24", "2014-11-25", "2014-11-26", "2014-11-27", "2014-11-28", "2014-11-29", "2014-12-01", "2014-12-02", "2014-12-03", "2014-12-05", "2014-12-06", "2014-12-07", "2014-12-08", "2014-12-09", "2014-12-10", "2014-12-11", "2014-12-13", "2014-12-14", "2014-12-15", "2014-12-17", "2014-12-19", "2014-12-22", "2014-12-23", "2014-12-25", "2014-12-26", "2014-12-27", "2014-12-28", "2014-12-29", "2014-12-30", "2015-01-01", "2015-01-02", "2015-01-03", "2015-01-04", "2015-01-05", "2015-01-06", "2015-01-07", "2015-01-08", "2015-01-09", "2015-01-10", "2015-01-11", "2015-01-12", "2015-01-13", "2015-01-14", "2015-01-15", "2015-01-16", "2015-01-17", "2015-01-18", "2015-01-19", "2015-01-20", "2015-01-22", "2015-01-23", "2015-01-24", "2015-01-25", "2015-01-26", "2015-01-28", "2015-01-29", "2015-01-31", "2015-02-01", "2015-02-02", "2015-02-03", "2015-02-05", "2015-02-06", "2015-02-09", "2015-02-10", "2015-02-11", "2015-02-12", "2015-02-13", "2015-02-14", "2015-02-15", "2015-02-16", "2015-02-18", "2015-02-19", "2015-02-20", "2015-02-21", "2015-02-22", "2015-02-23", "2015-02-24"],
gridIndex:0,
},{
data: ["2014-07-14", "2014-07-15", "2014-07-16", "2014-07-17", "2014-07-18", "2014-07-19", "2014-07-20", "2014-07-21", "2014-07-22", "2014-07-23", "2014-07-24", "2014-07-25", "2014-07-26", "2014-07-27", "2014-07-28", "2014-07-29", "2014-07-30", "2014-07-31", "2014-08-01", "2014-08-02", "2014-08-03", "2014-08-05", "2014-08-06", "2014-08-07", "2014-08-08", "2014-08-09", "2014-08-10", "2014-08-11", "2014-08-12", "2014-08-13", "2014-08-14", "2014-08-15", "2014-08-16", "2014-08-17", "2014-08-18", "2014-08-19", "2014-08-20", "2014-08-21", "2014-08-22", "2014-08-23", "2014-08-24", "2014-08-25", "2014-08-26", "2014-08-27", "2014-08-28", "2014-08-29", "2014-08-30", "2014-08-31", "2014-09-01", "2014-09-03", "2014-09-04", "2014-09-05", "2014-09-06", "2014-09-07", "2014-09-08", "2014-09-09", "2014-09-10", "2014-09-11", "2014-09-12", "2014-09-13", "2014-09-14", "2014-09-15", "2014-09-16", "2014-09-17", "2014-09-18", "2014-09-19", "2014-09-20", "2014-09-21", "2014-09-22", "2014-09-23", "2014-09-24", "2014-09-25", "2014-09-26", "2014-09-27", "2014-09-28", "2014-09-29", "2014-09-30", "2014-10-01", "2014-10-02", "2014-10-03", "2014-10-04", "2014-10-05", "2014-10-06", "2014-10-07", "2014-10-08", "2014-10-09", "2014-10-10", "2014-10-11", "2014-10-14", "2014-10-15", "2014-10-16", "2014-10-17", "2014-10-18", "2014-10-19", "2014-10-20", "2014-10-21", "2014-10-22", "2014-10-23", "2014-10-24", "2014-10-25", "2014-10-26", "2014-10-27", "2014-10-28", "2014-10-29", "2014-10-30", "2014-10-31", "2014-11-01", "2014-11-03", "2014-11-04", "2014-11-05", "2014-11-07", "2014-11-08", "2014-11-09", "2014-11-10", "2014-11-11", "2014-11-13", "2014-11-14", "2014-11-15", "2014-11-16", "2014-11-17", "2014-11-18", "2014-11-19", "2014-11-23", "2014-11-24", "2014-11-25", "2014-11-26", "2014-11-27", "2014-11-28", "2014-11-29", "2014-12-01", "2014-12-02", "2014-12-03", "2014-12-05", "2014-12-06", "2014-12-07", "2014-12-08", "2014-12-09", "2014-12-10", "2014-12-11", "2014-12-13", "2014-12-14", "2014-12-15", "2014-12-17", "2014-12-19", "2014-12-22", "2014-12-23", "2014-12-25", "2014-12-26", "2014-12-27", "2014-12-28", "2014-12-29", "2014-12-30", "2015-01-01", "2015-01-02", "2015-01-03", "2015-01-04", "2015-01-05", "2015-01-06", "2015-01-07", "2015-01-08", "2015-01-09", "2015-01-10", "2015-01-11", "2015-01-12", "2015-01-13", "2015-01-14", "2015-01-15", "2015-01-16", "2015-01-17", "2015-01-18", "2015-01-19", "2015-01-20", "2015-01-22", "2015-01-23", "2015-01-24", "2015-01-25", "2015-01-26", "2015-01-28", "2015-01-29", "2015-01-31", "2015-02-01", "2015-02-02", "2015-02-03", "2015-02-05", "2015-02-06", "2015-02-09", "2015-02-10", "2015-02-11", "2015-02-12", "2015-02-13", "2015-02-14", "2015-02-15", "2015-02-16", "2015-02-18", "2015-02-19", "2015-02-20", "2015-02-21", "2015-02-22", "2015-02-23", "2015-02-24"],
gridIndex:0,
}],
yAxis:[ {
gridIndex:0,
}, {
gridIndex:0,
}],
dataZoom: {
type: "slider",
textStyle:{
color:'gold',
fontSize:28,
},
backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(128, 255, 165)'
},
{
offset: 1,
color: 'rgb(1, 191, 236)'
}
]),
dataBackground:{
lineStyle:{
color:'red',
width:4,
},
areaStyle:{
color:'green',
shadowBlur:0,
opacity:0,
},
},
borderRadius:10,
borderColor:'red',
handleIcon:'image://https://p2.ssl.qhimgs1.com/sdr/400__/t01c7d3fa7695fc7edc.png',
handleSize:48,
handleStyle:{
borderColor:'red',
borderWidth:2,
},
moveHandleIcon:'image://https://p2.ssl.qhimgs1.com/sdr/400__/t014e2e2e27361d2d58.png',
moveHandleSize:48,
width:'auto',
height:'30%',
bottom:'8%',
brushSelect:true,
brushStyle:{
color:'#fff',
borderColor:'red',
},
emphasis:{
handleStyle:{
color:'red',
},
moveHandleStyle:{
color:'red',
}
}
},
series: [
{
name: "Beijing AQI",
xAxisIndex:0,
yAxisIndex:0,
type: "bar",
data: [156, 140, 133, 186, 182, 106, 119, 68, 54, 82, 90, 134, 188, 194, 159, 159, 169, 244, 199, 163, 149, 80, 67, 162, 140, 143, 125, 76, 119, 70, 104, 109, 159, 124, 135, 150, 164, 169, 83, 155, 75, 59, 78, 136, 103, 104, 176, 89, 127, 54, 100, 140, 186, 200, 61, 109, 111, 114, 97, 94, 66, 54, 87, 80, 84, 117, 168, 129, 127, 64, 60, 144, 170, 58, 87, 70, 53, 92, 78, 123, 95, 54, 68, 200, 314, 379, 346, 233, 80, 73, 76, 132, 211, 289, 250, 82, 99, 163, 267, 353, 78, 72, 88, 140, 206, 204, 65, 59, 150, 79, 63, 93, 80, 95, 59, 65, 77, 143, 98, 64, 93, 282, 155, 94, 196, 293, 83, 114, 276, 54, 65, 51, 62, 89, 65, 82, 276, 153, 52, 69, 113, 82, 99, 53, 103, 100, 73, 155, 243, 155, 125, 65, 65, 79, 200, 226, 122, 60, 85, 190, 105, 208, 59, 160, 211, 265, 386, 118, 89, 94, 77, 113, 143, 257, 117, 185, 119, 65, 87, 60, 108, 188, 143, 62, 100, 152, 166, 55, 59, 175, 293, 326, 153, 73, 267, 183, 394, 158, 86, 207]
}]
}
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
