This article shares the specific code for real-time data update of vue+echarts for your reference. The specific content is as follows
Today, a new chart was added to the management background. I used echarts to record it.
Real-time update based on data
Install
npm install echarts --save
Then configure it in
import echarts from 'echarts' .$echarts = echarts
OK, the next step is to write it on the page you need
// html width and height should be fixed as much as possible, otherwise some strange problems will occur<div :style="{width: '600px', height: '600px'}"></div>data () {
return {
echartUser: '',
echartRegistered: '',
echartOnline: '',
}
}// js
// This is a funnel diagram drawLine () {
let previewChart = this.$(('previewChart'))
({
color: ['#4f8f98', '#233541', '#b32124'],
title: { text: 'Funnel diagram' },
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}people"
},
toolbox: {
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series: [
{
name:'Data statistics',
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
}
},
// When updating data, the data at this location is updated data: [
{value: , name: 'Number of users'},
{value: , name: 'Number of Registration'},
{value: , name: 'Number of people with online hearing tests'},
]
}
]
})
},// Get datagetTable () {
let startTime =
let endTime =
let channel = ''
previewList(startTime, endTime, channel).then(resp =>{
if ( == 0) {
// Use nextTick in this location // Funnel graph data this.$nextTick( ()=>{
=
=
=
// Method 1, directly call the drawLine() method defined above, then pass the parameter to this method, and then replace the variable that passes the parameter in the method where it needs to be changed dynamically to achieve the purpose of dynamically changing the data ( , , )
// Method 2, the stupidest way, rewrite the method of instantiating echarts. let previewChart = this.$(('previewChart'))
({
series: [{
data: [
{value: , name: 'Number of users'},
{value: , name: 'Number of Registration'},
{value: , name: 'Number of people with online hearing tests'},
]
}]
})
})
}else {
this.$()
}
})
},After that, there is no need to define the watch method, and the real-time update of vue + echrats data is simply and roughly completed.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.