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组件 
  1. option配置
// option将要设置以下字段感觉就足够使用了
option: {
  legend: {},
  xAxis: {},
  yAxis: {},
  label: {},
  tooltip: {},
  series: []
}
  • legend字段,是为了配置下图的表现的;注意data字段的数组需要对应每条折线的名称
    鼠标hover到最顶部的legend标志,可以标志对应的折线图,点击legend标志会隐藏对应的折线图
 
   

你可能感兴趣的:(javascript,前端,ViewUI)