在vue中通过axios异步使用Echarts

前言

最近需要写一个数据大屏，看到给的设计稿上面，画的充满科幻气息的页面，感觉自己头有点大，先写了一个假数据的Echarts图表，之后使用axios进行数据获取，动态更改，在vue项目中，将Echarts中的数据取出来，放到static/data.json文件中，之后请求本地json数据，模拟接口调用数据。

一、引入axios

1、使用npm进行安装 npm install axios --save

2、在main.js文件中进行引入并注册

//main.js
import axios from 'axios'
vue.prototype.axios = axios
//在new Vue 中写入 axios
//在config/index.js文件中，需要对proxyTable以及Target配置为后端给的接口地址和域名，如果需要跨域，则需要把changeOrigin改为true
//把host以及post改为客户端访问的接口地址以及域名

二、编写data.json数据

将图表中的option中的数据完全移动到data.json中

{
    "code":200,
    "msg":"处理成功",
    "title": { "text": "简单柱状图" },
    "tooltip": {},
    "xAxis": {
        "data": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
        "name": "产品"
    },
    "yAxis": {},
    "series": [{
        "name": "销量",
        "type": "bar",
        "data": [10, 20, 30, 40, 50, 60],
        "itemStyle": {   
            "normal": {
              "color": "hotpink"
            }
        }
    }]
}

三、页面构建 1、新建chart.vue页面 2、在methods方法中新建drawbarChart()方法 3、在mounted()方法中调用drawBarChart()方法，进行初始化渲染 代码如下：

<template>
  <div id="myChart" :style="{width: '800px', height: '400px'}"></div>
</template>

<script>
  export default {
    name: 'echarts',
    data() {
      return {
        goods: {} 
      }
    },
    mounted() {
      this.drawLine();
    },
    created() {
      this.axios.get('/static/data.json').then(res => {
        const data = res.data;  //定义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: {},    //{text: 'ECharts入门示例'},
          tooltip: {},
          xAxis: {
            data: []  //["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] 横坐标
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: []  //[10, 20, 30, 40, 50, 60] 纵坐标
          }]
        });
        //添加loading动画
        //显示加载动画
        myChart.showLoading();
        this.axios.get("/static/data.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));
                //结束loading动画
                  myChart.hideLoading(); //隐藏加载动画
            myChart.setOption({
              title: data.title,
              xAxis: [{
                data: data.xAxis.data
              }],
              series: [{
                name: '销量',
                type: 'bar',
                data: Array.from(...list) //[10, 20, 30, 40, 50, 60]
              }]
            });
          })
      }
    }
  }
</script>

即可构成一个可以进行数据更改的柱状图~~