vue-echarts-动态刷新前后端交互
这里是建立在会基础vue操作和后端操作的基础上,前后端打开后读代码axios进行数据读取。当然环境配置还需要自己配。
-
<template>
-
<div>
-
<div id="myChart" :style="{width: '300px', height: '300px'}">
-
</div>
-
</div>
-
</template>
-
-
<script>
-
import * as echarts from 'echarts'
-
export default {
-
name: 'my-Hello',
-
data () {
-
return {
-
attention:'',
-
meditation:'',
-
msg: 'attention and meditation'
-
}
-
},
-
mounted(){
-
this.drawBar();
-
this.start();
-
},
-
methods: {
-
-
drawBar(){
-
// var attention = Math.random()*100
-
// var meditation = Math.random()*100
-
// 基于准备好的dom,初始化echarts实例
-
-
let myChart = echarts.init(document.getElementById('myChart'))
-
// 绘制图表
-
myChart.setOption({
-
title: { text: '专注度和放松度' },
-
tooltip: {},
-
xAxis: {
-
data: ['专注度','放松度']
-
},
-
yAxis: {},
-
series: [{
-
name: '销量',
-
type: 'bar',
-
data: [
-
{
-
value: this.attention,
-
name: "专注度",
-
},
-
{
-
value: this.meditation,
-
name: "放松度",
-
},
-
],
-
}]
-
});
-
-
},
-
start(){
-
this.timer = setInterval(()=>{
-
this.dataGet();
-
this.drawBar();
-
},2000)
-
},
-
dataGet(){
-
// const data = this.need
-
// const attention = this.need;
-
// const meditation = this.need;
-
this.axios.get('http://127.0.0.1:8000/lineUpdate/')
-
.then((response)=>{
-
console.log(response.data);
-
console.log(response.data.data.attention);
-
this.attention=response.data.data.attention;
-
this.meditation=response.data.data.meditation;
-
});
-
-
-
},
-
-
-
-
-
-
}
-
}
-
-
</script>
-
-
<style>
-
/* .myChart {
-
display: flex;
-
flex-wrap: wrap;
-
justify-content: space-around;
-
} */
-
</style>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgabeei
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24