极致呈现系列之：Echarts折线图的视觉冲击力

认识折线图

折线图是一种常用的数据可视化图表，通常用于展示随时间或者其他连续变量而变化的数据趋势。折线图由若干条连接数据点的折线组成，每条折线代表一个数据系列。折线图的横轴通常表示时间或者其他连续变量，纵轴表示数据的值，通过折线的变化来展示数据的趋势和变化情况。

折线图可以用于展示各种类型的数据，例如股票价格、气温变化、销售额变化等。折线图具有简单直观、易于理解、能够有效展示数据趋势等优点，被广泛应用于数据分析、商业决策、科学研究等领域。

折线图的创建

老规矩，要使用折线图，我们需要先引入Echarts

<template>
  <div ref="chart" style="width: 50%;height: 400px;"></div>
</template>
<script setup>
import * as echarts from 'echarts' 
import {
    ref, onMounted } from 'vue'
const chart = ref(null)
onMounted(() => {
    
  const myChart = echarts.init(chart.value) 
  const option = {
   
  //配置项
  }
  myChart.setOption(option)
})

在上面这段代码中，我们首先通过 import 语句引入了 Echarts 库，然后在 mounted 钩子函数中创建了一个 Echarts 实例，并将其挂载到了指定的 DOM 元素上。同时定义了一个option对象，用于存储Echarts相关的配置项；后面，我们就可以通过 setOption 方法来配置 Echarts 实例，包括设置图表类型、数据、样式等。

配置一个最简单的折线图：在上面创建的option对象中配置如下代码

const option = {
   
    xAxis: {
   
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
   
      type: 'value'
    },
    series: [{
   
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }]
}

在上面的代码中，我们创建了一个包含七个数据点的折线图，其中 x 轴表示星期几，y 轴表示数据的值。在option对象汇总，我们设置了 x 轴的类型为 category，即分类类型，数据为星期几的文本数组；y 轴的类型为 value，即数值类型；折线图的数据则通过 series 属性进行设置。

然后通过 setOption 方法将option对象作为参数传递给myChart实例，这样，一个简单的折线图就完成了，刷新浏览器看效果

折线图的美化

修改折线的样式

我们通过修改series系列中的 lineStyle 属性来设置折线的样式，包括颜色、宽度、样式等。代码如下：

series: [{
   
      type: 'line',
      data: [820, 932, 901, 934,