In vue, axios asynchronously uses the echarts method, axiosecharts

In vue, axios asynchronously uses the echarts method, axiosecharts

In actual work, data cannot be written to death as demonstrated in the previous demo. all data should be obtained by sending a request. Therefore, in this article, I will use Echarts In the Vue project: Introduce Echarts data in Vue for extraction, put it in static/data. request the file to obtain data.

I. Asynchronous Data Loading

(1) Introduce vue-resource

Download axios from npm

// Enter npm install axios -- save in the command line

Introduce and register axios in main. js

// Main. jsimport http from './http' Vue. prototype. $ http = http // mount it to the prototype

(2) Set data. json

Extract the option without data from the bar chart to data. json. The Code is as follows:

{"Title": {"text": "simple pie chart"}, "tooltip" :{}, "xAxis": {"data": ["shirt ", "sweater", "chiffon shirt", "Pants", "high heels", "so"], "name": "product"}, "yAxis ":{}, "series": [{"name": "sales volume", "type": "bar", "data": [5, 20, 36, 10, 10, 20], "itemStyle": {"normal": {"color": "hotpink" }}]}

(3) request data in async-bar-chart.vue

1. Introduce option from aysnc-barChart-option.js
2. Add the drawBarChart () method to methods
3. Call drawBarChart () in the mounted () Hook Function ()

The Code is as follows:

<Template> <div id = "myChart": style = "{width: '800px ', height: '400p'} "> </div> </template> <script> export default {name: 'echarts', data () {return {msg: 'Welcome to Your Vue. js App ', goods :{}}, mounted () {this. drawLine () ;}, created () {this. $ http. get ('. /static/dat. json '). then (res => {const data = res. data; this. goods = data console. log (this. goods); console. log (Array. from (this. goods. xAxis. data) ;}}, methods: {drawLine () {// initialize the echarts instance let myChart = this based on the prepared dom. $ echarts. init (document. getElementById ('mychart') // draws the myChart chart. setOption ({title :{}, // {text: 'asynchronous data loading example'}, tooltip :{}, xAxis: {data: [] // ["shirt ", "sweater", "chiffon shirt", "Pants", "high heels", "so"]}, yAxis :{}, series: [{name: 'salesman', type: 'bar', data: [] // [5, 20, 36, 10, 10, 20]}); this. $ http. get (". /static/dat. json "). then (res) => {const data = res. data; const list = data. series. map (good => {let list = good. data; return [... list]}) console. log (list); console. log (Array. from (... list); myChart. setOption ({title: data. title, xAxis: [{data: data. xAxis. data}], series: [{name: 'salesman', type: 'bar', data: Array. from (... list) // [5, 20, 36, 10, 10, 20]}) ;}}}</script>

2. Add an animation

If the data is loaded for a long time and an empty coordinate axis is placed on the canvas, the user may feel that a bug has occurred. Therefore, a loading animation is required to prompt that the user data is being loaded.

By default, ECharts provides a simple loading animation. You only need to call the showLoading Method for display. After the data is loaded, call the hideLoading method to hide the animation.

Add showLoading () and hideLoading () in the drawLine () method. The Code is as follows:

Methods: {drawLine () {// initialize the echarts instance let myChart = this based on the prepared dom. $ echarts. init (document. getElementById ('mychart') // draws the myChart chart. setOption ({title :{}, // {text: 'asynchronous data loading example'}, tooltip :{}, xAxis: {data: [] // ["shirt ", "sweater", "chiffon shirt", "Pants", "high heels", "so"]}, yAxis :{}, series: [{name: 'salesman', type: 'bar', data: [] // [5, 20, 36, 10, 10, 20]}); // display the loaded animation myChart. showLoading (); this. $ http. get (". /static/dat. json "). then (res) =>{ setTimeout () => {// The animation loading effect will be obvious in the future. setTimeout is added here to implement 3 s latency const data = res. data; const list = data. series. map (good => {let list = good. data; return [... list]}) console. log (list); console. log (Array. from (... list); myChart. hideLoading (); // hide the animation myChart. setOption ({title: data. title, xAxis: [{data: data. xAxis. data}], series: [{name: 'salesman', type: 'bar', data: Array. from (... list) // [5, 20, 36, 10, 10, 20]});}, 3000 )})}}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.