【Echarts系列】平滑折线面积图_vue3平滑面积图

序

为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。

示例

平滑折线面积图如图所示：

数据格式

data = [
    {
      'name': '2020年',
      'value': 150
    },
    {
      'name': '2021年',
      'value': 168
    },
    {
      'name': '2022年',
      'value': 159
    },
    {
      'name': '2023年',
      'value': 127
    },
    {
      'name': '2024年',
      'value': 99
    }
  ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

代码

Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。

<template>
  <div class="chart" ref="areaLineRef"></div>
</template>

<script lang="ts">
import { Component, Prop, Ref, Vue, Watch } from 'vue-property-decorator'
import echarts from 'echarts'

@Component({
  name: 'AreaLine',
  components: {}
})
export default class AreaLine extends Vue {
  @Prop() data!: any
  @Ref() areaLineRef!: any
  private chart: any = {}

  @Watch('data')
  onDataChange() {
    this.createChart()
  }

  createChart() {
    this.chart = echarts.init(this.areaLineRef)

    const data = this.data
    let names = []
    let values = []
    data.forEach(item => {
      names.push(item.name)
      values.push(item.value)
    })

    const option = {
      grid: {
        left: -35,
        right: 0,
        top: 0,
        bottom: 0,
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        label: {
          show: true
        }
      },
      xAxis: {
        axisLine: {
          show: true     //是否显示X轴轴线
        },
        splitLine: {
          show: false	 //是否显示X轴方向上的分隔线
        },
        axisLabel: {     //设置X轴的坐标标签样式
          textStyle: {
            color: '#757790'
          }
        },
        axisTick: {
          show: true,
          alignWithLabel: true, //坐标刻度与标签对齐
          lineStyle: {          //设置X轴刻度样式
            width: 5,
            color: '#757790'
          }
        },
        data: names
      },
      yAxis: {
        axisLabel: {          //不展示坐标标签为0的
          formatter: function(value) {
            if (Number(value) === 0) {
              return ''
            } else {
              return value
            }
          },
          textStyle: {
            padding: [0, 0, -25, 8],   //通过padding设置来实现坐标轴标签在轴线内
            color: '#757790',
            align: 'left'
          }
        },
        axisLine: {
          show: false				   //不展示Y轴轴线
        },
        splitLine: {
          show: true,
          lineStyle: {                 //以虚线形式来展示Y轴刻度方向上的分隔线
            type: 'dashed',
            color: '#E5E5E5'
          }
        },
        axisTick: {
          show: false                  //不显示Y轴刻度
        }
      },
      series: [{
        showSymbol: false,
        smooth: true,			 //开启平滑处理
        type: 'line',
        lineStyle: {
          color: '#4885C9',
          width: 4
        },
        itemStyle: {			 //设置折线样式
          color: '#4885C9',
          borderWidth: 1,
          borderColor: '#000'
        },
        areaStyle: {			 //设置面积的线性渐变颜色
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(72, 133, 201, 0.4)'
            }, {
              offset: 1,
              color: 'rgba(72, 133, 201, 0)'
            }], false)
          }
        },
        data: values
      }]
    }
    this.chart.setOption(option)
  }

  mounted() {
    this.createChart()
    window.addEventListener('resize', this.chartResize)
  }

  beforeDestroy() {
    if (this.chart) {
      window.removeEventListener('resize', this.chartResize)
      this.chart.dispose()
    }
  }

  chartResize() {
    if (this.chart) {
      this.chart.resize()
    }
  }
}
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 300px;
}
</style>


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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155