• Echarts散点图筛选新玩法dataZoom

    目录

    前言

    一、引入Echarts5.4.3

    二、新建index.html

    三、绑定Echarts展示元素

    四、初始数据绑定

    五、option设置

    六、效果展示

    七、参数说明

    总结 

    前言

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

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

    一、引入Echarts5.4.3

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

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

    二、新建index.html

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

    1. html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     
    6.     <script src="echarts.js">script>
    7.   head>
    8. html>

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

    三、绑定Echarts展示元素

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

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

    四、初始数据绑定

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

    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设置

    1. var sizeValue = '57%';
    2. 		var symbolSize = 2.5;
    3. 		  var option = {
    4. 			  legend: {},
    5. 			  tooltip: {},
    6. 			  toolbox: {
    7. 				left: 'center',
    8. 				feature: {
    9. 				  dataZoom: {}
    10. 				}
    11. 			  },
    12. 			  grid: [
    13. 				{ right: sizeValue, bottom: sizeValue },
    14. 				{ left: sizeValue, bottom: sizeValue },
    15. 				{ right: sizeValue, top: sizeValue },
    16. 				{ left: sizeValue, top: sizeValue }
    17. 			  ],
    18. 			  xAxis: [
    19. 				{
    20. 				  type: 'value',
    21. 				  gridIndex: 0,
    22. 				  name: 'Income',
    23. 				  axisLabel: { rotate: 50, interval: 0 }
    24. 				},
    25. 				{
    26. 				  type: 'category',
    27. 				  gridIndex: 1,
    28. 				  name: 'Country',
    29. 				  boundaryGap: false,
    30. 				  axisLabel: { rotate: 50, interval: 0 }
    31. 				},
    32. 				{
    33. 				  type: 'value',
    34. 				  gridIndex: 2,
    35. 				  name: 'Income',
    36. 				  axisLabel: { rotate: 50, interval: 0 }
    37. 				},
    38. 				{
    39. 				  type: 'value',
    40. 				  gridIndex: 3,
    41. 				  name: 'Life Expectancy',
    42. 				  axisLabel: { rotate: 50, interval: 0 }
    43. 				}
    44. 			  ],
    45. 			  yAxis: [
    46. 				{ type: 'value', gridIndex: 0, name: 'Life Expectancy' },
    47. 				{ type: 'value', gridIndex: 1, name: 'Income' },
    48. 				{ type: 'value', gridIndex: 2, name: 'Population' },
    49. 				{ type: 'value', gridIndex: 3, name: 'Population' }
    50. 			  ],
    51. 			  dataset: {
    52. 				dimensions: [
    53. 				  'Income',
    54. 				  'Life Expectancy',
    55. 				  'Population',
    56. 				  'Country',
    57. 				  { name: 'Year', type: 'ordinal' }
    58. 				],
    59. 				source: data
    60. 			  },
    61. 			  series: [
    62. 				{
    63. 				  type: 'scatter',
    64. 				  symbolSize: symbolSize,
    65. 				  xAxisIndex: 0,
    66. 				  yAxisIndex: 0,
    67. 				  encode: {
    68. 					x: 'Income',
    69. 					y: 'Life Expectancy',
    70. 					tooltip: [0, 1, 2, 3, 4]
    71. 				  }
    72. 				},
    73. 				{
    74. 				  type: 'scatter',
    75. 				  symbolSize: symbolSize,
    76. 				  xAxisIndex: 1,
    77. 				  yAxisIndex: 1,
    78. 				  encode: {
    79. 					x: 'Country',
    80. 					y: 'Income',
    81. 					tooltip: [0, 1, 2, 3, 4]
    82. 				  }
    83. 				},
    84. 				{
    85. 				  type: 'scatter',
    86. 				  symbolSize: symbolSize,
    87. 				  xAxisIndex: 2,
    88. 				  yAxisIndex: 2,
    89. 				  encode: {
    90. 					x: 'Income',
    91. 					y: 'Population',
    92. 					tooltip: [0, 1, 2, 3, 4]
    93. 				  }
    94. 				},
    95. 				{
    96. 				  type: 'scatter',
    97. 				  symbolSize: symbolSize,
    98. 				  xAxisIndex: 3,
    99. 				  yAxisIndex: 3,
    100. 				  encode: {
    101. 					x: 'Life Expectancy',
    102. 					y: 'Population',
    103. 					tooltip: [0, 1, 2, 3, 4]
    104. 				  }
    105. 				}
    106. 			  ]
    107. 			};

    六、效果展示

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

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

    七、参数说明

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

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

    总结 

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

  • 相关阅读:
    某些之前的漏洞的遗忘的记录
    大语言模型 (LLM) 红队测试：提前解决模型漏洞
    滑动窗口总结模板与例题（c++）
    【黄啊码】PHP压缩图片（简洁易懂版，不懂我下次不写）
    太空射击第10课： Score （繪畫和文字）
    Unity之ShaderGraph如何实现边缘光效果
    【图形学】14 UnityShader语义（二）
    60天零基础干翻C++————双指针问题
    GEE开发之Landsat8_NDVI的数据分析
    Git 传文件到github
  • 原文地址：https://blog.csdn.net/yelangkingwuzuhu/article/details/133037749