ECharts绘制折线图

首先看实现好的页面

实现

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标志，可以标志对应的折线图，