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="width: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="width: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：

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