具体步骤
1.安装vue-cli
2.npm install echarts
3书写代码

<template>
    <div>
      <div id="main" ref="chart"></div>
    </div>
</template>

<script>
var echarts = require("echarts");
export default {
  name: "charts",
  data() {
    return {
      data: {
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
    }
  },
  mounted() {
    echarts.init(this.$refs.chart).setOption(this.data);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   #main {
       width: 600px;
       height: 400px;
       background-color:blanchedalmond;
      }
</style>

更多前端学习资料请关注微信公众号：前端从入门到SP

异步加载饼状图

<template>
    <div>
      <div id="main" ref="chart"></div>
    </div>
</template>

<script>
var echarts = require("echarts");
export default {
  name: "charts",
  data() {
    return {
      data:"",
      a:"g"
     }},
  mounted() {
     let mychart = echarts.init(this.$refs.chart);
     mychart.showLoading();
     setTimeout(function() {
      let self = this;
      self.data = {     
          series : [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius: '55%',
                  roseType: 'angle',
                  backgroundColor: '#2c343c',
                  itemStyle: {
                  // 阴影的大小
                  shadowBlur: 200,
                  // 阴影水平方向上的偏移
                  shadowOffsetX: 30,
                  // 阴影垂直方向上的偏移
                  shadowOffsetY: 40,
                  emphasis: {shadowBlur: 800,},
                  // 阴影颜色
                  shadowColor: 'rgba(0, 0, 0, 0.5)',                 
                  }, 
                  textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                      },   
                  labelLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        }
                    }, 
                  // 高亮样式。
                  emphasis: {
                      itemStyle: {
                          // 高亮时点的颜色。
                          color: 'blue'
                      },
                      label: {
                          show: true,
                          // 高亮时标签的文字。
                          color: 'black'
                      }
                  },           
                  data:[
                      {value:235, name:'视频广告'},
                      {value:274, name:'联盟广告'},
                      {value:310, name:'邮件营销'},
                      {value:335, name:'直接访问'},
                      {value:400, name:'搜索引擎'}
                  ]
              }
          ]
     }; 
     mychart.hideLoading();
     mychart.setOption(this.data);
    }, 3000)
     console.log(this.a);
     console.log(this.data); 
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   #main {
       width: 600px;
       height: 400px;
       /* background-color:black;  */
       margin: 0 auto;
      }
</style>