安装echarts依赖

npm install echarts -S

或者使用国内的淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

创建图表

全局引入

main.js

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

Hello.vue

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}

注意： 这里echarts初始化应在钩子函数mounted()中，这个钩子函数是在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用

以上只是插件的柱形图，我们今天要实现的是一下环形图

 

同理引入Echarts后

 

 

data中定义echarts初始配置：

 // 图表配置项
      option: {
        color:['#4472C5','#ED7C30','#80FF80','#FF8096','#800080'],//配置颜色
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 图例
        legend: {
          type: "scroll",
          // orient: "vertical",
          top: 20,
          left: "center",
          data: [], //图例数据从后台获取
          textStyle: {
            //图例文字的样式
            color: "#999",//['#4472C5','#ED7C30','#80FF80','#FF8096','#800080']不同样式
            fontSize: 12
          }
        },
        // 直角坐标系内绘图网格
        grid: {
          left: "3%",
          right: "4%",
          bottom: "30%",
          containLabel: true
        },
        //图表展示数据从后台获取
        series: []
      }

获取后台数据并动态生成echarts需要的数据：

   methods: {
    getChartData() {
      // 图例legend数据
      let legendData = [];
      //this.pieData为后台返回数据
      if (this.pieData) {
        for (let i = 0; i < this.pieData[0].data.length; i++) {
          legendData.push(this.pieData[0].data[i].name);
        }
        this.option.legend.data = legendData;
        // this.option.series[0].name = legendData;
        var center;
        for (var i in this.pieData) {
          center = 100 / (2 + Number(i));
        }
 
        for (var i = 0; i < this.pieData.length; i++) {
          this.option.series[i] = {
            name: this.pieData[i].name,
            type: "pie",       
            center: [center * Number(i + 1) + "%", "60%"],     //每个圆环图的位置，动态计算
            //第一个是内径。第二个是外径。内劲变大就是圆环
            radius: [center + "%", center + center + "%"],     //每个圆环图的大小，动态计算
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          };
          this.option.series[i].data = this.pieData[i].data;
        }
        // this.pieData.foreach((item, i) => {
        //   console.log(i);
        // });
      } else {
        this.option.legend.data = [];
        this.option.series[0].data = [];
      }
    },
    drawPie() {
      this.getChartData();//如果配置完毕option，且不需要这一步

      //核心代码：
      // 基于准备好的dom，初始化echarts实例
      let pieChart = this.$echarts.init(document.getElementById("pieChart"));
      // 绘制图表
      pieChart.setOption(this.option);
    }
  },

数据格式：

   this.pieData = [
     //第一个圆环图
      {
        name: "左",   
        data: [
          {
            name: "",
            value: "37"
          },
          {
            name: "3",
            value: "5"
          },
          {
            name: "1",
            value: "24"
          },
          {
            name: "2",
            value: "15"
          },
          {
            name: "6",
            value: "2"
          },
          {
            name: "5",
            value: "3"
          }
        ]
      },
   //第二个圆环图
      {
        name: "中",
        data: [
          {
            name: "",
            value: "37"
          },
          {
            name: "3",
            value: "5"
          },
          {
            name: "1",
            value: "24"
          },
          {
            name: "2",
            value: "15"
          },
          {
            name: "6",
            value: "2"
          },
          {
            name: "5",
            value: "3"
          }
        ]
      }, 
      //第三个圆环图
      {
        name: "右",
        data: [
          {
            name: "",
            value: "37"
          },
          {
            name: "3",
            value: "5"
          },
          {
            name: "1",
            value: "24"
          },
          {
            name: "2",
            value: "15"
          },
          {
            name: "6",
            value: "2"
          },
          {
            name: "5",
            value: "3"
          }
        ]
      }
    ];

数据请求转换格式

this.list = res.data;
						
var self = this;
this.list.forEach(function(value,index,array){
		    				
 self.pieData[0].data[index].value = value.number;
 self.pieData[0].data[index].name = value.name;
		    				
});
this.pieData[0].name = "jj";
//console.log(this.pieData)
this.drawPie();//绘制图标函数

参考网