echarts实现温度曲线折线图_echarts气温曲线

如图所示：

首先我想到了使用echarts，用属性控制x轴y轴的隐藏，然后修改拐点以及折线上的文字
代码：
图表组件

<template>
  <div
    id="tem-chart"
    style=" height: 120px" />
</template>
<script>
const echarts = require('echarts');
export default {
  name: 'TemChart',
  props: {
    temList: {
      type: Array,
      default: () => []
    },
    temXAxis: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      temChart: null
    };
  },
  mounted() {
    this.showChart();
  },
  watch: {
    temList: {
      handler(newVal) {
        this.showChart();
      }
    }
  },
  methods: {
    showChart() {
      if (this.temChart) this.temChart.dispose();   
      this.temChart = echarts.init(document.getElementById('tem-chart'));
      let option = {
        tooltip: {
          show: false
        },
        grid: {
          x: -20, // 距离左边
          x2: -20, // 距离右边
          y: 20, // 距离上边
          y2: 0 // 距离下边
        },
        xAxis: {
          show: false, // 不展示x轴
          data: this.temXAxis
        },
        yAxis: {
          show: false // 不展示y轴
        },
        series: [
          {
            name: '温度',
            type: 'line',
            smooth: true,
            symbolSize: 8, // 拐点圆的大小
            animation: false, // hover圆点不缩放
            // label 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
            label: {
              normal: {
                show: true, // 折线上的文字是否显示
                formatter: '{c}' + '℃', // 格式化显示文字
                position: 'top',
                textStyle: {
                  color: '#001832',
                  fontSize: '13'
                }
              }
            },
            data: this.temList,
            itemStyle: {
              normal: {
                color: '#1E4CFE',
                borderWidth: 2 // 拐点边框大小
              }
            }
          }
        ]
      };
      this.temChart.setOption(option);
      const self = this;
      setTimeout(function() {
        self.temChart.resize();
      });
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

使用：

<tem-chart
  :tem-list="temList"
  :tem-x-axis="temXAxis"
  class="weather-tem" />

import temChart from './temChart.vue';
export default {
  name: 'Message',
  components: { temChart },

  data() {
    return {
      temList: [26, 24, 23, 15, 26, 29, 30, 31],
      temXAxis: [20, 23, 02, 05, 08, 11, 14, 17]
    };
  }
};


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19