Preface
Recently, I have learned about eCharts and have learned asynchronous updates and data loading. I feel it is necessary to summarize it. Please refer to the method in the future. Before starting this article, friends who are not familiar with eCharts can refer to this article:https:///article/I won’t say much below, let’s take a look at the detailed introduction together.
How to use
To use Echarts, you must first introduce it (place it in the html file of the file entrance)
<script src="public/js/"></script>
Before drawing, we need to prepare a DOM container with high and wide for ECharts
<div style="width: 600px;height:400px;"></div>
Initialize an echarts instance and generate a chart type you want through the setOption method.
First, take out the setOption option in echarts separately, and put it in the initialization in data.
data() { return {
getSetOption: {//Line chart
title: {
text: null
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value'
},
legend: {
data: []
},
xAxis: {
type: 'category',
data: []
},
series: [
{
name: null,
type: 'line',
stack: 'Total number of people',
data: []
}
]
},
getPieOption: {//Pie chart
title: {
text: null
},
tooltip: {
tooltip: 'item',
formatter: "{a} <br/> {b} : {c} ({d}%)"
},
series : [
{
type: 'pie',
radius: '55%',
data:[
].sort(function(a,b){return - ;}),
roseType: 'angle',
}
]
},
}
}
The following is a method initialized in methods,
drawLineChart() {
= (('lineChartOrder'));
();
},
Then call this method in mounted
(),
Next is the data asynchronous loading and updating.
The following code is the local json type. When loading data asynchronously, just fill in the data and then correspond to the corresponding series according to the name in the series.
getOrderTotal(){//Get order statistics for a period of time
(, ,)
.then(res => {
if ( && ) {
const
results = ,
legends = (item => ({
name: ,
data:
}))
({
title: {
text: 'Order Statistics'
},
legend: {
data: (item => )
},
xAxis: {
data: legends[0].(item => )
},
series: (item => {
return {
type: 'line',
name: ,
data: (item => )
}
})
})
}
}).catch(err => {
// (err)
})
However, the data of echarts is directly merged, so when multiple polylines appear, if the data on that day is 0, or the data transmitted from the background is empty, the value of the setOption is not updated at all, but is directly merged, so this problem is too big.
The solution to this problem is
Use getOption to get the existing option, and then use(), clear option, finally(option, false, false) 。
This way you can clear it.
The following is the method of loading and updating asynchronous data on the official website, which will be relatively simple.
// Asynchronously load data
$.get('').done(function (data) {
// Fill in the data
({
xAxis: {
data:
},
series: [{
// Correspond to the corresponding series according to the name
name: 'Sales',
data:
}]
});
Just populate the data into it.
Summarize
The above is the entire content of this article. I hope that the content of this article has a certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.