Introduction to visual panel
In response to the current trend of data visualization, more and more enterprises need to use visual charts to display and reflect the data in many scenarios (marketing data, production data and user data), so as to make the data more intuitive and highlight the data characteristics.
01 - using technology
The following knowledge is required to complete the project:
- div + css layout
- flex layout
- Less
- Native js + jquery usage
- rem adaptation
- echarts Foundation
02 case adaptation scheme
-
The design draft is 1920px
-
flexible.js divides the screen into 24 equal parts
-
The benchmark value of the cssrem plug-in is 80px
Plug in - configure button - configure extension settings - set in Root Font Size.
But don't forget to restart the vscode software to ensure that it takes effect
-
03 - Basic Setting
- body set the background image, zoom to 100%, and the row height is 1.15
- css initialization
04 header layout
- The height is 100px
- Background image, displayed in the container
- Zoom to 100%
- h1 the title part is white and 38 pixels are displayed in the middle, and the row height is 80 pixels
- The right of the time module showTime is 30px, the line height is 75px, the text color is rgba(255, 255, 255, 0.7) and the text size is 20 pixels
// Format: current time: 17-0:54:14, March 2020 <script> var t = null; t = setTimeout(time, 1000);//Start running function time() { clearTimeout(t);//Clear timer dt = new Date(); var y = dt.getFullYear(); var mt = dt.getMonth() + 1; var day = dt.getDate(); var h = dt.getHours();//When getting var m = dt.getMinutes();//Get points var s = dt.getSeconds();//Get seconds document.querySelector(".showTime").innerHTML = 'Current time:' + y + "year" + mt + "month" + day + "-" + h + "Time" + m + "branch" + s + "second"; t = setTimeout(time, 1000); //Set the timer and run the cycle } </script>
- css style of header part
header { position: relative; height: 1.25rem; background: url(../images/head_bg.png) no-repeat top center; background-size: 100% 100%; h1 { font-size: 0.475rem; color: #fff; text-align: center; line-height: 1rem; } .showTime { position: absolute; top: 0; right: 0.375rem; line-height: 0.9375rem; font-size: 0.25rem; color: rgba(255, 255, 255, 0.7); } }
05 mainbox main module
-
You need an inner margin of 10px on the left and right
-
The column container is divided into three columns, accounting for 3:5:3
css Style:
.mainbox { padding: 0.125rem 0.125rem 0; display: flex; .column { flex: 3; } &:nth-child(2) { flex: 5; } }
06 - common panel module panel
- The height is 310px
- 1px solid rgba(25, 186, 139, 0.17) border of 1 pixel
- There is a line Jpg background picture
- padding is about 0 at the top, 15px at the bottom and 40px at the bottom
- The bottom outer margin is 15px
- Use the panel box before and after to make the upper two corners with the size of 10px and the line with the size of 2px solid #02a6b5
- Add a new box before and after to make the two corners on the lower side with a width and height of 10px
.panel { position: relative; height: 3.875rem; border: 1px solid rgba(25, 186, 139, 0.17); background: url(../images/line\(1\).png); padding: 0 0.1875rem 0.5rem; margin-bottom: 0.1875rem; &::before { position: absolute; top: 0; left: 0; content: ""; width: 10px; height: 10px; border-top: 2px solid #02a6b5; border-left: 2px solid #02a6b5; } &::after { position: absolute; top: 0; right: 0; content: ""; width: 10px; height: 10px; border-top: 2px solid #02a6b5; border-right: 2px solid #02a6b5; } .panel-footer { position: absolute; left: 0; bottom: 0; width: 100%; &::before { position: absolute; bottom: 0; left: 0; content: ""; width: 10px; height: 10px; border-bottom: 2px solid #02a6b5; border-left: 2px solid #02a6b5; } &::after { position: absolute; bottom: 0; right: 0; content: ""; width: 10px; height: 10px; border-bottom: 2px solid #02a6b5; border-right: 2px solid #02a6b5; } } }
07 column bar module (layout)
-
The height of the title module h2 is 48px, the text color is white, and the text size is 20px
-
Icon content module chart height 240px
-
The above can be used as the public style part of the panel
h2 { height: 0.6rem; line-height: 0.6rem; text-align: center; color: #fff; font-size: 20px; font-weight: 400; } .chart { height: 3rem; background-color: pink; }
08 - middle layout
- Above is the no digital module
- The following is the map module
- The digital module no has a background color rgba(101, 132, 226, 0.1); There is an inner margin of 15 pixels
- Note that the middle column has an outer margin of about 10px and 15px below
- The no module is divided up and down, with numbers (no HD) above and related text descriptions (no BD) below
- The no HD digital module has a frame 1px solid rgba(25, 186, 139, 0.17)
- The no HD digital module is divided into two small li. The height of each small li is 80px, the text size is 70px, the color is #ffeb7b, and the font is the icon font electronicFont
- No HD uses after and before to make two small corners, with frame 2px solid #02a6b5 width of 30px and height of 10px
- The small vertical line can be 1px wide if the first small li after is given, and the background color is rgba(255, 255, 255, 0.2); 50% top 25% height
- There are also two small li in no BD. the height is 40px, the text color is rgba(255, 255, 255, 0.7), the text size is 18px, and the upper and inner margins are 10px
/* Declaration font*/ @font-face { font-family: electronicFont; src: url(../font/DS-DIGIT.TTF); }
Map module production:
- The height of the map module is 810px, which contains four boxes chart module sphere box rotation 1 rotation 2
- The size of the sphere picture module map1 is 518px. The background picture should be added because it needs to be scaled 100% and positioned to the most central transparency. 3
- Rotate 1 map 2 with a size of 643px. Add a background picture because it needs to be scaled to 100% and positioned to the central transparency. 6 do a rotation animation and press the sphere with z-index
- Rotate 2 map3 with a size of 566px. Add a background picture because you want to zoom 100% and position it in the center. Note that the rotation animation is counterclockwise
<div class="no"> <div class="no-hd"> <ul> <li>125811</li> <li>104563</li> </ul> </div> <div class="no-bd"> <ul> <li>Front end demand</li> <li>Market supply</li> </ul> </div> </div> <div class="map"> <div class="chart"></div> <div class="map1"></div> <div class="map2"></div> <div class="map3"></div> </div>
Middle style
/* Declaration font*/ @font-face { font-family: electronicFont; src: url(../font/DS-DIGIT.TTF); } .no { background: rgba(101, 132, 226, 0.1); padding: 0.1875rem; .no-hd { position: relative; border: 1px solid rgba(25, 186, 139, 0.17); &::before { content: ""; position: absolute; width: 30px; height: 10px; border-top: 2px solid #02a6b5; border-left: 2px solid #02a6b5; top: 0; left: 0; } &::after { content: ""; position: absolute; width: 30px; height: 10px; border-bottom: 2px solid #02a6b5; border-right: 2px solid #02a6b5; right: 0; bottom: 0; } ul { display: flex; li { position: relative; flex: 1; text-align: center; height: 1rem; line-height: 1rem; font-size: 0.875rem; color: #ffeb7b; padding: 0.05rem 0; font-family: electronicFont; font-weight: bold; &:first-child::after { content: ""; position: absolute; height: 50%; width: 1px; background: rgba(255, 255, 255, 0.2); right: 0; top: 25%; } } } } .no-bd ul { display: flex; li { flex: 1; height: 0.5rem; line-height: 0.5rem; text-align: center; font-size: 0.225rem; color: rgba(255, 255, 255, 0.7); padding-top: 0.125rem; } } } .map { position: relative; height: 10.125rem; .chart { position: absolute; top: 0; left: 0; z-index: 5; height: 10.125rem; width: 100%; } .map1, .map2, .map3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6.475rem; height: 6.475rem; background: url(../images/map.png) no-repeat; background-size: 100% 100%; opacity: 0.3; } .map2 { width: 8.0375rem; height: 8.0375rem; background-image: url(../images/lbx.png); opacity: 0.6; animation: rotate 15s linear infinite; z-index: 2; } .map3 { width: 7.075rem; height: 7.075rem; background-image: url(../images/jt.png); animation: rotate1 10s linear infinite; } @keyframes rotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes rotate1 { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } } }
09 echarts introduction
Common data visualization libraries:
- D3.js Javascript visual tool library with the highest evaluation on the Web at present (difficult to start)
- ECharts.js Baidu produced an open source Javascript data visualization library
- Highcharts.js foreign front-end data visualization library, non-commercial and free, is used by many large foreign companies
- AntV ant financial service's new generation of data visualization solutions, etc
- Highcharts and Echarts are like the relationship between Office and WPS
ECharts, an open-source visualization library implemented by JavaScript, can run smoothly on PC and mobile devices. It is compatible with most current browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.), and the underlying layer depends on vector graphics library ZRender , provide intuitive, interactive and highly personalized data visualization charts.
vernacular:
- Is a JS plug-in
- Good performance and smooth operation of PC and mobile devices
- Compatible with mainstream browsers
- Many commonly used charts are available and can be customized.
Official website address: https://www.echartsjs.com/zh/index.html
10 echarts experience
Official course: [five minutes to start echarts]( https://www.echartsjs.com/zh/tutorial.html#5 Minutes (ECharts)
- Download echorts https://github.com/apache/incubator-echarts/tree/4.5.0
Use steps:
- Introduce the ecarts plug-in file into the html page
- Prepare a DOM container of size
<div id="main" style="width: 600px;height:400px;"></div>
- Initialize the ecarts instance object
var myChart = echarts.init(document.getElementById('main'));
- Specify configuration items and data (options)
var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] };
- Set the configuration item to the ecarts instance object
myChart.setOption(option);
11 echarts basic configuration
This requires students to know the main functions of the following configuration modules
Main configurations to understand: series xAxis yAxis grid tooltip title legend color
-
series
- List of series. Each series determines its own chart type by type
- Vernacular: icon data, specify what type of icon, and multiple charts can overlap.
-
xAxis: the x-axis in the rectangular coordinate system grid
- boundaryGap: the blank strategy on both sides of the coordinate axis is true. At this time, the scale is only used as a separation line, and the label and data point will be in the middle of the band between the two scales.
-
yAxis: y axis in rectangular coordinate system grid
-
Grid: drawing grid in rectangular coordinate system.
-
title: title Component
-
tooltip: prompt box component
-
legend: legend component
-
Color: palette color list
Data stacking: after the series on the same category axis are configured with the same stack value, the values of the next series will be added to the values of the previous series.
option = { // Color sets the color of our lines. Note that there is an array behind it color: ['pink', 'red', 'green', 'skyblue'], // Set the title of the chart title: { text: 'Line chart stack 123' }, // Prompt box component of chart tooltip: { // Trigger mode trigger: 'axis' }, // Legend components legend: { // If there is a name value in series, the data in legend can be deleted }, // Grid configuration grid can control the size of line chart and bar chart grid: { left: '3%', right: '4%', bottom: '3%', // Whether to display the scale label. If it is true, it will be displayed; otherwise, it is vice versa containLabel: true }, // Toolbox components can be saved as pictures and other functions toolbox: { feature: { saveAsImage: {} } }, // Set the relevant configuration of the x-axis xAxis: { type: 'category', // Is there a gap between our lines and coordinate axes boundaryGap: false, data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] }, // Set the relevant configuration of y-axis yAxis: { type: 'value' }, // Series chart configuration, which determines which type of chart to display series: [ { name: 'Mail marketing', type: 'line', data: [120, 132, 101, 134, 90, 230, 210] }, { name: 'Alliance advertising', type: 'line', data: [220, 182, 191, 234, 290, 330, 310] }, { name: 'Video advertising', type: 'line', data: [150, 232, 201, 154, 190, 330, 410] }, { name: 'Direct access', type: 'line', data: [320, 332, 301, 334, 390, 330, 320] } ] };
12 - histogram chart (two steps)
- Find similar examples on the official website, analyze them appropriately, and introduce them into HTML pages
- Customize charts according to requirements
- Import into html page
// Histogram 1 module (function() { // Instantiate object let myChart = echarts.init(document.querySelector(".bar .chart")); // Specify configuration and data let option = { color: ["#3398DB"], tooltip: { trigger: "axis", axisPointer: { // Axis indicator, axis trigger active type: "shadow" // The default is straight line, and the options are: 'line' | 'shadow' } }, grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true }, xAxis: [ { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], axisTick: { alignWithLabel: true } } ], yAxis: [ { type: "value" } ], series: [ { name: "Direct access", type: "bar", barWidth: "60%", data: [10, 52, 200, 334, 390, 330, 220] } ] }; // Configure to instance object myChart.setOption(option); })();
-
Customized according to demand
-
Modify chart column color #2f89cf
-
Change the chart size from top to 10px and bottom to 4% grid to determine the size of our histogram
color: ["#2f89cf"], grid: { left: "0%", top: "10px", right: "0%", bottom: "4%", containLabel: true },
- X-axis related settings xAxis
- The text color is set to RGBA (255255255,. 6) and the font size is 12px
- The style of the X axis is not displayed
// Sets the x-axis label text style
-
//Text color and size of x axis
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
//The x-axis style is not displayed
axisLine: {
show: false
//If you want to set a separate line style
// lineStyle: {
// color: "rgba(255,255,255,.1)",
// width: 1,
// type: "solid"
}
}
- Y Axis related customization - Set text color to rgba(255,255,255,.6) Font size is 12 px - Y Change the grid line bar style to 1 pixel rgba(255,255,255,.1) frame - The color of the separator line is modified to 1 pixel rgba(255,255,255,.1) ~~~JavaScript // y-axis text label style axisLabel: { color: "rgba(255,255,255,.6)", fontSize: "12" }, // y-axis line style axisLine: { lineStyle: { color: "rgba(255,255,255,.1)", // width: 1, // type: "solid" } 5232}, // y-axis separator line style splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" } }
- Change the column shape to fillet and the column width in series
series: [ { name: "Direct access", type: "bar", // Modify column width barWidth: "35%", data: [10, 52, 200, 334, 390, 330, 220], itemStyle: { // Modify column fillets barBorderRadius: 5 } } ] };
- Replace corresponding data
// Replace data in x-axis data: [ "Tourism industry","Education and training", "Game industry", "Medical industry", "E-commerce industry", "Social industry", "Financial industry" ], // series replacement data data: [200, 300, 300, 900, 1500, 1200, 600]
- Let the chart follow the screen adaptively
window.addEventListener("resize", function() { myChart.resize(); });
13 - bar chart 2 customization
- Find similar examples on the official website, analyze them appropriately, and introduce them into HTML pages
- Customize charts according to requirements
Requirement 1: modify the graph size grid
// Icon location grid: { top: "10%", left: "22%", bottom: "10%" },
Requirement 2: x-axis is not displayed
xAxis: { show: false },
Demand 3: y-axis related customization
- The y-axis and associated scale are not displayed
//Do not display y-axis lines axisLine: { show: false }, // Do not display scale axisTick: { show: false },
- The color of the y-axis text is set to white
axisLabel: { color: "#fff" },
Requirement 4: modify the relevant styles of the first group of columns (strip)
name: "strip", // Distance between columns barCategoryGap: 50, //Width of column barWidth: 10, // Set column to fillet itemStyle: { normal: { barBorderRadius: 20, } },
- Set the percentage display data in the first group of columns
// Text labels on graphics label: { normal: { show: true, // Display in graphics position: "inside", // Display format of text formatter: "{c}%" } },
- Set different colors for the first set of columns
// Declare color array var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]; // 2. Set a return value function for the color attribute in itemStyle itemStyle: { normal: { barBorderRadius: 20, // params sends in the column object console.log(params); // dataIndex is the index number of the current column return myColor[params.dataIndex]; } },
Requirement 5: modify the relevant configuration of the second group of columns (frame)
name: "frame", type: "bar", barCategoryGap: 50, barWidth: 15, itemStyle: { color: "none", borderColor: "#00c1de", borderWidth: 3, barBorderRadius: 15 }, data: [19325, 23438, 31000, 121594, 134141, 681807] }
Requirement 6: add a second set of data to the y-axis
yAxis: [ { type: "category", data: ["Indonesia", "U.S.A", "India", "China", "World population(ten thousand)"], // Lines that do not display the y axis axisLine: { show: false }, // Do not display scale axisTick: { show: false }, // Set the text color inside the scale label to white axisLabel: { color: "#fff" } }, { show: true, data: [702, 350, 610, 793, 664], // Lines that do not display the y axis axisLine: { show: false }, // Do not display scale axisTick: { show: false }, axisLabel: { textStyle: { fontSize: 12, color: "#fff" } } } ],
Requirement 7: set up two groups of column stacking and replacement data
// Add to the first object in the series yAxisIndex: 0, // Add to the second object of series yAxisIndex: 1, // data in the first object of series data: [70, 34, 60, 78, 69], // data in the second object of series data: [100, 100, 100, 100, 100], // y-axis replacement first object replacement data data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"], // y-axis replacement second object replacement data data:[702, 350, 610, 793, 664],
Full code:
// Histogram 2 (function() { var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]; // 1. Instantiate object var myChart = echarts.init(document.querySelector(".bar2 .chart")); // 2. Specify configuration and data var option = { grid: { top: "10%", left: "22%", bottom: "10%" // containLabel: true }, // Information about the x-axis is not displayed xAxis: { show: false }, yAxis: [ { type: "category", inverse: true, data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"], // Lines that do not display the y axis axisLine: { show: false }, // Do not display scale axisTick: { show: false }, // Set the text color inside the scale label to white axisLabel: { color: "#fff" } }, { data: [702, 350, 610, 793, 664], inverse: true, // Lines that do not display the y axis axisLine: { show: false }, // Do not display scale axisTick: { show: false }, // Set the text color inside the scale label to white axisLabel: { color: "#fff" } } ], series: [ { name: "strip", type: "bar", data: [70, 34, 60, 78, 69], yAxisIndex: 0, // Modify the fillet of the first set of columns itemStyle: { barBorderRadius: 20, // At this time, you can change the color of the column color: function(params) { // params sends in the column object console.log(params); // dataIndex is the index number of the current column return myColor[params.dataIndex]; } }, // Distance between columns barCategoryGap: 50, //Width of column barWidth: 10, // Displays the text within the column label: { show: true, position: "inside", // {c} It will be automatically parsed into the data in data formatter: "{c}%" } }, { name: "frame", type: "bar", barCategoryGap: 50, barWidth: 15, yAxisIndex: 1, data: [100, 100, 100, 100, 100], itemStyle: { color: "none", borderColor: "#00c1de", borderWidth: 3, barBorderRadius: 15 } } ] }; // 3. Configure to instance object myChart.setOption(option); })();
14 - line chart 1 personnel change module production
- Find similar examples on the official website, analyze them appropriately, and introduce them into HTML pages
- Customize charts according to requirements
Requirement 1: modify the size of the line chart, display the border, set the color: #012f4a, and display the scale label.
// Set grid style grid: { top: '20%', left: '3%', right: '4%', bottom: '3%', show: true,// Show border borderColor: '#012f4a ', / / border color containLabel: true // Including scale text },
Requirement 2: modify the text color #4c9bfd in the legend component, and the right from the right is 10%
// Legend components legend: { textStyle: { color: '#4c9bfd '/ / legend text color }, right: '10%' // 10% to the right },
Requirement 3: x-axis related configuration
- Scale removal
- x axis scale label font color: #4c9bfd
- Eliminate x axis color (use Y axis split line in the future)
- The two ends of the shaft do not need inner spacing boundaryGap
xAxis: { type: 'category', data: ["Monday", "Tuesday"], axisTick: { show: false // Remove tick marks }, axisLabel: { color: '#4c9bfd '/ / text color }, axisLine: { show: false // Remove axis }, boundaryGap: false // Remove the spacing in the shaft },
Requirement 4: customization of y-axis
- Scale removal
- Font color: #4c9bfd
- Split line color: #012f4a
yAxis: { type: 'value', axisTick: { show: false // Remove scale }, axisLabel: { color: '#4c9bfd '/ / text color }, splitLine: { lineStyle: { color: '#012f4a '/ / split line color } } },
Requirement 5: customization of two linear graphs
- Color: #00f2f1 #ed3f35
- Modify the polyline as smooth, and add smooth to the series data as true
color: ['#00f2f1', '#ed3f35'], series: [{ name:'New fans', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', // The polyline is modified to be smooth smooth: true, },{ name:'New tourists', data: [100, 331, 200, 123, 233, 543, 400], type: 'line', smooth: true, }]
Requirement 6: configuration data
// x-axis text xAxis: { type: 'category', data: ['1 month', '2 month', '3 month', '4 month', '5 month', '6 month', '7 month', '8 month', '9 month', '10 month', '11 month', '12 month'],
// Icon data series: [{ name:'New fans', data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120], type: 'line', smooth: true },{ name:'New tourists', data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79], type: 'line', smooth: true } }]
Demand 7: click 2020 for new demand, and the data in 2021 will change
The following is the data sent from the background (requested by ajax)
var yearData = [ { year: '2020', // particular year data: [ // Two arrays because there are two lines [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120], [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79] ] }, { year: '2021', // particular year data: [ // Two arrays because there are two lines [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38], [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34] ] } ];
- tab bar switching event
- Click the 2020 button to replace the data in the first object of the series with the data in the 2020 object [0]
- Click the 2020 button to replace the data in the second object of the series with the data in the 2020 object [1]
- The 2021 button works the same way
Full code:
// Broken line diagram 1 module fabrication (function() { var yearData = [ { year: "2020", // particular year data: [ // Two arrays because there are two lines [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120], [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79] ] }, { year: "2021", // particular year data: [ // Two arrays because there are two lines [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38], [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34] ] } ]; // 1. Instantiate object var myChart = echarts.init(document.querySelector(".line .chart")); // 2. Specify configuration var option = { // Use this color to change the color of the two lines color: ["#00f2f1", "#ed3f35"], tooltip: { trigger: "axis" }, legend: { // If the series object has a name value, legend does not need to write data // Modify legend component text color textStyle: { color: "#4c9bfd" }, // This 10% must be quoted right: "10%" }, grid: { top: "20%", left: "3%", right: "4%", bottom: "3%", show: true, // Show border borderColor: "#012f4a ", / / border color containLabel: true // Including scale text }, xAxis: { type: "category", boundaryGap: false, data: [ "1 month", "2 month", "3 month", "4 month", "5 month", "6 month", "7 month", "8 month", "9 month", "10 month", "11 month", "12 month" ], axisTick: { show: false // Remove tick marks }, axisLabel: { color: "#4c9bfd "/ / text color }, axisLine: { show: false // Remove axis } }, yAxis: { type: "value", axisTick: { show: false // Remove tick marks }, axisLabel: { color: "#4c9bfd "/ / text color }, axisLine: { show: false // Remove axis }, splitLine: { lineStyle: { color: "#012f4a "/ / split line color } } }, series: [ { name: "New fans", type: "line", // true can make our polyline display with radians smooth: true, data: yearData[0].data[0] }, { name: "New tourists", type: "line", smooth: true, data: yearData[0].data[1] } ] }; // 3. Configure to instance object myChart.setOption(option); // 4. Let the chart automatically adapt to the screen window.addEventListener("resize", function() { myChart.resize(); }); // 5. Click switch effect $(".line h2").on("click", "a", function() { // alert(1); // console.log($(this).index()); // After clicking a, find the related object of the corresponding yearData according to the index number of the current a // console.log(yearData[$(this).index()]); var obj = yearData[$(this).index()]; option.series[0].data = obj.data[0]; option.series[1].data = obj.data[1]; // Re rendering required myChart.setOption(option); }); })();
15 - line chart 2 production of playback volume module
- Find similar examples on the official website, analyze them appropriately, and introduce them into HTML pages
- Customize charts according to requirements
Requirement 1: replace the legend component. The text color is RGBA (255255255,. 5). The text size is 12
legend: { top: "0%", textStyle: { color: "rgba(255,255,255,.5)", fontSize: "12" } },
Requirement 2: modify chart size
grid: { left: "10", top: "30", right: "10", bottom: "10", containLabel: true },
Requirement 3: modify x-axis related configuration
- Change the text color to RGBA (255255255,. 6) and the text size to 12
- The color of the x-axis is RGBA (255255255,. 2)
// The text color is RGBA (255255255,. 6) and the text size is 12 axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize: 12 } }, // The color of the x-axis is RGBA (255255255,. 2) axisLine: { lineStyle: { color: "rgba(255,255,255,.2)" } },
Requirement 4: modify the relevant configuration of y-axis
axisTick: { show: false }, axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } }, axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize: 12 } }, // Change the color of the split line splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" } }
Requirement 5: modify the configuration of two line modules (pay attention to customization in series)
//The first line is smooth smooth: true, // Change the style of the line individually lineStyle: { color: "#0184d5", width: 2 }, // Filled area areaStyle: { // Gradient, just copy color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "rgba(1, 132, 213, 0.4)" // The starting color of the gradient }, { offset: 0.8, color: "rgba(1, 132, 213, 0.1)" // The end color of the gradient line } ], false ), shadowColor: "rgba(0, 0, 0, 0.1)" }, // Set inflection point and dot symbol: "circle", // Inflection point size symbolSize: 8, // Set inflection point color and border itemStyle: { color: "#0184d5", borderColor: "rgba(221, 220, 107, .1)", borderWidth: 12 }, // The inflection point is not displayed at the beginning, and the mouse passes through the display showSymbol: false,
name: "Forwarding volume", type: "line", smooth: true, lineStyle: { normal: { color: "#00d887", width: 2 } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "rgba(0, 216, 135, 0.4)" }, { offset: 0.8, color: "rgba(0, 216, 135, 0.1)" } ], false ), shadowColor: "rgba(0, 0, 0, 0.1)" } }, // Set inflection point and dot symbol: "circle", // Inflection point size symbolSize: 5, // Set inflection point color and border itemStyle: { color: "#00d887", borderColor: "rgba(221, 220, 107, .1)", borderWidth: 12 }, // The inflection point is not displayed at the beginning, and the mouse passes through the display showSymbol: false,
Requirement 6: replace data
// x-axis replacement data data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"], // data of the first object in series data: [ 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 20,60,50, 40], // data of the second object in series data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20],
16 pie chart 1 age distribution module production
- Find similar examples on the official website, analyze them appropriately, and introduce them into HTML pages
- Customize charts according to requirements
Custom chart requirements 1:
- The modified legend component is displayed at the bottom and centered.
- Change the width and height of each small icon to 10px
- The text size is 12 colors RGBA (255255255,. 5)
legend: { // 0% from bottom bottom: "0%", // Width and height of small icons itemWidth: 10, itemHeight: 10, data: ['Direct access', 'Mail marketing', 'Alliance advertising', 'Video advertising', 'Search Engines'], // Change the text of the legend component to 12px textStyle: { color: "rgba(255,255,255,.5)", fontSize: "12" } },
Customization requirements 2:
- Modify horizontal center vertical center
- Modify the radius of inner circle and outer circle to ["40%", "60%"] teacher pink friendly tips. For example, the broken line chart and histogram with rectangular coordinate system modify the size of the graph through grid, while our pie chart modifies the size through radius
series: [ { name: "age distribution", type: "pie", // Sets the position of the pie chart in the container center: ["50%", "50%"], // Changing the radius of the inner circle and the radius of the outer circle as a percentage is relative to the width of the container radius: ["40%", "60%"], // Do not display label text label: { show: false }, // Do not show connectors labelLine: { show: false }, } ]
Customization requirement 3: replace data
// data in legend can be omitted data: ["0 Under years old", "20-29 year", "30-39 year", "40-49 year", "50 Over years old"], // Data in series data: [ { value: 1, name: "0 Under years old" }, { value: 4, name: "20-29 year" }, { value: 2, name: "30-39 year" }, { value: 2, name: "40-49 year" }, { value: 1, name: "50 Over years old" } ] ,
Customization requirement 4: change color
color: [ "#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab", ],
// 4. Let the chart automatically adapt to the screen window.addEventListener("resize", function() { myChart.resize(); });
17 - pie chart 2 regional distribution module production (Nightingale Rose)
- Find similar examples on the official website, analyze them appropriately, and introduce them into HTML pages
- Customize charts according to requirements
Step 2: customize according to requirements
- Requirement 1: color setting
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
- Requirement 2: modify the pie chart size (series object)
radius: ['10%', '70%'],
- Requirement 3: change the display mode of pie chart to radius mode
roseType: "radius",
- Requirement 4: data usage and replacement (data object in series object)
{ value: 20, name: 'Yunnan' }, { value: 26, name: 'Beijing' }, { value: 24, name: 'Shandong' }, { value: 25, name: 'Hebei' }, { value: 20, name: 'Jiangsu' }, { value: 25, name: 'Zhejiang' }, { value: 30, name: 'Sichuan' }, { value: 42, name: 'Hubei' }
-
Requirement 5: the font is slightly smaller, 10 px (set in the series object)
The text label on the pie chart graph can control some styles of the text of the pie chart. Label object settings
series: [ { name: "Area model", type: "pie", radius: [30, 110], center: ["50%", "50%"], roseType: "radius", // The text label controls the relevant style of pie chart text. Note that it is an object label: { fontSize: 10 }, } ] };
- Requirement 6: prevent the guide line from being too long when zooming. The guide line is slightly shorter (the labeline object setting in the series object)
- Connection chart 6 px
- Connecting text 8 px
+ // Text adjustment + label:{ + fontSize: 10 + }, + // Guide line adjustment + labelLine: { + // Line length of connecting sector diagram + length: 6, + // Length of connecting text line + length2: 8 + } + } + ],
- Requirement 6: when the browser zooms, the chart automatically adapts.
// Monitor the browser zoom, and call the zoom resize function for the chart object window.addEventListener("resize", function() { myChart.resize(); });
18 echarts community introduction
community These are places where active users of echart can communicate and contribute customized charts.
- Here you can find some highly customized charts based on echart, which is equivalent to plug-ins developed based on jquery. Here are third-party charts developed based on echart.
19 echarts map usage (extension)
Examples of reference communities: https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (simulated aircraft route)
Implementation steps:
- First, you need to download China js provides the js file of China map
- Second, because there are many codes in it, we create a new js file mymap js introduction
- Just use the configuration provided by the community.
Modification required:
- Remove the title component
- Remove background color
- Modify the provincial background #142957 areaColor in the map
- Zoom in the map by setting zoom to 1.2
geo: { map: 'china', zoom: 1.2, label: { emphasis: { show: false } }, roam: false, itemStyle: { normal: { areaColor: '#142957', borderColor: '#0692a4' }, emphasis: { areaColor: '#0b1c2d' } } },
Conclusion: this example is an extended case. You can see more cases in the community in the future.
20 - Final constraint scaling
/* Constrain screen size */ @media screen and (max-width: 1024px) { html { font-size: 42px !important; } } @media screen and (min-width: 1920px) { html { font-size: 80px !important; } }