在vue中通过axios异步使用echarts的方法

在 Vue 中通过 Axios 异步使用 Echarts 的方法 本篇文章主要介绍了在 Vue 中通过 Axios 异步使用 Echarts 的方法。在实际的工作中，数据不可能是像之前的 demo 演示的那样把数据写死的。所有的数据都应该通过发送请求进行获取。因此，在此篇文章中，我们将在 Vue 项目中使用 Echarts，实现异步加载数据。 一、实现异步加载数据 我们需要引入 Axios，並通过 npm 下载 Axios。然后，在 main.js 中引入 Axios 并注册： ``` import http from './http' Vue.prototype.$http = http ``` 这将 Axios 挂载到 Vue 的原型上。 二、设置 data.json 将该柱状图的没有数据的 option 抽取到 data.json 中，代码如下： ``` { "title": { "text": "简单饼状图" }, "tooltip": {}, "xAxis": { "data": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], "name": "产品" }, "yAxis": {}, "series": [{ "name": "销量", "type": "bar", "data": [5, 20, 36, 10, 10, 20], "itemStyle": { "normal": { "color": "hotpink" } } }] } ``` 三、在 async-bar-chart.vue 中请求数据 从 async-barChart-option.js 中引入 option。然后，在 methods 中添加 drawBarChart() 方法。在 mounted() 钩子函数中调用 drawBarChart() 方法。代码如下： ``` <template> <div id="myChart" :style="{width: '800px', height: '400px'}"></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() { // 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')) // 绘制图表 myChart.setOption({ title: {}, tooltip: {}, xAxis: { data: [] //["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', 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, }], yAxis: {}, series: [{ name: '销量', type: 'bar', data: list }] }); }) } } } </script> ``` 通过以上步骤，我们可以实现异步加载数据，并将其展示在 Echarts 中。