记录echarts 饼图1 内圆外圆中心圆

首先看看是不是你的菜, 如图

然后我们先装一下echarts

npm install echarts --save // 我这边的版本是"echarts": "^5.3.3",

然后在对应的vue页面中script添加

<script>
import * as echarts from "echarts";
</script>

代码我直接帖上来吧, 同学慢慢研究! 也给自己记录一下!

export default {
    name:'',
    data(){
        return{
          dataOption:{
            backgroundColor: 'transparent',
            title: {
              text: '{a|' + 80 + '}{c|\n%}',
              x: 'center',
              y: 'center',
              textStyle: {
                rich: {
                  a: {    //数字
                    fontSize: 36,
                    color: '#29EEF3',
                    fontFamily: 'Promethean',
                  },
                  c: {    //百分百
                    fontSize: 20,   
                    color: '#ffffff',
                  },
                },
              },
            },
            series:[  //主要三个圈圈的数据 
              { //内圆
                name:"",
                type:"pie",
                radius:["66%","70%"],
                silent:true,
                label:{
                    show:false,
                },
                data:[
                    { //内圆
                      value:100,   
                      name: '',
                      itemStyle: {
                        color: {
                          // 完成的圆环的颜色
                          colorStops: [
                            {
                              offset: 0,
                              color: '#2d57a7', // 0% 处的颜色
                            },
                            {
                              offset: 1,
                              color: '#4657ae', // 100% 处的颜色
                            },
                          ],
                        },
                      },
                    },
                    {
                      name:"",
                      type:"pie",
                      radius:["92%","96%"],
                      silent:true,
                      clockwise: true,
                      startAngle: 90,
                      z: 0,
                      zlevel: 0,
                      label:{
                          show:false,
                      },
                      data:[
                        {
                          value:80,
                          name: '',
                          itemStyle: {
                              color: "#38537a"
                          },
                        },
                        {
                          value: 0,
                          name: '',
                          label: {
                              show: false,
                          },
                          itemStyle: {
                              color: '#173164',
                          },
                        },
                      ]
                    }
                ]
              },
              {//中间渐变的圆
                name:"",
                type:"pie",
                radius:["70%","90%"],
                silent:true,
                label:{
                    show:false,
                },
                data:[
                  {//中间渐变的圆 值为多的
                    value:80,
                    name: '',
                    itemStyle: {
                      color: {
                        // 完成的圆环的颜色
                        colorStops: [
                          {
                            offset: 0,
                            color: '#A098FC', // 0% 处的颜色
                          },
                          {
                            offset: 0.3,
                            color: '#4386FA', // 0% 处的颜色
                          },
                          {
                            offset: 0.6,
                            color: '#4FADFD', // 0% 处的颜色
                          },
                          {
                            offset: 0.8,
                            color: '#0CD3DB', // 100% 处的颜色
                          },
                          {
                            offset: 1,
                            color: '#646CF9', // 100% 处的颜色
                          },
                        ],
                      },
                    },
                  },
                  { //中间的圆 值为少的
                    value:20,
                    name: '',
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        color: '#173164',
                    },
                  }
                ]
              },
              {//最外面的圆
                name:"",
                type:"pie",
                radius:["90%","92%"],
                silent:true,
                label:{
                    show:false,
                },
                data:[
                  {//最外面的圆 值为多的
                    value:100,
                    name: '',
                    itemStyle: {
                      color: {
                        // 完成的圆环的颜色
                        colorStops: [
                            {
                              offset: 0,
                              color: '#2d57a7', // 0% 处的颜色
                            },
                            {
                              offset: 1,
                              color: '#4657ae', // 100% 处的颜色
                            },
                          ],
                      },
                    },
                  },
                  { //最外面的圆 值为少的
                    value:0,
                    name: '',
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        color: '#173164',
                    },
                  }
                ]
              },
            ]
          }
        }
    },
    methods: {
      init(){
        var myChart = echarts.init(document.getElementById('chart'));
        myChart.setOption(this.dataOption)
      }
    },
    mounted() {
      this.init()
    },
}

如果能帮助到你的, 麻烦点个赞 . 谢谢!

学到的就要教人，赚到的就要给人。