vue echart折线图,echarts绘制折线图
这篇文章主要为大家详细介绍了Vue Echarts实现简单折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue Echarts实现简单折线图的具体代码，供大家参考，具体内容如下
Vue Echarts实现一个折线图，打开某视频剪辑软件的项目：
1、在项目里面安装展示
新公共管理安装电子图表-保存
2、在需要用图表的地方引入
从"电子海图"导入电子海图
3、打开my.vue
继续写代码，代码如下：
模板
！-为展示准备一个具备大小的容器多姆
div id= main style= width:600 px；高度：400像素；/div
/模板
脚本
从"电子海图"导入电子海图
导出默认值{
名称： ,
data() {
返回{
图表： ,
/*意见：[1 , 3 , 3 , 4 , 5],*/
opinionData: [3 ， 2 ， 4 ， 4 ， 5]
}
},
方法：{
绘制线(id) {
这个。图表=电子图表。init(文档。getelementbyid(id))
this.charts.setOption({
工具提示：{
触发器："轴"
},
图例：{
数据：[近七日收益]
},
网格：{
左："3%",
对："4%",
底部："3%",
containLabel: true
},
工具箱：{
功能：{
saveAsImage: {}
}
},
xAxis: {
类型："类别",
边界差距：假，
数据：[1 , 2 , 3 , 4 , 5]
},
亚西斯：{
类型："值"
},
系列：[{
名称： 近七日收益，
类型："行",
堆栈： 总量，
数据：this.opinionData数据
}]
})
}
},
//调用
已安装(){
这个. nextTick(function() {
this.drawLine(main )
})
}
}
/脚本
样式范围
* {
边距：0;
填充：0;
列表样式：无；
}
/风格
这个时候，可以看到，加载出的折线图了，后面可以继续进行完善。
这是最基本的折线图，里面的折线点需要替换的话，要注意一些事情
如下代码所示
模板
！-为展示准备一个具备大小的容器多姆
div id= main style= width:600 px；高度：400像素；/div
/模板
脚本
从导入{getorder}./api/api.js
从"电子海图"导入电子海图
导出默认值{
名称： ,
data() {
返回{
图表： ,
/*意见：[1 , 3 , 3 , 4 , 5],*/
//opinionData: [3 ， 2 ， 4 ， 4 ， 5]
意见数据：[],
温度：[],
id:1，
}
},
方法：{
绘制线(id) {
//前端向后端发送请求，获取数据（折线点)
//发送请求要写在拉线方法里面，不然的话意见数据赋予不上数据，做无用功
//params里面的是要向后端传递的一些参数，为了获取数据库中的数据，要替换成你自己的参数
let params={typ:9，id:this.id}
//这是我个人的爱可信封装，有兴趣的话，可以看我爱可信封装的文章
获取订单(参数)。然后((结果)={
this.temp=result.data.tempdic
//console.log(this.temp)
//进行赋值
对于(设I=0；我这个。在…之时长度；i ) {
var str=
str=this.temp[i].临时雇员
this.opinionData.push(str)
//console.log(this.temp[i].温度)
}
//折线图自带的代码
这个。图表=电子图表。init(文档。getelementbyid(id))
this.charts.setOption({
工具提示：{
触发器："轴"
},
图例：{
数据：[温度展示]
},
网格：{
左："3%",
对："4%",
底部："3%",
containLabel: true
},
工具箱：{
功能：{
saveAsImage: {}
}
},
xAxis: {
类型："类别",
边界差距：假，
数据：[]
},
亚西斯：{
类型："值",
},
系列：[{
名称： 温度展示，
类型："行",
堆栈： 总量，
数据：this.opinionData数据
}]
})
})
}
},
//调用
已安装(){
这个. nextTick(function() {
this.drawLine(main )
})
}
}
/脚本
样式范围
* {
边距：0;
填充：0;
列表样式：无；
}
/风格
这样就能展示出，我们想展示的数据的折线图了！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。