vue画图运用echarts

 <template>
     <div class="tubiao">
       <div id="main" style="width: 600px;height:400px;"></div>
     </div>
 </template>

 <script>
   import echarts from 'echarts';
     export default {
         name: 'tubiao',
         data () {
             return {
               chart: null
             }
         },
         methods:{
           drawPie (id) {
             this.chart = echarts.init(document.getElementById('main'));
             this.chart.setOption({
               title: {
                 text: 'ECharts 入门示例'
               },
               tooltip: {},
               legend: {
                 data:['销量']
               },
               xAxis: {
                 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
               },
               yAxis: {},
               series: [{
                 name: '销量',
                 type: 'bar',
                 data: [5, 20, 36, 10, 10, 20]
               }]
             })
           }
         },
         mounted(){
           this.$nextTick(function() {
             this.drawPie('main');
             var that = this;
             var resizeTimer = null;
             window.onresize = function() {
               if (resizeTimer) clearTimeout(resizeTimer);
               resizeTimer = setTimeout(function() {
                 that.drawPie('main');
               }, 100);
             }
           });
         }
     }
 </script>

 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>

 </style>

先进行安装echarts，

然后在根据echarts官网的提示例子，进行开发练手，

最后就是配置一下路由，进行页面的跳转。

更多更好的效果，可以再echarts官网查看。