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;
}
}