Echarts基础学习 4-折线图实战（工作任务）

任务要求

• 实现原型图
• 显示最近一月时间的数据
• y轴数据使用随机数即可

分析（思路）

根据原型图可以分析一下内容

• 折线图，光滑，没有折线拐点
• x轴有分割线，splitLine
• 刻度线和x轴类目没有对齐说明 boundaryGap: true（这个可以自己尝试，反正就两个值）
• 鼠标悬浮有提示信息，tooltip。提示信息是“当前年份+x轴类目”的拼接
• 有滚动条，dataZoom
• 折线拐点悬浮样式

如果你不能分析出使用了哪些配置项，可以直接在官网示例——折线图 或者 其他Echarts Demo网站，查看各个案例，分析其代码的配置项。
Echarts Demo网站见 Echarts基础学习 1-X轴和Y轴

实践

1.建立初始模型

在官网示例中找到 基础平滑折线图 将示例代码copy到你的项目中，可以选择完整代码或者部分代码。

<template>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px; height: 400px"></div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'

var option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
}
onMounted(() => {
  var chartDom = document.getElementById('main')
  var myChart = echarts.init(chartDom)
  option && myChart.setOption(option)
})
</script>

在官网示例和其他Echarts Demo网站有很多成品案例，建议直接引用后加以修改。

2.根据思路内容进行改进

首先完成简单的，添加“x轴分割线”、取消“折线拐点”

var option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    // x轴分割线
    splitLine: {
      show: true,
      lineStyle: {
        color: '#ccc'
      }
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
      // 取消折线拐点
      showSymbol: false
    }
  ]
}

添加tooltip后发现提示信息和原型图样式不一样，这里使用formatter

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      lineStyle: {
        color: 'blue'
      }
    },
    formatter: function(params) {
      // console.log(params, 'params')
      return '2024/' + params[0].name + '<br />' + '任务数量&nbsp&nbsp' + params[0].value
    }
  },

formatter用于实现自定义提示框内容，支持字符串模板和回调函数两种形式。你可以使用在控制台打印params信息，或者查看官网文档 tooltip-formatter

// 返回值可以使用html模板
return '<div>使用html标签</div>'

添加dataZoom

  dataZoom: [
    {
      type: 'slider',
      show: true,
      xAxisIndex: [0],
      start: 40,
      end: 80
    }
  ],	

更改折线拐点样式

echarts难点在于你要知道你要修改的名称是什么。可以在Echarts Demo网站找到相关案例，然后查看其代码分析要修改的属性，然后查看其对应的官网文档

series-line.itemStyle

但是这个配置项下面居然没有悬浮的（emphasis）。。。所以直接gpt和bing吧

  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
      showSymbol: false,
      itemStyle: {
      	// 修改折线拐点悬浮提示
        emphasis: {
          color: '#ccc',
          borderColor: 'red'
        }
      }
    }
  ]

3.添加数据

将接口返回数据处理后渲染。这里使用随机数代替

<template>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px; height: 400px"></div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

import * as echarts from 'echarts'
const XData = ref([])
const YData = ref([])

// 生成最近一月的日期 DD/MM
const getRecentMonthDates = () => {
  const today = new Date()

  for (let i = 0; i < 30; i++) {
    const date = new Date(today)
    date.setDate(today.getDate() - i)
    const day = String(date.getDate()).padStart(2, '0')
    const month = String(date.getMonth() + 1).padStart(2, '0')
    XData.value.push(`${day}/${month}`)
  }
}
getRecentMonthDates()
// 生成Y轴数据 20-100 的随机数
const generateYData = () => {
  for (let i = 0; i < 30; i++) {
    YData.value.push(Math.floor(Math.random() * 80 + 20))
  }
}
generateYData()
// 转换日期格式 tooltip 中使用
const changeDateFormat = date => {
  const [day, month] = date.split('/')
  const year = new Date().getFullYear() // 使用当前年份
  return `${year}-${month}-${day}`
}
var option = {
  xAxis: {
    type: 'category',
    // 替换
    data: XData.value,
    splitLine: {
      show: true,
      lineStyle: {
        color: '#ccc'
      }
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        color: '#ccc'
      }
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      lineStyle: {
        color: 'blue'
      }
    },
    formatter: function(params) {
      return changeDateFormat(params[0].name) + '<br />' + '任务数量&nbsp&nbsp' + params[0].value
    }
  },
  dataZoom: [
    {
      type: 'slider',
      show: true,
      xAxisIndex: [0],
      start: 40,
      end: 80
    }
  ],
  series: [
    {
      // 替换
      data: YData.value,
      type: 'line',
      smooth: true,
      showSymbol: false,
      itemStyle: {
        emphasis: {
          // 设置鼠标悬浮时的样式
          color: 'white', // 设置鼠标悬浮时数据点的颜色
          borderColor: 'red', // 设置鼠标悬浮时数据点边框的颜色
          borderWidth: 2 // 设置鼠标悬浮时数据点边框的宽度
        }
      }
    }
  ]
}
onMounted(() => {
  var chartDom = document.getElementById('main')
  var myChart = echarts.init(chartDom)
  option && myChart.setOption(option)
})
</script>