chance
During our development journey, we often hit a wall, encounter some problems that we cannot solve, or have no development ideas, so we will search for some solutions on the Internet. It is in this situation that CSDN has given me a lot of help. Let me solve a lot of problems.
But after all, it can only be used as a reference, or the problem is similar, but the solution is different, so in order to solve the same problem more conveniently in the future, and at the same time help other friends who have the same problem as me, then I Just write it down and write it as your own article, which will help more people and make you stronger and grow stronger.
reward
Although I don’t have extraordinary technology and have many fans like those big guys, people always grow. No matter what, I am grateful to the current fans, and I believe that there will be 36more friends who support and pay attention to me in the future.
After three years of work, I have created 521 article, which has received 100 53,420views, 10 likes, 1 comment, 1 collection, and 1 share.4719143577
thank you! I also hope that my article can be helpful to you!
daily
Creation is a daily state. When you encounter problems, you can go to the community to ask questions. When you solve a problem, you can write it down in an article. This is also a kind of learning and growth, and you can also try to create some by yourself. Something that belongs to you.
Achievement
Let’s take a simple wallpaper project as an example. I wanted to achieve a weather change effect of a line chart. I was thoughtless at the beginning, and there were almost no similar cases on the Internet. Then I saw the weather effect of Baidu, so I opened the developer tools of the browser, and referred to the layout. In fact, it is very simple, that is, separate the data from the line chart, and then place the line chart in the corresponding position through positioning, as follows:
This is a weather wallpaper project I made myself, the link is direct . weather-listIt is used to display weather situation data and temperature_linesto draw a temperature line chart. Through style positioning, the combination of the two is achieved.
<template>
<div class="m-weather">
<div class="weather-list">
<div class="weather-item" v-for="item in list">
<div class="date">{
{ item.date.substring(5) }}</div>
<div class="icon">
<img class="weather_icon" :src="require(`/src/assets/weather_icon/${item.weather_icon_id}.png`)"/>
</div>
<div class="blank"></div>
<div class="wind">
<div class="direction">{
{ item.wind_direction }}</div>
<div class="level">{
{ item.wind_level + "级" }}</div>
</div>
</div>
</div>
<div class="temperature_lines" ref="temperatureLines"></div>
</div>
</template>
<script>
import echarts from '@/utils/echarts.min'
export default {
name: "MWeather",
props: {
list: Array
},
data() {
return {
charts: null
}
},
methods: {
init() {
const temperatureLines = this.$refs.temperatureLines;
console.log(temperatureLines)
let charts = null;
if (!this.charts) {
charts = this.charts = echarts.init(temperatureLines);
} else {
charts = this.charts;
}
charts.setOption(this.getChartOption());
},
getChartOption() {
const highTemperatures = this.list.map(item => {
return item.high_temperature;
});
const lowTemperatures = this.list.map(item => {
return item.low_temperature;
});
return {
xAxis: {
show: false,
type: 'category'
},
yAxis: {
show: false,
type: 'value',
max: Math.max.apply(null, highTemperatures),
min: Math.min.apply(null, lowTemperatures)
},
grid: {
left: '0%',
right: '0%',
top: '26%',
bottom: '6%'
},
series: [
{
data: highTemperatures,
type: 'line',
label: {
show: true,
position: 'top',
formatter: "{c}°"
}
},
{
data: lowTemperatures,
type: 'line',
label: {
show: true,
position: 'top',
formatter: "{c}°"
}
}
]
}
}
},
mounted() {
this.init();
setInterval(this.init, 1000 * 60 * 60);
}
}
</script>
<style lang="scss" scoped>
$weather-width: 74px * 16;
.m-weather {
position: relative;
width: $weather-width;
color: white;
}
.weather-list {
display: flex;
width: 100%;
}
.weather-item {
width: calc(100% / 16);
display: flex;
flex-direction: column;
& > * {
margin-top: 4px;
}
.weather_icon {
width: 30px;
vertical-align: middle;
}
.blank {
height: 110px;
}
}
.temperature_lines {
position: absolute;
top: 60px;
left: 0;
width: $weather-width;
height: 100px;
}
</style>
look forward to
I believe that there will be many wonderful things in the future road, and there will be things that belong to me, and I can make my own small contributions to the community, and there will be more friends walking side by side with me, thank you!
The best code is on the way, work hard to make yourself someone you envy