首先看實(shí)現(xiàn)好的頁(yè)面

折線圖

實(shí)現(xiàn)

1. 首先引入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組件

2. option配置

// option將要設(shè)置以下字段感覺(jué)就足夠使用了
option: {
  legend: {},
  xAxis: {},
  yAxis: {},
  label: {},
  tooltip: {},
  series: []
}

• legend字段，是為了配置下圖的表現(xiàn)的；注意data字段的數(shù)組需要對(duì)應(yīng)每條折線的名稱
  鼠標(biāo)hover到最頂部的legend標(biāo)志，可以標(biāo)志對(duì)應(yīng)的折線圖，點(diǎn)擊legend標(biāo)志會(huì)隱藏對(duì)應(yīng)的折線圖

legend: {
  data: ['招商銀行', '浦發(fā)銀行', '廣發(fā)銀行', '上海銀行']
},

legend

• xAxis，配置x軸數(shù)據(jù)、樣式、名稱

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

xAxis

• yAxis，配置y軸名稱，樣式

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

yAxis

• tooltip，鼠標(biāo)放到折線圖上展示的數(shù)據(jù)展示樣式

tooltip: {
  trigger: 'axis'   // axis   item   none三個(gè)值
},

trigger: 'axis'

trigger: 'item'

• series，y軸數(shù)據(jù)，每條折線的名稱

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

3. html標(biāo)簽代碼，注意要先寫好div的寬度和高度，否則這折線圖展示不出來(lái)

// 折線圖顯示在這個(gè)div中，
<div id="myChart"></div>

4. 渲染折線圖

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

5. 完成折線圖

寫在最后

工作中遇到的需求，隨便寫寫，希望幫助到你！