Echarts line折線圖使用(vue)

實現

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將要設置如下字段感受就足夠使用了 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' } ] 

3. html標籤代碼，注意要先寫好div的寬度和高度，不然這折線圖展現不出來

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

4. 渲染折線圖

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

5. 完成折線圖

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