机缘
在我们的开发旅途中,我们常常会碰壁,遇到一些自己无法解决的问题,或者没有开发思路,于是会到网上去搜一些解决方案,就是在这样的情境下,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>
憧憬
未来的道路相信也会有许多精彩,也会又属于自己的东西,能为社区做出自己微弱的贡献,也会有更多朋友与我并肩同行,谢谢!
最好的代码在路上,努力使自己成为自己羡慕的人