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标志会隐藏对应的折线图