Simply summarize the dataZoom area zoom configuration in Echarts, and quickly learn to preview and configure its properties.
dataZoom You can use the dataZoom component when you can freely choose to display the data range. It is used to enhance the interactivity of the chart and dynamically adjust the data range displayed by the chart according to needs, so as to better understand and analyze the data.
It seems that the code files I uploaded in the article require VIP or money to download. All the sample codes that I plan to use can be placed directly in the article.
1. dataZoom area scaling configuration
1. inside built-in area scaling configuration
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 zoom configuration in the form of a 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:{
// ··· 该配置与上面的缩放手柄氧
}
};
}
}2. Anatomy diagram:
1. Built-in zoom configuration dynamic graph
2. Slider anatomy
3. Configuration code in anatomy diagram
Instructions:
1. Built-in scaling configuration
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.Slider type configuration
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]
}]
}