Table of contents
1. Introduction of Echarts5.4.3
3. Bind Echarts display elements
Preface
If you also encounter the following scenarios in your daily work, you need to further filter the displayed charts online. Common ones are scatter charts. Filter the randomly distributed scatter charts according to the new filter conditions and directly After selecting conditions on the chart, the chart will be refreshed and displayed accordingly.
This article will take Echarts5.4.3 as an example, focusing on how to develop a graph filtering mode based on scatter plots. Through the filtering mode, dynamic interaction of multiple charts can be achieved, efficient filtering of data can be achieved, and the efficiency of data analysis can be improved. The article will show step by step how to build Echarts multi-column scatter chart and how to carry out interactive design. Hope this helps.
1. Introduction of Echarts5.4.3
If it is an online environment, you can refer to the online official website of Echarts to implement CDN online reference. If it is an offline environment, Echarts needs to be taken offline. If it is difficult to download the Echarts5.4.3 compressed package due to network reasons, you can leave a message in the comment area and leave your contact information, and you can share the relevant resource package. The unzipped directory looks as follows:
Copy the echarts.js file in the decompressed dist directory to a new folder to prepare for subsequent development.
2. Create new index.html
Create a new index.html in the directory where the echarts.js file is located. The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
</html>When you open this index.html, you will most likely see a blank page. But don't worry, open the console and confirm that there are no error messages, then you can proceed to the next step.
3. Bind Echarts display elements
After introducing the Echarts.js file, you need to set specific display elements on the page. as follows:
<div id="main" style="width: 80%;height:800px;margin:auto;"></div>4. Initial data binding
In Echarts page development, initialization data needs to be prepared. Shown below:
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]];5. option settings
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]
}
}
]
};6. Effect display
After going through the above steps, open the browser again and you will see the following effect.
There are two operation buttons on the top of the chart, one is back and the other is filter. Click the Brush Selection button to select data.
7. Parameter description
dataZoom Components are used for regional zooming, so that you can freely focus on detailed data information, or get an overview of the entire data, or remove the influence of outliers. These types of dataZoom components are now supported:
-
Built-in data area zoom component (dataZoomInside) : Built into the coordinate system, users can zoom or roam the coordinate system through mouse dragging, mouse wheel, and finger sliding (on touch screens).
-
Slider-type data area zoom component (dataZoomSlider) : There is a separate slider bar on which the user can zoom or roam.
-
Frame selection data area zoom component (dataZoomSelect) : Provides a selection box for data area zooming. That is toolbox.feature.dataZoom , the configuration item is
toolboxin.
More detailed instructions can be found on the official website of echarts.
Summarize
The above is the entire content of this article. This article will take Echarts5.4.3 as an example to focus on how to develop a graph filtering mode based on scatter plots. Through the filtering mode, dynamic interaction of multiple charts can be achieved, efficient filtering of data can be achieved, and data can be improved. Analysis efficiency. The article will show step by step how to build Echarts multi-column scatter chart and how to carry out interactive design. The writing is hasty. If there is anything inappropriate, please criticize and correct me.