Echarts散点图筛选新玩法dataZoom

前言

一、引入Echarts5.4.3

二、新建index.html

三、绑定Echarts展示元素

前言

如果您在日常的工作当中也会遇到如下场景，需要在线对已经展示出来的图表进行进一步的筛选，常见的如散点图，将随机分布的散点图按照新筛选条件进行过滤后直接在图表上选择条件后，图表会相应的进行刷新展示。

本文将以Echarts5.4.3为例，重点讲解如何开发基于散点图的图上筛选模式，通过筛选模式，可以实现多图表的动态交互，实现数据的高效过滤，提升数据分析的效率。文章会一步一步的展示如何搭建Echarts多列散点图，以及如何进行交互设计。希望对您有所帮助。

一、引入Echarts5.4.3

如果是在线环境，可以参考Echarts的在线官网来实现CDN在线引用即可。如果是离线环境，需要将Echarts进行离线化。如果因为网络原因不好下载Echarts5.4.3压缩包，可以在评论区留言并留下联系方式，可以将相关资源包进行分享。解压后的目录如下所示：

在解压后的dist目录下的echarts.js文件拷贝到一个新建的文件夹，为后续开发做准备。

二、新建index.html

在刚才echarts.js文件所在目录新建一个index.html,示例代码如下：

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>

打开这个 index.html，大概率会看到一片空白。但是不要担心，打开控制台确认没有报错信息，就可以进行下一步。

三、绑定Echarts展示元素

在引入Echarts.js文件后，需要在页面中设置具体展示的元素。如下：

html 复制代码

<div id="main" style="width: 80%;height:800px;margin:auto;"></div>

四、初始数据绑定

在Echarts页面开发中，需要准备初始化数据。展示如下：

javascript 复制代码

var data = [["Income","Life Expectancy","Population","Country","Year"],[815,34.05,351014,"Australia",1800],[1314,39,645526,"Canada",1800],[985,32,321675013,"China",1800],[864,32.2,345043,"Cuba",1800],[1244,36.5731262,977662,"Finland",1800],[1803,33.96717024,29355111,"France",1800],[1639,38.37,22886919,"Germany",1800],[926,42.84559912,61428,"Iceland",1800],[1052,25.4424,168574895,"India",1800],[1050,36.4,30294378,"Japan",1800],[579,26,4345000,"North Korea",1800],[576,25.8,9395000,"South Korea",1800],[658,34.05,100000,"New Zealand",1800],[1278,37.91620899,868570,"Norway",1800],[1213,35.9,9508747,"Poland",1800],[1430,29.5734572,31088398,"Russia",1800],[1221,35,9773456,"Turkey",1800],[3431,38.6497603,12327466,"United Kingdom",1800],[2128,39.41,6801854,"United States",1800],[834,34.05,342440,"Australia",1810],[1400,39.01496774,727603,"Canada",1810],[985,32,350542958,"China",1810],[970,33.64,470176,"Cuba",1810],[1267,36.9473378,1070625,"Finland",1810],[1839,37.4,30293172,"France",1810],[1759,38.37,23882461,"Germany",1810],[928,43.13915533,61428,"Iceland",1810],[1051,25.4424,171940819,"India",1810],[1064,36.40397538,30645903,"Japan",1810],[573,26,4345000,"North Korea",1810],[570,25.8,9395000,"South Korea",1810],[659,34.05,100000,"New Zealand",1810],[1299,36.47500606,918398,"Norway",1810],[1260,35.9,9960687,"Poland",1810],[1447,29.5734572,31088398,"Russia",1810],[1223,35,9923007,"Turkey",1810],[3575,38.34738144,14106058,"United Kingdom",1810],[2283,39.41,8294928,"United States",1810],[853,34.05,334002,"Australia",1820],[1491,39.02993548,879432,"Canada",1820],[985,32,380055273,"China",1820],[1090,35.04,607664,"Cuba",1820],[1290,37.29122269,1190807,"Finland",1820],[1876,39.21,31549988,"France",1820],[1887,38.37,25507768,"Germany",1820],[929,36.56365268,62498,"Iceland",1820],[1050,25.4424,176225709,"India",1820],[1079,36.40795077,30993147,"Japan",1820],[567,26,4353556,"North Korea",1820],[564,25.8,9408016,"South Korea",1820],[660,34.05,100000,"New Zealand",1820],[1320,46.96239815,995904,"Norway",1820],[1309,35.9,10508375,"Poland",1820],[1464,29.5734572,31861526,"Russia",1820],[1225,35,10118315,"Turkey",1820],[3403,41.31247671,16221883,"United Kingdom",1820],[2242,39.41,10361646,"United States",1820],[1399,34.05,348143,"Australia",1830],[1651,39.04490323,1202146,"Canada",1830],[986,32,402373519,"China",1830],[1224,35.74,772812,"Cuba",1830],[1360,36.29644969,1327905,"Finland",1830],[1799,39.56,33174810,"France",1830],[2024,38.37,28016571,"Germany",1830],[1036,40.5022162,65604,"Iceland",1830],[1052,25.4424,182214537,"India",1830],[1094,36.41192615,31330455,"Japan",1830],[561,26,4377749,"North Korea",1830],[559,25.8,9444785,"South Korea",1830],[661,34.05,91723,"New Zealand",1830],[1403,45.75400094,1115667,"Norway",1830],[1360,35.9,11232857,"Poland",1830],[1562,29.5734572,34134430,"Russia",1830],[1292,35,10398375,"Turkey",1830],[3661,43.01830917,18533999,"United Kingdom",1830],[2552,39.41,13480460,"United States",1830],[2269,34.05,434095,"Australia",1840],[1922,40.19012,1745604,"Canada",1840],[986,32,411213424,"China",1840],[1374,36.48,975565,"Cuba",1840],[1434,41.46900965,1467238,"Finland",1840],[2184,40.37,34854476,"France",1840],[2102,38.37,31016143,"Germany",1840],[1155,31.97,70010,"Iceland",1840],[1053,25.4424,189298397,"India",1840],[1110,36.41590154,31663783,"Japan",1840],[556,26,4410700,"North Korea",1840],[553,25.8,9494784,"South Korea",1840],[662,34.05,82479,"New Zealand",1840],[1604,45.61661054,1252476,"Norway",1840],[1413,35.9,12090161,"Poland",1840],[1666,29.5734572,37420913,"Russia",1840],[1362,35,10731241,"Turkey",1840],[4149,39.92715263,20737251,"United Kingdom",1840],[2792,39.41,17942443,"United States",1840],[3267,34.05,742619,"Australia",1850],[2202,40.985432,2487811,"Canada",1850],[985,32,402711280,"China",1850],[1543,36.26,1181650,"Cuba",1850],[1512,37.35415172,1607810,"Finland",1850],[2146,43.28,36277905,"France",1850],[2182,38.37,33663143,"Germany",1850],[1287,36.61,74711,"Iceland",1850],[1055,25.4424,196657653,"India",1850],[1125,36.41987692,32223184,"Japan",1850],[550,26,4443898,"North Korea",1850],[547,25.8,9558873,"South Korea",1850],[1898,34.05,94934,"New Zealand",1850],[1675,49.53,1401619,"Norway",1850],[1468,35.9,13219914,"Poland",1850],[1778,29.5734572,41023821,"Russia",1850],[1436,35,11074762,"Turkey",1850],[4480,42.8,22623571,"United Kingdom",1850],[3059,39.41,24136293,"United States",1850],[4795,34.05,1256048,"Australia",1860],[2406,41.541504,3231465,"Canada",1860],[1023,28.85,380047548,"China",1860],[1733,36.24,1324000,"Cuba",1860],[1594,38.15099864,1734254,"Finland",1860],[3086,43.33,37461341,"France",1860],[2509,38.37,36383150,"Germany",1860],[1435,19.76,79662,"Iceland",1860],[1056,23,204966302,"India",1860],[1168,36.42385231,33176900,"Japan",1860],[545,26,4542395,"North Korea",1860],[542,25.8,9650608,"South Korea",1860],[3674,34.05,157114,"New Zealand",1860],[2033,50,1580366,"Norway",1860],[1525,35.9,14848599,"Poland",1860],[1896,29.5734572,44966686,"Russia",1860],[1514,35,11428718,"Turkey",1860],[5268,43.01,24783522,"United Kingdom",1860],[3714,39.41,31936643,"United States",1860],[5431,34.05,1724213,"Australia",1870],[2815,42.460624,3817167,"Canada",1870],[1099,31.95714286,363661158,"China",1870],[1946,29.66,1424672,"Cuba",1870],[1897,45.66140699,1847468,"Finland",1870],[3297,36.41,38170355,"France",1870],[2819,38.37,39702235,"Germany",1870],[1599,38.37,84941,"Iceland",1870],[1058,25.4424,213725049,"India",1870],[1213,36.59264,34638021,"Japan",1870],[539,26,4656353,"North Korea",1870],[536,25.8,9741935,"South Korea",1870],[5156,34.05,301045,"New Zealand",1870],[2483,50.86,1746718,"Norway",1870],[1584,35.9,17013787,"Poland",1870],[2023,31.12082604,49288504,"Russia",1870],[1597,35,11871788,"Turkey",1870],[6046,40.95,27651628,"United Kingdom",1870],[4058,39.41,40821569,"United States",1870],[7120,39.34215686,2253007,"Australia",1880],[3021,44.512464,4360348,"Canada",1880],[1015,32,365544192,"China",1880],[2185,36.84,1555081,"Cuba",1880],[1925,39.67,2047577,"Finland",1880],[3555,42.73,39014053,"France",1880],[3057,38.905,43577358,"Germany",1880],[2035,42.32,90546,"Iceland",1880],[1084,25.4424,223020377,"India",1880],[1395,37.03648,36826469,"Japan",1880],[534,26,4798574,"North Korea",1880],[531,25.8,9806394,"South Korea",1880],[6241,38.51282051,505065,"New Zealand",1880],[2827,51.91,1883716,"Norway",1880],[1848,35.9,19669587,"Poland",1880],[2158,30.20106663,53996807,"Russia",1880],[1535,35,12474351,"Turkey",1880],[6553,43.78,30849957,"United Kingdom",1880],[5292,39.41,51256498,"United States",1880],[7418,44.63431373,3088808,"Australia",1890],[3963,45.12972,4908078,"Canada",1890],[918,32,377135349,"China",1890],[2454,39.54,1658274,"Cuba",1890],[2305,44.61,2358344,"Finland",1890],[3639,43.36,40015501,"France",1890],[3733,40.91,48211294,"Germany",1890],[2009,36.58,96517,"Iceland",1890],[1163,24.384,232819584,"India",1890],[1606,37.67568,39878734,"Japan",1890],[528,26,4959044,"North Korea",1890],[526,25.8,9856047,"South Korea",1890],[6265,42.97564103,669985,"New Zealand",1890],[3251,48.6,2003954,"Norway",1890],[2156,37.41086957,22618933,"Poland",1890],[2233,29.93047652,59151534,"Russia",1890],[1838,35,13188522,"Turkey",1890],[7169,44.75,34215580,"United Kingdom",1890],[5646,45.21,63810074,"United States",1890],[6688,49.92647059,3743708,"Australia",1900],[4858,48.288448,5530806,"Canada",1900],[894,32,395184556,"China",1900],[2756,33.11248,1762227,"Cuba",1900],[2789,41.8,2633389,"Finland",1900],[4314,45.08,40628638,"France",1900],[4596,43.915,55293434,"Germany",1900],[2352,46.64,102913,"Iceland",1900],[1194,18.35,243073946,"India",1900],[1840,38.6,44040263,"Japan",1900],[523,26,5124044,"North Korea",1900],[520,25.8,9926633,"South Korea",1900],[7181,47.43846154,815519,"New Zealand",1900],[3643,53.47,2214923,"Norway",1900],[2583,40.4326087,24700965,"Poland",1900],[3087,30.74960789,64836675,"Russia",1900],[1985,35,13946634,"Turkey",1900],[8013,46.32,37995759,"United Kingdom",1900],[6819,48.92818182,77415610,"United States",1900],[8695,55.21862745,4408209,"Australia",1910],[6794,52.123024,7181200,"Canada",1910],[991,32,417830774,"China",1910],[3095,35.21936,2268558,"Cuba",1910],[3192,48.53,2930441,"Finland",1910],[4542,51.37,41294572,"France",1910],[5162,48.40833333,64064129,"Germany",1910],[3012,52.67,109714,"Iceland",1910],[1391,23.18032,253761202,"India",1910],[1998,39.9736,49314848,"Japan",1910],[544,24.097344,5293486,"North Korea",1910],[538,24.097344,10193929,"South Korea",1910],[8896,51.90128205,1044340,"New Zealand",1910],[4332,57.99,2383631,"Norway",1910],[2846,43.45434783,26493422,"Poland",1910],[3487,31.40217766,71044207,"Russia",1910],[2144,35,14746479,"Turkey",1910],[8305,53.99,41804912,"United Kingdom",1910],[8287,51.8,93559186,"United States",1910],[7867,60.51078431,5345428,"Australia",1920],[6430,56.569064,8764205,"Canada",1920],[1012,32,462750597,"China",1920],[4042,37.38208,3067116,"Cuba",1920],[3097,47.55,3140763,"Finland",1920],[4550,51.6,39069937,"France",1920],[4482,53.5,62277173,"Germany",1920],[2514,54.58,117013,"Iceland",1920],[1197,24.71866667,267795301,"India",1920],[2496,42.04432,55545937,"Japan",1920],[779,27.99984,6117873,"North Korea",1920],[756,27.99984,11839704,"South Korea",1920],[9453,56.36410256,1236395,"New Zealand",1920],[5483,58.89,2634635,"Norway",1920],[3276,46.47608696,24166006,"Poland",1920]];

五、option设置

javascript 复制代码

var sizeValue = '57%';
		var symbolSize = 2.5;
		  var option = {
			  legend: {},
			  tooltip: {},
			  toolbox: {
				left: 'center',
				feature: {
				  dataZoom: {}
				}
			  },
			  grid: [
				{ right: sizeValue, bottom: sizeValue },
				{ left: sizeValue, bottom: sizeValue },
				{ right: sizeValue, top: sizeValue },
				{ left: sizeValue, top: sizeValue }
			  ],
			  xAxis: [
				{
				  type: 'value',
				  gridIndex: 0,
				  name: 'Income',
				  axisLabel: { rotate: 50, interval: 0 }
				},
				{
				  type: 'category',
				  gridIndex: 1,
				  name: 'Country',
				  boundaryGap: false,
				  axisLabel: { rotate: 50, interval: 0 }
				},
				{
				  type: 'value',
				  gridIndex: 2,
				  name: 'Income',
				  axisLabel: { rotate: 50, interval: 0 }
				},
				{
				  type: 'value',
				  gridIndex: 3,
				  name: 'Life Expectancy',
				  axisLabel: { rotate: 50, interval: 0 }
				}
			  ],
			  yAxis: [
				{ type: 'value', gridIndex: 0, name: 'Life Expectancy' },
				{ type: 'value', gridIndex: 1, name: 'Income' },
				{ type: 'value', gridIndex: 2, name: 'Population' },
				{ type: 'value', gridIndex: 3, name: 'Population' }
			  ],
			  dataset: {
				dimensions: [
				  'Income',
				  'Life Expectancy',
				  'Population',
				  'Country',
				  { name: 'Year', type: 'ordinal' }
				],
				source: data
			  },
			  series: [
				{
				  type: 'scatter',
				  symbolSize: symbolSize,
				  xAxisIndex: 0,
				  yAxisIndex: 0,
				  encode: {
					x: 'Income',
					y: 'Life Expectancy',
					tooltip: [0, 1, 2, 3, 4]
				  }
				},
				{
				  type: 'scatter',
				  symbolSize: symbolSize,
				  xAxisIndex: 1,
				  yAxisIndex: 1,
				  encode: {
					x: 'Country',
					y: 'Income',
					tooltip: [0, 1, 2, 3, 4]
				  }
				},
				{
				  type: 'scatter',
				  symbolSize: symbolSize,
				  xAxisIndex: 2,
				  yAxisIndex: 2,
				  encode: {
					x: 'Income',
					y: 'Population',
					tooltip: [0, 1, 2, 3, 4]
				  }
				},
				{
				  type: 'scatter',
				  symbolSize: symbolSize,
				  xAxisIndex: 3,
				  yAxisIndex: 3,
				  encode: {
					x: 'Life Expectancy',
					y: 'Population',
					tooltip: [0, 1, 2, 3, 4]
				  }
				}
			  ]
			};

六、效果展示

经过以上的步骤后，再打开浏览器可以看到以下的效果。

在图表的上面的两个操作按钮，一个回退，一个是筛选。点击刷选按钮进行数据选择。

七、参数说明

dataZoom 组件用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。现在支持这几种类型的 dataZoom 组件：

内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。
框选型数据区域缩放组件（dataZoomSelect）：提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在 toolbox 中。

更详细的说明可看到echarts的官网。

总结

以上就是本文的全部内容，本文将以Echarts5.4.3为例，重点讲解如何开发基于散点图的图上筛选模式，通过筛选模式，可以实现多图表的动态交互，实现数据的高效过滤，提升数据分析的效率。文章会一步一步的展示如何搭建Echarts多列散点图，以及如何进行交互设计。行文仓促，如有不当，敬请批评指正。