极致呈现系列之：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, 1290, 1330, 1320],
      lineStyle: {
        color: '#ff7f50', // 折线颜色
        width: 2, // 折线宽度
        type: 'dashed' // 折线样式
      }
}]

修改完成后，刷新浏览器，看效果

修改坐标轴的样式

通过 axisLabel 和 axisLine 属性来设置坐标轴的标签和线条的样式。

 xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLabel: {
        color: '#080b30', // 坐标轴标签颜色
        fontSize: 12, // 坐标轴标签字号
      },
      axisLine: {
        lineStyle: {
          color: '#333' // 坐标轴线颜色
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#080b30',
        fontSize: 12
      },
      axisLine: {
        lineStyle: {
          color: '#333'
        }
      }
},

修改后效果

修改折线图上点的样式

通过修改series中的 symbol 属性和 symbolSize 属性的值，来改变点的形状和大小。通过 itemStyle 属性来修改点的颜色和边框样式等。

symbol 属性用于指定点的图形类型，例如圆形、方形、三角形等，而 symbolSize 属性用于指定点的大小

series: [{
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      lineStyle: {
        color: '#ff7f50', // 折线颜色
        width: 2, // 折线宽度
        type: 'dashed' // 折线样式
      },
      symbol: 'circle', // 指定点的图形类型为圆形
      symbolSize: 10, // 指定点的大小为10
      itemStyle: {
        color: 'red', // 指定点的颜色为红色 
      }
}]

将折线设置为平滑曲线

通过修改series中 smooth 属性的值，来控制曲线的平滑程度。

设置渐变色面积

通过配置 areaStyle 来设置折线图下面的面积。在 series 中设置 areaStyle，并指定其 opacity、color、shadowBlur 等属性来控制面积的显示效果。

series: [{
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      lineStyle: {
        color: '#ff7f50', // 折线颜色
        width: 2, // 折线宽度
        type: 'dashed' // 折线样式
      },
      symbol: 'circle', // 指定点的图形类型为圆形
      symbolSize: 10, // 指定点的大小为10
      itemStyle: {
        color: 'red', // 指定点的颜色为红色 
      },
      smooth: true, // 将折线改为平滑曲线
      areaStyle: {
        opacity: 0.5,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(255, 158, 68, 0.8)'
        }, {
          offset: 1,
          color: 'rgba(255, 70, 131, 0.8)'
        }]),
        shadowBlur: 20,
        shadowColor: 'rgba(0, 0, 0, 0.3)'
      } 
}]

给折线图添加标记线

在 series 中设置 markLine，并指定其 data、symbol、symbolSize、label 等属性来控制标记线的显示效果。
symbol提供的标记类型包括：circle, rect, roundRect, triangle, diamond, pin, arrow, none

series: [{
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      lineStyle: {
        color: '#ff7f50', // 折线颜色
        width: 2, // 折线宽度
        type: 'dashed' // 折线样式
      },
      symbol: 'circle', // 指定点的图形类型为圆形
      symbolSize: 10, // 指定点的大小为10
      itemStyle: {
        color: 'red', // 指定点的颜色为红色 
      },
      smooth: true, // 将折线改为平滑曲线
      areaStyle: {
        opacity: 0.5,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(255, 158, 68, 0.8)'
        }, {
          offset: 1,
          color: 'rgba(255, 70, 131, 0.8)'
        }]),
        shadowBlur: 20,
        shadowColor: 'rgba(0, 0, 0, 0.3)'
      },
      markLine: {
        data: [
          {
            type: 'average',
            name: '平均值',
            label:{
              show: true,
              position: 'middle',
              formatter: '{b}: {c}'
            }
          }
        ],
        symbol:'pin',
        symbolSize: 10,
      }, 
    }]
}

给折线图添加标记点

在 series 中设置 markPoint，并指定其 data、symbol、symbolSize、label 等属性来控制标记点的显示效果。

    series: [{
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      lineStyle: {
        color: '#ff7f50', // 折线颜色
        width: 2, // 折线宽度
        type: 'dashed' // 折线样式
      },
      symbol: 'circle', // 指定点的图形类型为圆形
      symbolSize: 10, // 指定点的大小为10
      itemStyle: {
        color: 'red', // 指定点的颜色为红色 
      },
      smooth: true, // 将折线改为平滑曲线
      areaStyle: {
        opacity: 0.5,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(255, 158, 68, 0.8)'
        }, {
          offset: 1,
          color: 'rgba(255, 70, 131, 0.8)'
        }]),
        shadowBlur: 20,
        shadowColor: 'rgba(0, 0, 0, 0.3)'
      },
      markLine: {
        data: [
          {
            type: 'average',
            name: '平均值',
            label:{
              show: true,
              position: 'middle',
              formatter: '{b}: {c}'
            }
          }
        ],
        symbol:'pin',
        symbolSize: 10,
      },
      markPoint: {
        data: [{
          type: 'max',
          name: '最大值'
        }, {
          type: 'min',
          name: '最小值'
        }],
        symbol: 'circle',
        symbolSize: 20,
        label: {
          show: true,
          position: 'top',
          formatter: '{b}: {c}'
        }
      }
    }]
  }

在上述代码中，markPoint 中的 data 属性设置标记点的数据，symbol 属性设置标记点的形状，symbolSize 属性设置标记点的大小，label 属性设置标记点的文本标签。可以通过 formatter 属性来自定义标记点文本的显示内容，其中 {b} 表示数据项名称，{c} 表示数据项值。

折线图的交互

添加鼠标悬停提示

通过tooltip属性为折线图添加鼠标悬停提示，让用户可以更加方便地查看数据。

tooltip: {
  trigger: 'axis' // 触发方式为鼠标悬停
}

我们还可以修改tooltip配置项下面axisPointer对象的lineStyle来设置提示线的样式

tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(0, 255, 233,0)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(255, 0, 255,1)',
                    }, {
                        offset: 1,
                        color: 'rgba(0, 255, 233,0)'
                    }],
                    global: false
                }
            },
        },
    },

添加数据区域选择与缩放

数据区域选择：
通过添加dataZoom配置项，并将其中的type设置为slider来给折线图添加滚动条

dataZoom: {
      type: 'slider', // 选择器类型为滑动条
      start: 0, // 默认选择范围的起始位置
      end: 100 // 默认选择范围的结束位置
}

上面代码通过 dataZoom 属性来设置数据区域选择的类型为滑动条，以及默认选择范围的起始位置和结束位置。

数据缩放：
数据缩放和数据区域选择都是添加dataZoom配置项，只是里面的type类型不同，如果设置为数据缩放，则将type内容设置为inside,这样图表下面将不会出现滚动条，当鼠标悬浮在图表上时，滚动滚轮，可以放大缩小图表

dataZoom: {
  type: 'inside', // 缩放类型为内置
  start: 0, // 默认选择范围的起始位置
  end: 100 // 默认选择范围的结束位置
}

好了，关于折线图的相关介绍就先到这里，有兴趣的小伙伴可以更深入的研究下，里面还有很多有趣的功能等待你来开发。