最近,做一个设备的项目,要展示一个设备某一些参数的数据变化,用到了折线图,就参考一个博客和官网网站学习了一下。
这个例子是折线图展示多个数据变化,效果如下:
实现:
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