ECharts中dataZoom组件及散点图的绘制
2023-06-13 09:17:20 时间
ECharts中dataZoom组件及散点图的绘制
- dataZoom 组件是对 数轴（axis） 进行『数据窗口缩放』『数据窗口平移』操作。 可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。
- dataZoom 组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。下面例子中会详细说明。
- dataZoom 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。
- dataZoom 的数据窗口范围的设置，目前支持两种形式：
- 百分比形式：参见 dataZoom.start 和 dataZoom.end。
绝对数值形式：参见 dataZoom.startValue 和 dataZoom.endValue。
dataZoom 组件现在支持几种子组件：
- 内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中。
- 滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条操作。
- 框选型数据区域缩放组件（dataZoomSelect）：全屏的选框进行数据区域缩放。入口和配置项均在 toolbox中。
在代码中加入dataZoom组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>代码加入dataZoom组件</title>
<!--引入Echarts文件-->
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
var dom=document.getElementById("main");
var myChart=echarts.init(dom);
var app={};
var option=null;
//先只在对单独一个横轴，加上 dataZoom 组件，代码示例如下：
option = {
tooltip:{},//提示框
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
dataZoom: [
{
type: 'slider', //这个dataZoom组件是slider型dataZoom组件
xAxisIndex:0, //dataZoom-slider组件控制第一个XAxis
start: 10, //左边在10%位置
end: 60 //右边在60%位置
},
{
type: 'inside', //这个dataZoom组件是inside型dataZoom组件
xAxisIndex:0, //dataZoom-inslide组件控制第一个XAxis
start: 10, //左边在10%的位置
end: 60 //右边在60%的位置
},{
type:'slider',
yAxisIndex:0, //dataZoom-slider组件控制第一个yAxis
start:30,
end:80
},{
type:'inside',
yAxisIndex:0, //dataZoom-inside组件控制第一个yAxis
start:30,
end:80
}
],
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {//控制点的大小,(参数为data中第三列的数据)
return val[2] * 40; //用回调函数控制点的大小(请查看官方文档)
},
data: [//data中第三个参数控制点的大小
["14.616","7.241","0.896"],
["3.958","5.701","0.955"],
["2.768","8.971","0.669"],
["9.051","9.710","0.171"],
["14.046","4.182","0.536"],
["12.295","1.429","0.962"],
["4.417","8.167","0.113"],
["0.492","4.771","0.785"],
["7.632","2.605","0.645"],
["14.242","5.042","0.368"]
]
}
]
}
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>