This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!
The handsome guy goes to the library to paddle, when entering the door, was shocked by the large screen at the door of the library, this thing I will hahahaha, so give it down! As a result, the handsome guy was writing his blog when he noticed that the photo happened to have his name on it, and the handsome guy said: “Handsome!”
Handsome boy starts his operation…
Implementation effect
This is exactly the same, do not know that I wrote it 💛
Since there is no data behind the background, the data here is arbitrary
1. Overall layout
The layout of the whole page is the same as that of echarts, which is rem layout. The middle section is Flex layout, and each section occupies one share, so as to achieve the effect of even distribution
So that’s sort of the layout
2. Get weather information
Find a weather interface on the Internet and receive the data and render it. Handsome Boy uses the http://www.tianqiapi.com interface. The free interface can only be used 300 times a day, so please turn it off when you are not using it, or you will be undefind just like Handsome Boy
$.ajax({
type: "get".url: "https://tianqiapi.com/api".data: {
appid: 53877822.appsecret: "UjcKYyQ6".version: "v6",},success: function (response) {
console.log(response);
let city = document.querySelector(".city")
let wind = document.querySelector(".wind")
let tem = document.querySelector(".tem")
city.innerHTML = response.city + 'the city'
wind.innerHTML = response.win + "" + response.win_speed;
tem.innerHTML = response.tem2 + "℃ -" + response.tem1 + "℃"; }});Copy the codeThis will return the weather at the current IP address and handle the rendering. Because the handsome guy is lazy, he will use jq if he finds a package with jQuery in the folder
Using Ajax in jQuery alone is not recommended because jQuery is too bulky
3. The pie chart of male/female ratio
The interface of the library is actually very simple, it looks very high-end, the graphics are very basic graphics
For this pie chart, we use echarts. We just need to do some basic configuration, change the data in the series, adjust the position of the text display, set the triggering mode and the performance after triggering
// The pie chart shows the ratio of male and female visitors
(function () {
let myChart = echarts.init(document.querySelector('.pie .chart'))
let option = {
/ / title
title: {
subtext: 'Pure fiction'.left: 'left'
},
/ / prompt dialog box
tooltip: {
// Trigger mode
trigger: 'item'
},
series: [{
name: 'Gender ratio'.type: 'pie'.// The size of the cake
radius: '90%'./ / data
data: [{
value: 3750.name: 'male'
},
{
value: 1230.name: 'woman'},].// The color of the cake
color: [
"#74b9ff"."#0984e3"].// The position of the text display
label: {
position: 'inner'.fontSize: 14,},// The performance of the trigger
emphasis: {
itemStyle: {
shadowBlur: 10.shadowOffsetX: 0.shadowColor: 'rgba (0, 0, 0, 0.5)'}}}}; myChart.setOption(option)window.addEventListener('resize'.function () {
myChart.resize()
})
})();
Copy the code4. Bar chart of the number of visitors
There are several caveats to the bar chart
The first is to remove the border and the two axes. In xAxis and yAxis, configure the axes and the dividing line show: false to remove all the lines
axisLine: {
show: false
},
splitLine: {
show: false
}
Copy the codeAt the same time, you need to adjust the position of the icon, otherwise it will be small, a little ugly, by configuring the Grid attribute to achieve
grid: {
top: "10%".left: "3%".right: "4%".bottom: "3%".containLabel: true
}
Copy the codeTriggering mode of the prompt box
tooltip: {
trigger: "axis".axisPointer: {
// Coordinate axis indicator, coordinate axis trigger valid
type: "shadow" / / the default value is linear, optional: 'the line' | 'shadow'}}Copy the codeEcharts still need to try more to master, too many configuration items are not easy to remember, with familiar will be much better
(function () {
let myChart = echarts.init(document.querySelector('.bar .chart'));
let option = {
color: ["#2f89cf"].tooltip: {
trigger: "axis".axisPointer: {
// Coordinate axis indicator, coordinate axis trigger valid
type: "shadow" / / the default value is linear, optional: 'the line' | 'shadow'}},xAxis: {
type: 'category'.data: ['Mon'.'Tue'.'Wed'.'Thu'.'Fri'.'Sat'.'Sun'].axisLabel: {
textStyle: {
color: "#ecf0f1".fontSize: '12'}},axisLine: {
show: false
},
axisTick: {
alignWithLabel: true}},yAxis: {
type: 'value'.axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false}},grid: {
top: "10%".left: "3%".right: "4%".bottom: "3%".containLabel: true
},
series: [{
data: [2765.5576.5420.4064.4806.4505.1247].type: 'bar'.label: {
show: true.position: "top".textStyle: {
color: "#ecf0f1".fontSize: '12'}},barWidth: "50%"}}; myChart.setOption(option)window.addEventListener("resize".function () { myChart.resize(); }); }) ();Copy the code5. Discounted diagram of time distribution of entry
The discount graph is interesting, there’s a lot of options to configure, so first of all we’re going to deal with the scale of the axis, and the scale of the y axis we’re going to have to divide it up into two thousand cells at most six thousand cells
yAxis: [{
min: 0.max: 6000.interval: 2000 // Separate the distance
}]
Copy the codeThis completes the calibration of the y axis, and the next step is to configure
xAxis: {boundaryGap: false}
Copy the codeThis configuration item aligns the starting point with the y axis, that is, with the y axis. Next you need to configure the prompt box
tooltip: {
// Trigger by coordinate axis
trigger: "axis"
}
Copy the codeIn the bar chart we’re using shodow, the default is line and we don’t have to configure that here
/ / line chart
(function () {
let myChart = echarts.init(document.querySelector('.line .chart'))
let option = {
color: "#00f2f1".tooltip: {
// Trigger by coordinate axis
trigger: "axis"
},
grid: {
top: "20%".left: "3%".right: "4%".bottom: "3%".show: false.containLabel: true
},
xAxis: {
type: 'category'.boundaryGap: false.data: ['7'.'8'.'9'.'10点'.'11'.'12'.'13 points'.'14 points'.'15'.'16 points'.'17'.'18 points'.'19 points'.'20 points'.'21 points'.'22 points'].axisTick: {
show: false
},
axisLabel: {
color: "Rgba (255255255, 7)"
},
axisLine: {
show: false
},
splitLine: {
show: false}},yAxis: [{
type: "value".axisTick: {
show: false
},
axisLabel: {
color: "Rgba (255255255, 7)",},splitLine: {
show: false
},
axisLine: {
show: false
},
min: 0.max: 6000.interval: 2000}].series: [{
type: 'line'.data: [1000.4000.3600.3224.1318.3135.3007.3260.3120.2000.1800.4100.5231.1870.500.0]
}]
}
myChart.setOption(option)
window.addEventListener("resize".function () { myChart.resize(); }); }) ();Copy the codeconclusion
The realization of this page is very simple, probably because there is no background data, at least their own do not spend too much time, in general, the effect is very good, inspiration comes from life, to learn to find the application of technology from life!
Need source can be concerned about the blogger private messages oh ~