用Vue整合Echarts做数据展示：整合Echarts

1. 在终端中输入：npm install echarts --save

2. 在main.js中引入echarts

   // The Vue build version to load with the `import` command
   // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
   import Vue from 'vue'
   import Echar from './echar'
   import router from './router'
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   import Echarts from 'echarts'
   
   Vue.use(ElementUI);
   Vue.use(Echarts);
   
   Vue.config.productionTip = false
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     router,
     components: { Echar },
     template: '<Echar/>'
   })
   

3. 重写char1.vue

   <template>
     <div class="char1">
         <!-- 自定义一个div来装我们的图 -->
       <div id="main" style="width: 90%;height:800px;"></div>
     </div>
   </template>
   <script>
   var echarts = require('echarts');
   export default {
     data () {
       return {
         option: {
           //标题
           title: { text: '火影忍者战斗力' },
           //工具
           toolbox: {
             //是否显示
             show: true,
             feature: {
               //折线图 与 柱状图 切换
               magicType: {
                 type: ['line', 'bar']
               },
               //下载
               saveAsImage: {}
             }
           },
           //节点显示
           legend: {
             data: ['战斗力'],
           },
           //x轴数据  
           xAxis: {
             data: ["旋涡鸣人", "宇智波佐助", "春野樱", "卡卡西", "依鲁卡", "大蛇丸", "自来也", "鹿丸", "雏田", "月光疾风"]
           },
           //y轴  
           yAxis: {},
           //数据
           series: [{
             //初始类型 
             type: 'bar',
             data: [500, 400, 300, 600, 100, 150, 500, 400, 300, 400]
           }]
         }
       }
     },
     methods: {
       draw () {
           //通过echarts初始化我们的div
         let myChart = echarts.init(document.getElementById('main'));
           //为这个echarts的图添加属性
         myChart.setOption(this.option, true)
       }
   
     },
     watch: {
       //数据变化时自动重画，在控制台修改message,会自动重画
       message: function () {
         this.draw();
       }
     },
     mounted () {
         //页面加载的时候，调用画图方法，画图
       this.draw();
     }
   }
   </script>
   <style scoped>
   .char1 {
     height: 100%;
     width: 100%;
     text-align: center;
     line-height: 160px;
   }
   </style>
   

   效果展示
   

自己玩一下差不多就应该知道大概都是些什么了。给不同的组件写不同的图，然后通过路由来显示。就能做到我们基础的效果了。