在vue中使用echarts(折线图的demo,markline用法)

公司最近在用vue开发项目，项目接近尾声了，趁休息时间写点demo——

vue引入echarts（折线图的demo）

主要是解决引入echarts，markline的使用（基准线）

这是demo的效果图：

vue脚手架不多赘述

1.安装依赖

cnpm install echarts -S

2.在main.js中引入echarts

import echarts from 'echarts'

3.在main.js中安装

Vue.prototype.echarts = echarts;

一般来说能正常挂载上组件，就可以在页面中正常使用了

废话不多说上代码（因为自己也是小白阶段所以写的注释多了点，以便以后使用）

1.HTML部分

2.js部分

3.css部分

.content{
 width: 100%;
}
.content p{
 margin-top: 1rem;
 font-size: 0.4rem;
 color: #666666;
}
.seven_echarts{
 height: 11rem;
 width: 94%;
}

好了结束，本人目前还是前端的小白，如有错误欢迎指正，以后会不定期更新哟！

补充知识：Echarts中有多条曲线，数据精度为小数时，画线部分与小数刻度显示不准确

最近遇到了一个问题就是 多条曲线，数据精度为小数时，画线部分与小数刻度显示不怎么准确，但是单条曲线的时候就没问题

// stack: ‘总量', //此处注释掉 这个问题 就解决了 所有的都要注释掉

series: [
 {
 name: 'line1',
 type: 'line',
 // stack: '总量',  //此处注释掉
 data: this.lineData.series[0].data  //data中包含带有小数的数据
 },
 {
 name: 'line2',
 type: 'line',
 // stack: '总量',  //此处注释掉
 data: this.lineData.series[1].data  //data中包含带有小数的数据
 }
]

如果还有什么问题，大家留言一起讨论。

以上这篇在vue中使用echarts(折线图的demo,markline用法)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。