實現

首先引入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: ['招商銀行', '浦發銀行', '廣發銀行', '上海銀行']
},

legend

xAxis，配置x軸數據、樣式、名稱

xAxis: {
  type: 'category',   // 還有其他的type，可以去官網喵兩眼哦
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],   // x軸數據
  name: '日期',   // x軸名稱
  // x軸名稱樣式
  nameTextStyle: {
    fontWeight: 600,
    fontSize: 18
  }
},

xAxis

yAxis，配置y軸名稱，樣式

yAxis: {
  type: 'value',
  name: '縱軸名稱',   // y軸名稱
  // y軸名稱樣式
  nameTextStyle: {
    fontWeight: 600,
    fontSize: 18
  }
}

yAxis

tooltip，鼠標放到折線圖上展示的數據展示樣式

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

trigger: 'axis'

trigger: 'item'

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)

完成折線圖

作者：一個寫前端的姑娘
鏈接：https://www.jianshu.com/p/cc7d08142e8b

總結

以上是生活随笔為你收集整理的Echarts line折线图使用(vue)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。