机缘
在我们的开发旅途中，我们常常会碰壁，遇到一些自己无法解决的问题，或者没有开发思路，于是会到网上去搜一些解决方案，就是在这样的情境下，CSDN给了我很多帮助，让我解决了很多问题。
但终究只能作为参考，或者问题相仿，但解决方案不同，所以为了以后自己再次遇到相同的问题能够更方便的去解决，同时也能够帮助到其他遇到跟我一样问题的朋友，那么我就干脆记下来，写成属于自己的文章，帮助到更多人，也能使自己更加壮大和成长。
收获
虽然没有向那些大佬一样，拥有着非常人的技术，有着很多粉丝，但人总是成长的，无论怎样，感谢目前的36位粉丝，也相信未来会有更多支持和关注我的朋友。
历经三年作途，已经创作了52篇文章，也有着53,420的访问量，获得了47次点赞，收到了19评论，143次收藏，577次分享。
感谢你们！也希望我的文章对你们能够有所帮助！
日常
创作是一种日常状态，当你遇到问题，你可以去社区提问，当你解决一个问题，你可以用文章记下来，这同样也是一种学习和成长，同样也可以自己动手尝试去创作一些属于自己的东西。
成就
拿一个简单的壁纸项目做比方吧。我想实现一种折线图的天气变化效果，一开始是没有头脑的，网上几乎也没有类似的案例，于是看到了百度的天气效果，于是打开了浏览器的开发者工具，参考了一下布局，其实也很简单，就是数据与折线图分开，然后通过定位去把折线图放到相应位置即可，如下：
这是一个我自己做的天气壁纸项目，链接直达。weather-list用于展现天气的情况数据，temperature_lines用于绘制气温折线图，通过样式定位，实现二者的结合。
<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>
憧憬
未来的道路相信也会有许多精彩，也会又属于自己的东西，能为社区做出自己微弱的贡献，也会有更多朋友与我并肩同行，谢谢！
最好的代码在路上，努力使自己成为自己羡慕的人