ECharts在Vue中实现数据循环播放
本文介绍如何在Vue项目中利用ECharts实现车间机台数据的自动循环播放，涵盖ECharts的引入、配置及与后端数据交互过程，适用于数据可视化项目。
本文主要讲解前端这一块，后端服务器和数据库部分默认你已经懂了，后面我也会继续写其他文章讲解后端这一块。
最近做项目，需要实现一个车间自动循环播放机台数据的效果,苦苦搜寻, 最后发现了百度echarts这个好东西，可以说是非常适合做数据可视化了。官网文档看这里链接。
1，引入echarts
如果你只是在html里使用vue，可以直接添加链接导入 :
<script src="echarts.min.js"></script>
如果你在vue项目里导入，首先下载echarts到项目本地：
npm i -S echarts
下载之后在vue项目的main.js中导入:
import echarts from 'echarts'
Vue.use(echarts);
Vue.prototype.$echarts = echarts
2，正式开始
引入之后，进入vue组件，首先在template部分要放入你要显示的容器（提前把位置占好）：
<template>
<div>
<div id="myChart3" :style="{width:'300px',height:'300px'}"></div>
<div id="myChart4" :style="{width:'300px',height:'300px'}"></div>
</div>
</template>
占好之后，现在还什么都不会显示，不要着急，继续操作, 接下来在script部分使用echarts，我们将把画图分成两个部分，先画坐标轴，再填充数据，每次循环数据部分即可实现循环播放，而无需每次重画坐标系。
<script>
export default {
name:'eCharts',
data(){
return{
}
},
mounted(){
this.drawBgc(); //先画坐标轴
this.drawContent(); //再填充数据
},
methods:{
drawBgc(){
//画第一个框
var myChart3 = this.$echarts.init(document.getElementById('myChart3'))
//先画一个空的框架
myChart3.setOption({
title:{
//标题先不设置，可以在填充时设置实现自动切换
},
tooltip:{},
legend:{
data:['spc1','spc2'] //注释
},
xAxis:{
data:[] //先占位
},
yAxis:{},
series:[{
//在这个里面提前把栏位占好，后面setOption添加即可
name:'spc1', //这里的name要和上面一起一样
type:'line',
data:[]
},
{
name:'spc2',
type:'line', //这里写bar就是柱状图
data:[]
},
]
});
//画第二个图
var myChart4 = this.$echarts.init(document.getElementById('myChart4'))
myChart4.setOption({
title:{},
legend:{
data:['spc3']
},
xAxis:{
data:[]
},
yAxis:{},
series:[{
name:'spc3',
type:'line',
data:[]
},]
});
},
/---接下来是画数据--/
drawContent(){
var result; //用于接收后端返回的数据
var myChart3 = this.$echarts.init(document.getElementById('myChart3'));
//获取第二个框架
var myChart4 = this.$echarts.init(document.getElementById('myChart4'));
//这里使用vue-resource实现前后端数据共享，导入方法和echarts类似，
//使用ajax也可以实现，如果不会操作自行了解
this.$http.get('spc/show').then(res=>{
//这里get链接是你后端对应的，前面的端口号及IP已经省略了，
//因为在项目config文件中的index.js中配置过了
//res就是我们从后端获取的json内容，可以通过console.log查看一下,
//然后发现res.body才是我们要穿的数组部分
//console.log(res)
var i=0
result = res.body
var len = result.length
//把填充数据setOption部分放入setinterval即可实现效果
setInterval(function(){
i++; //每次递增，实现切换
myChart3.setOption({
title:{
text:result[i%len].no_machine //设置名称为机台编号
},
xAxis:{
type:'category',
data:['8.1','8.2','8.3','8.4','8.5'] //这是坐标轴，可自行填写
},
series:[{
//这里放具体数据
data:result[i%len].testVal //我这里的testVal就是一个存放数据的数组，直接复制到data数组即可
},
{
data:result[(i+1)%len].testVal //我这里在同一个坐标系里放了两个图，仅做测试
}]
});
myChart4.setOption({ //给第二个设置
title:{
text:result[(i+2)%len].no_machine
},
xAxis:{
type:'category',
data:['1号','2号','3号','4号','5号']
},
series:[{
data:result[(i+2)%len].testVal
}]
});
},3000);//3s切换一次
});
},
}
}
</script>
3，一些可能出现的问题、
如果出现前后端跨域问题（cors），可在项目config目录下的index.js中配置，该项目是前后端分离的，所以使用这种方法，如果直接在html里使用的应该是没有这个问题的。这里具体情况有很多，不过多展开，大致说一下index.js配置:
进入之后很容易就看见这个dev，按下面这种方式修改，修改proxtTable和这个’/ws/*’,这个地方以前长什么样不记得了，反正你改成这种格式的:
‘http://你的局域网ip或者localhost或者127.0.0.1:你的后端端口号’
对于ws这里是’ws://你的局域网ip或者localhost或者127.0.0.1:你的后端端口号’
比如我的后端局域网ip是配在这个172.25.1.167上的8088端口，如果你放在localhost就可以写成localhost:8088，target也是写对应的后端ip和端口，具体看自己的情况。只不过localhost和127.0.0.1只能本机查看，写局域网ip的话，同一个WIFI下的设备都可以访问。关于如何查看本机局域网ip，mac下是命令行输入ifconfig en0，返回结果中的inet就是。windows下是ipconfig可以直接查看。
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/':{
target:'http://172.25.1.167:8088',
changeOrigin:true,
},
},
'/ws/*':{
target:'ws://172.25.1.167:8088',
ws:true
},
// Various Dev Server settings
host: '172.25.1.167', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
/--8080是前端端口--/
还有可能遇到的一个问题是url拼接问题，要注意的是，这里配置好统一端口号之后，代码中的url链接是要省略掉一个/的，比如我的传递值的地址是http://172.25.1.167:8088/sps/show, 那么vue-resourse的get那里就写get(‘spc/show’)，而index.js中的配置也只写到8088而不是8088/，这里一定要注意，不然的话，就算你开cors插件也解决不了问题。
这里前后端的ip甚至都不用一样，你可以把前后端分别放在局域网的两台电脑上，实现一个分离，具体的一些web开发相关的内容我会在以后的博客中详细介绍。
到这里基本上就没什么问题了，直接terminal该路径下输入npm run dev 启动！！！
扫一扫
761
到【灌水乐园】发言
