最近，做一个设备的项目，要展示一个设备某一些参数的数据变化，用到了折线图，就参考一个博客和官网网站学习了一下。

这个例子是折线图展示多个数据变化，效果如下:

实现:

1.安装需要使用的库 

npm install echarts --save

2.在需要使用的Vue文件中进行引用。

// 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组件

3.option配置

// option将要设置以下字段感觉就足够使用了
option: {
  legend: {},//展示的折线图标题
  xAxis: {},//x轴的配置显示
  yAxis: {},//y轴的配置显示
  label: {},
  tooltip: {},//点击折点 展示的样式
  series: []//y轴展示的数据
}

• legend字段为了显示每一条折线的名字，配置在legend下的data字段里。

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

• xAxis字段为了展示 x轴的数据样式包括，x轴名称，标题显示样式，刻度尺样式.

xAxis: {
    type: 'category',   // 还有其他的type，可以去官网喵两眼哦
    data:  ["2019-07-31 14:14:36", "2019-07-31 14:14:41", "2019-07-31 14:14:46", "2019-07-31 14:14:54", "2019-07-31 14:15:13", "2019-07-31 14:16:07"],   // x轴数据
    name: '时间',   // x轴名称
    // x轴名称样式
    nameTextStyle: {
        fontWeight: 400,//字体出席
        fontSize: 15,//字体大小
        color:'green'//字体颜色
    },
    axisTick:{
        show:true,//是否显示刻度
        alignWithLabel:true,//对齐文字
        interval:'0',
        length:5,//标度标尺的长度
        inside:false //刻度尺 标记 朝内 朝外
    },
    axisLabel: {  
        interval:0, //刻度显示间隔 0代表 全部显示 1代表这个 隔一个显示一个
        rotate:90 //对刻度进行角度旋转 竖着显示
    }  
},

• yAxis配置y轴的样式，参数和x轴一样

yAxis: {
        type: 'value',
        name: '纵轴名称',   // y轴名称
        // y轴名称样式
        nameTextStyle: {
            fontWeight: 400,
            fontSize: 15
        }
},

• tooltip 展示折点样式 一共是三种 axis 代表着同列的所有项的值 item 单个项的值 none 什么都不展示 三个值

tooltip: {
    trigger: 'item'   // 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'
  }
]

在html标签代码中，注意要先写好div的宽度和高度，否则这折线图展示不出来。

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

渲染折线图，到此简单折线图已经完成了。

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

学习播客:

https://www.jianshu.com/p/cc7d08142e8b

https://blog.csdn.net/weixin_42439024/article/details/84728118

https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-pld72cpp.html