关于前端: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 标记，能够标记对应的折线图，点击 legend 标记会暗藏对应的折线图

legend: {data: ['招商银行', '浦发银行', '广发银行', '上海银行']
},

• xAxis，配置 x 轴数据、款式、名称

xAxis: {
  type: 'category',   // 还有其余的 type，能够去官网喵两眼哦
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],   // x 轴数据
  name: '日期',   // x 轴名称
  // x 轴名称款式
  nameTextStyle: {
    fontWeight: 600,
    fontSize: 18
  }
},

• yAxis，配置 y 轴名称，款式

yAxis: {
  type: 'value',
  name: '纵轴名称',   // y 轴名称
  // y 轴名称款式
  nameTextStyle: {
    fontWeight: 600,
    fontSize: 18
  }
}

• tooltip，鼠标放到折线图上展现的数据展现款式

tooltip: {trigger: 'axis'   // axis   item   none 三个值},

• 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'
  }
]

1. html 标签代码，留神要先写好 div 的宽度和高度，否则这折线图展现不进去

// 折线图显示在这个 div 中，<div id="myChart"></div>

4. 渲染折线图

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

5. 实现折线图