我的创作纪念日（三年作途）

机缘

在我们的开发旅途中，我们常常会碰壁，遇到一些自己无法解决的问题，或者没有开发思路，于是会到网上去搜一些解决方案，就是在这样的情境下，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>

---

憧憬

未来的道路相信也会有许多精彩，也会又属于自己的东西，能为社区做出自己微弱的贡献，也会有更多朋友与我并肩同行，谢谢！

最好的代码在路上，努力使自己成为自己羡慕的人