vue学习【二】vue结合axios动态引用echarts

　　大家好，我是一叶，本篇是vue学习的第二篇，本篇将要讲述vue结合axios动态引用echarts。

　　在vue中，异步刷新使用的是axios，类似于大家常用的ajax，其实axios已经是vue的第二代异步工具了，第一代是vue-resource,不过官方已经停止更新了，axios各方面来说更好用，所以还是比较推荐的。

　　首先来说说我们的思路，echarts能渲染图表，是因为series里的data有数据，所以才能渲染出来。如果我们把axios请求过来的值赋给data，是不是意味着echarts就能够动态刷新了。凭借这个思路，于是本文就有内容了。

　　在这里我打算分两部分来写。一个是普通篇，仅仅是echarts和axios的用法；另一个是进阶篇，内容为vuex、echarts和axios的结合使用。vuex内容较多，这里只是引用，不进行详细讲解，关于vuex的详细用法，以后我会单独写一篇文章，到时候我会把链接放进来。

　　普通篇：

　　目录结构如图1所示：

图1

　　说得再好不如代码直观，主组件：index.vue

<!-- index.vue -->
<template>
  <div><div id="echartContainer" style="500px; height:500px"></div></div>
</template>
 
<script>
//从option.js中引入option
import { option } from '@/views/option';
export default {
  name: 'bar-chart',
  data() {
    return {
    };
  },
  methods: {
    drawBarChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('echartContainer'), 'infographic');
      // 绘制基本图表
      myChart.setOption(option);
      //加载动画
      myChart.showLoading();
      //axios异步获取数据
      this.$axios
        .get('static/data/asyncBarChart.json')
        .then(res => {
          setTimeout(() => {
            // 获取到数据后隐藏加载动画
            myChart.hideLoading();
            // console.log(res.data);
            myChart.setOption({
              xAxis: [
                {
                  data: res.data.cp //将异步请求获取到的数据进行装载
                }
              ],
              series: [
                {
                  data: res.data.product
                }
              ]
            });
          }, 500); //加载动画时长为0.5秒
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    //调用drawBarChart()
    this.drawBarChart();
  }
};
</script>
<style></style>

　　接下来是渲染echarts图表的渲染函数：option.js

// option.js
export const option = {
  // title: { text: '简单柱状图' },
  tooltip: {},
  xAxis: {
    data: [],
    name: '产品'
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [],
    itemStyle: {
      normal: {
        color: 'rgb(145,199,174)'
      }
    }
  }]
}

　　接下来是json文件：test.json

{
  "data":[
    {
      "cp": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      "product": [7, 20, 31, 10, 13, 20, 15]
    }
  ]
}

　　运行效果如图2所示。

图2

　　估计有小伙伴对myChart.showLoading()和myChart.hideLoading();这两个函数迷糊了吧，这是加载动画，前者显示加载动画，后者判断获得数据后隐藏加载动画。当你的图表数据还没进行渲染或者网速不好时，页面一片空白岂不是很尴尬，所以有这个加载动画来过渡一下避免这种尴尬。用法很简单，一看代码你就知道了。

//加载"加载动画"
myChart.showLoading();
setTimeout(() => {
  自己定义的函数(){
            
  }
  // 获取到数据后隐藏加载动画
  myChart.hideLoading();
}

　　以上就是普通篇的内容了，接下来就是进阶篇。什么是进阶篇，就是引用vuex，使用store仓库进行存储数据。这里我不会对vuex进行讲述，因为后面我会单独做一篇文章来讲解，这里只是当做工具引用而已，是帮助掌握vuex的小伙伴熟悉vuex和echarts的用法。

　　进阶篇：

　　我们先来看一看效果图，如图3所示。

图3 运行效果图

　　接下来是目录结构，如图4所示。

图4 目录结构图

　　在代码前我们说一下思路，说个屁，都说了不详细说vuex。翠花，上代码。

　　父组件pie.vue

<!-- pie.vue -->
<template>
  <div class="EchartsCoponent">
   <div >
      <div v-for="(chardata,index) in rightData" :key="index">
          <EchartsCoponent :chartData="chardata" autoresize />
      </div>
    </div>
  </div>
</template>
 
<script>
    import EchartsCoponent from '@/components/EchartsComponent'
    export default {
        name: 'echarts',
        data () {
            return {
                rightData:[]
            }
        },
    mounted() {
      this.bindData();
    },
    methods: {
      bindData() {
        this.$axios
          .get('static/data/piedata.json')
          .then(res => {
            let pro = res.data;
            this.$store.dispatch('axiostest', pro);
            this.rightData = this.$store.state.MsgRight;
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
        components: {
            EchartsCoponent
        }
    }
</script>
<style scoped>
</style>

　　子组件EchartsComponent.vue：

<!-- EchartsComponent.vue -->
<template>
  <div class="xiao-ring"><div style="140px;height:140px;margin: 0 auto;" :id="echarts" class="echarts" ref="echarts"></div></div>
</template>
 
<script>
// 引入echarts
import echarts from 'echarts';
export default {
  name: 'EchartsComponents',
  props: {
    // 接收父组件传递过来的信息
    chartData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  methods: {
    drawChart() {
      const vm = this;
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(this.echarts));
      // 绘制图表
      let options ={
        //标题设置
        title: {
          text: 'ECharts测试',
          x: 'center',
          y: 'bottom',
          textStyle: {
            fontSize: 16,
            fontWeight: 'bolder',
            color: '#999'
          }
        },
        // 鼠标移动到图上的文字显示
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '销量',
            type: 'pie',
            radius: ['50%', '65%'], //变成空心圆,分别类似于x，y
            // data: [5, 20, 36, 10, 10, 20]
 
            label: {
              normal: {
                show: false, //隐藏指示文字
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '15',
                  fontWeight: 'bold'
                }
              }
            },
            //饼图的指示线
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.chartData
          }
        ]
      }
      myChart.setOption(options)
      this.autoActive(myChart, options)
    },
      autoActive(chart, option) {
        this.intervalFun(chart, option)
      },
      intervalFun(chart, option) {
        let dataIndex = -1
        let dataLen = option.series[0].data.length
        this.interval = setInterval(() => {
          chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex
          })
          dataIndex = (dataIndex + 1) % dataLen
          chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex
          })
        }, 1000)
      }
 
  },
  computed: {
    echarts() {
      return 'echarts' + Math.random() * 100000;
    }
  },
  mounted: function() {
    const vm = this;
    vm.$nextTick(() => {
      vm.drawChart();
    });
  },
  created: () => {}
};
</script>
 
<style scoped>
.xiao-ring {
  float: left;
  margin: 0 auto;
  text-align: center;
}
</style>

　　数据文件piedata.json：

[
  [
    {"value":335, "name":"直接访问"},
    {"value":310, "name":"邮件营销"},
    {"value":234, "name":"联盟广告"},
    {"value":135, "name":"视频广告"},
    {"value":1548, "name":"搜索引擎"}
  ],
  [
    {"value":335, "name":"直接访问"},
    {"value":310, "name":"邮件营销"},
    {"value":234, "name":"联盟广告"},
    {"value":135, "name":"视频广告"},
    {"value":1548, "name":"搜索引擎"}
  ],
  [
    {"value":335, "name":"直接访问"},
    {"value":310, "name":"邮件营销"},
    {"value":234, "name":"联盟广告"},
    {"value":135, "name":"视频广告"},
    {"value":1548, "name":"搜索引擎"}
  ],
  [
    {"value":335, "name":"直接访问"},
    {"value":310, "name":"邮件营销"},
    {"value":234, "name":"联盟广告"},
    {"value":135, "name":"视频广告"},
    {"value":1548, "name":"搜索引擎"}
  ],
  [
    {"value":335, "name":"直接访问"},
    {"value":310, "name":"邮件营销"},
    {"value":234, "name":"联盟广告"},
    {"value":135, "name":"视频广告"},
    {"value":1548, "name":"搜索引擎"}
  ]
]

　　代码我放到了百度云和github上了，下面是链接。

　　百度云：

　　git：

以上就是本文的所有内容了，如果有不明白的，或者需要改进的，都可以留言或者私信我。哦，对了，昨天才看到微信设置不让人加，所以联系到我就随缘了，随缘我们便能相见。