ECharts绘制折线图

最新推荐文章于 2025-07-09 15:42:19 发布

原创最新推荐文章于 2025-07-09 15:42:19 发布 · 3.3w 阅读

55 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #经验分享

前端同时被 2 个专栏收录

21 篇文章

订阅专栏

Echarts

3 篇文章

订阅专栏

本文分享了如何使用ECharts库在前端实现动态折线图的步骤。介绍了配置option，包括legend、xAxis、yAxis、tooltip和series等关键参数，以及如何通过HTML和JavaScript代码创建并渲染折线图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看实现好的页面

实现

首先引入echarts工具

// vue文件中引入echarts工具
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
// 以下的组件按需引入
require('echarts/lib/component/tooltip')   // tooltip组件
require('echarts/lib/component/title')   //  title组件
require('echarts/lib/component/legend')  // legend组件

option配置

// option将要设置以下字段感觉就足够使用了
option: {
  legend: {},
  xAxis: {},
  yAxis: {},
  label: {},
  tooltip: {},
  series: []
}

legend字段，是为了配置下图的表现的；注意data字段的数组需要对应每条折线的名称
鼠标hover到最顶部的legend标志，可以标志对应的折线图，点击legend标志会隐藏对应的折线图

legend: {
  data: ['招商银行', '浦发银行', '广发银行', '上海银行']
},

xAxis，配置x轴数据、样式、名称

xAxis: {
  type: 'category',   // 还有其他的type，可以去官网喵两眼哦
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],   // x轴数据
  name: '日期',   // x轴名称
  // x轴名称样式
  nameTextStyle: {
    fontWeight: 600,
    fontSize: 18
  }
},

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xmikmXJN-1616072696834)(//upload-images.jianshu.io/upload_images/5393165-db3daf4cc13c93ec.png?imageMogr2/auto-orient/strip|imageView2/2/w/933/format/webp)]

yAxis，配置y轴名称，样式

yAxis: {
  type: 'value',
  name: '纵轴名称',   // y轴名称
  // y轴名称样式
  nameTextStyle: {
    fontWeight: 600,
    fontSize: 18
  }
}

tooltip，鼠标放到折线图上展示的数据展示样式

tooltip: {
  trigger: 'axis'   // axis   item   none三个值
},

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CDDqB4gk-1616072696841)(//upload-images.jianshu.io/upload_images/5393165-535638802fe5aff5.png?imageMogr2/auto-orient/strip|imageView2/2/w/198/format/webp)]

series，y轴数据，每条折线的名称

series: [
  {
    name: '招商银行',
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  },
  {
    name: '浦发银行',
    data: [620, 711, 823, 934, 1445, 1456, 1178],
    type: 'line'
  },
  {
    name: '广发银行',
    data: [612, 920, 1140, 1160, 1190, 1234, 1321],
    type: 'line'
  },
  {
    name: '上海银行',
    data: [234, 320, 453, 567, 789, 999, 1200],
    type: 'line'
  }
]

html标签代码，注意要先写好div的宽度和高度，否则这折线图展示不出来

// 折线图显示在这个div中，
<div id="myChart"></div>

渲染折线图

let myChart = echarts.init(document.getElementById('myChart'))
myChart.setOption(this.option)

完成折线图