echarts环形图显示百分比

echarts 环形图

let myChart = this.$echarts.init(document.getElementById("userChart"));
//myChart.clear() 如果需要动态加载的需要加这个，在每次加载的时候清除画布
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: '{d}%\n{b}',
        },
        //标题
        title: {
            text: '智工用户统计',
            top: "15px",
            left: "18px"
        },
        //图例组件
        legend: {
            orient: 'vertical',
            x:'right',
            padding:[20,20,0,0], 
            selectedMode: false,
            icon:"circle",
            align:'left',
        },
        //全局颜色样式
        color: ["#C6E2FF", "#76B5F5", "#409EFF", "#166AC1","#68A4E2","#68A4E2"],
        series: [
          {
            name: "地区交易金额",
            type: "pie",
            radius: ["40%", "52%"],//圆环大小
            center: ["44%", "50%"],//图表的位置
            avoidLabelOverlap: false,//是否启用防止标签重叠策略
            hoverAnimation:false,//动画效果
            label: {
              formatter: '{d}%',// 显示百分比，
            },
            // 指示折现
            labelLine: {
              normal: {
                show: true,
                legend: 8,//第一条折现
                legend2: 15,//第二条折现
                lineStyle: {
                  color: "#166AC1"//折现颜色
                },
              }
            },
            data: [
              { value: 335, name: "上海" },
              { value: 310, name: "北京" },
              { value: 234, name: "乌鲁木齐" },
              { value: 135, name: "积极哈尔" }
            ]
          }
        ]
      });

以上为环形图代码

在HTML中设置一个名为 main1 的容器，设置宽高

formatter: ‘{d}%\n{b}’,
let ring = this.$echarts.init(this.$refs.chart); // 绘制图表