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官网查看。