一、引入

Vue项目引入 echarts教程: http://t.csdn.cn/0qeiX

二、效果图

注：请先引入 ecahrts，如果不会则直接跳到第三步 。我是全局引入的

三、全量代码

<template>
  <div class="echart">
    <!-- 这个 div 会被解析为 echarts图 -->
    <div class="barChart" ref="barChart"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initBarChart();
  },
  methods: {
    initBarChart() {
      let myChart = this.$echarts.init(this.$refs.barChart);
      // total 和 salary的数据就是各个环的数据
      let total = 100;
      let salayry1 = 40;
      let salayry2 = 10;
      let salayry3 = 20;
      let salayry4 = 30;
      let salayry5 = 15;
      let salayry6 = 20;
      let option = {
        color: [
          "#00FFFF",
          "#00B0FF",
          "#FFC000",
          "#FFAB6F",
          "#63E315",
          "#893BFF",
        ],
        legend: {
          orient: "vertical",
          left: "10%",
          top: "20%",
          itemHeight: 12, //图例的高度
          itemGap: 15, //图例之间的间距
          data: [
            {
              name: "A版块",
              icon: "circle",
              textStyle: {
                color: "#D2D3D8", // 单独设置某一个图列的颜色
              },
            },
            {
              name: "B版块",
              icon: "circle",
              textStyle: {
                color: "#D2D3D8", // 单独设置某一个图列的颜色
              },
            },
            {
              name: "C版块",
              icon: "circle",
              textStyle: {
                color: "#D2D3D8", // 单独设置某一个图列的颜色
              },
            },
            {
              name: "D版块",
              icon: "circle",
              textStyle: {
                color: "#D2D3D8", // 单独设置某一个图列的颜色
              },
            },
            {
              name: "E版块",
              icon: "circle",
              textStyle: {
                color: "#D2D3D8", // 单独设置某一个图列的颜色
              },
            },
            {
              name: "F版块",
              icon: "circle",
              textStyle: {
                color: "#D2D3D8", // 单独设置某一个图列的颜色
              },
            },
          ],
          //图例的名字需要和饼图的name一致，才会显示图例
        },
        series: [
          // A版块
          {
            name: "A版块",
            type: "pie",
            radius: ["70%", "75%"],
            center: ["65%", "50%"],
            //环的位置
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            data: [
              {
                value: 80, //需要显示的数据
                name: 80 + "%",
                itemStyle: {
                  normal: {
                    color: "#00FFFF",
                  },
                },
              },
              {
                value: total - salayry1,
                //不需要显示的数据，颜色设置成和背景一样
                itemStyle: {
                  normal: {
                    color: "#081A3C",
                  },
                },
              },
            ],
          },
          // B版块
          {
            name: "B版块",
            type: "pie",
            radius: ["60%", "65%"],
            center: ["65%", "50%"],
            //环的位置
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "500",
              },
            },
            data: [
              {
                value: salayry2, //需要显示的数据
                name: salayry2 + "%",
                itemStyle: {
                  normal: {
                    color: "#00B0FF",
                  },
                },
              },
              {
                value: total - salayry2,
                //不需要显示的数据，颜色设置成和背景一样
                itemStyle: {
                  normal: {
                    color: "#081A3C",
                  },
                },
              },
            ],
          },
          // C版块
          {
            name: "C版块",
            type: "pie",
            radius: ["50%", "55%"],
            center: ["65%", "50%"],
            //环的位置
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
              itemStyle: {
                normal: {
                  color: "#FFC000",
                },
              },
            },
            data: [
              {
                value: salayry3, //需要显示的数据
                name: salayry3 + "%",
                itemStyle: {
                  normal: {
                    color: "#FFC000",
                  },
                },
              },
              {
                value: total - salayry3,
                //不需要显示的数据，颜色设置成和背景一样
                itemStyle: {
                  normal: {
                    color: "#081A3C",
                  },
                },
              },
            ],
          },
          // D版块
          {
            name: "D版块",
            type: "pie",
            radius: ["40%", "45%"],
            center: ["65%", "50%"],
            //环的位置
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            data: [
              {
                value: salayry4, //需要显示的数据
                name: salayry4 + "%",
                itemStyle: {
                  normal: {
                    color: "#FFAB6F",
                  },
                },
              },
              {
                value: total - salayry4,
                //不需要显示的数据，颜色设置成和背景一样
                itemStyle: {
                  normal: {
                    color: "#081A3C",
                  },
                },
              },
            ],
          },
          // E版块
          {
            name: "E版块",
            type: "pie",
            radius: ["30%", "35%"],
            center: ["65%", "50%"],
            //环的位置
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            data: [
              {
                value: salayry5, //需要显示的数据
                name: salayry5 + "%",
                itemStyle: {
                  normal: {
                    color: "#63E315",
                  },
                },
              },
              {
                value: total - salayry5,
                //不需要显示的数据，颜色设置成和背景一样
                itemStyle: {
                  normal: {
                    color: "#081A3C",
                  },
                },
              },
            ],
          },
          // F版块
          {
            name: "F版块",
            type: "pie",
            radius: ["20%", "25%"],
            center: ["65%", "50%"],
            label: {
              show: false,
              position: "center",
              // normal: {
              //     position: 'inner'
              // }
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            data: [
              {
                value: salayry6,
                name: salayry6 + "%",
                itemStyle: {
                  normal: {
                    color: "#893BFF",
                  },
                },
              },
              {
                value: total - salayry6,
                itemStyle: {
                  normal: {
                    color: "#081A3C",
                  },
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
// 这里不一定非要 less，其他的也是可以的
<style scoped lang="less">
.echart {
  width: 600px;
  height: 400px;
  margin: auto;
  border: 3px solid lightcoral;
  background-color: #0f2858;

  //  宽高是必须给的，可以给百分比、具体的像素等....
  .barChart {
    width: 600px;
    height: 400px;
  }
}
</style>