vue+echarts实现数据实时更新本⽂实例为⼤家分享了vue+echarts实现数据实时更新的具体代码，供⼤家参考，具体内容如下
今天在管理后台新增⼀个图表，⽤了echarts，记录⼀下
根据数据实时更新
安装
npm install echarts --save
然后在main.js中配置⼀下
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
可以了，接下来就是在你需要⽤的页⾯写了
// html 宽⾼还是尽量固定吧，不然会出现⼀些奇奇怪怪的问题
<div id="previewChart" :></div>
data () {
return {
echartUser: '',
echartRegistered: '',setoption
echartOnline: '',
}
}
// js
// 这个是⼀个漏⽃图
drawLine () {
let previewChart = this.$echarts.ElementById('previewChart'))
previewChart.setOption({
color: ['#4f8f98', '#233541', '#b32124'],
title: { text: '漏⽃图' },
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}⼈"
},
toolbox: {
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series: [
{
name:'数据统计',
type:'funnel',
left: '10%',
top: 60,
//x2: 80,
bottom: 60,
width: '80%',
// height: {totalHeight} - y - y2,
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
label: {
fontSize: 18
}
},
// 更新数据的时候，更新的是这个位置的数据
data: [
{value: hartUser, name: '⽤户⼈数'},
{value: hartRegistered, name: '注册⼈数'},
{value: hartOnline, name: '在线听⼒测试⼈数'},
]
}
]
})
},
// 获取数据
getTable () {
let startTime = this.searchMsg.startTime
let endTime = dTime
let channel = ''
previewList(startTime, endTime, channel).then(resp =>{
if (Code == 0) {
// 在这个位置使⽤nextTick
// 漏⽃图数据
this.$nextTick( ()=>{
// ⽅法⼀，直接调⽤前⾯定义的drawLine（）⽅法，然后给这个⽅法传参，然后在⽅法⾥⾯吧需要动态改变的地⽅替换成传参的这个变量达到动态改变数据的⽬的                this.hartRegistered , hartUser, hartOnline)
// ⽅法⼆，最笨的办法，重新写⼀遍实例化echarts的⽅法咯
let previewChart = this.$echarts.ElementById('previewChart'))
previewChart.setOption({
series: [{
data: [
{value: resp.ateCount, name: '⽤户⼈数'},
{value: resp.data.previewCount.phoneCount, name: '注册⼈数'},
{value: resp.stCount, name: '在线听⼒测试⼈数'},
]
}]
})
})
}else {
this.$(resp.msg)
}
})
},
搞定，这样⼦就不⽤在去定义watch⽅法了，简单粗暴的完成了vue + echrats的数据实时更新。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。