如何修改echarts环形图的牵引线及文字位置

Ĵ近日做项目需要用到echarts的环形图,但官网原生样式无法满足需求,故将样式进行修改,效果图如下:

官网原图:

我需要修改的:

1.去掉边框和百分比

2.文字上移至牵引线的上方

3.自定义样式

代码如下

  1.  
    app.title = '环形图';
  2.  
     
  3.  
    option = {
  4.  
    tooltip: {
  5.  
    trigger: 'item',
  6.  
    formatter: " {b}:{c} "
  7.  
     
  8.  
    // ({d}%) 代表该模块所占圆环比例
  9.  
    // formatter: "{a} <br/>{b}: {c} ({d}%)"
  10.  
    },
  11.  
    //环形颜色
  12.  
    color:['#ffb616','#ccc'],
  13.  
    legend: {
  14.  
    orient: 'vertical',
  15.  
    show: false,
  16.  
    x: 'left',
  17.  
    data: ['视频广告', '其他']
  18.  
    },
  19.  
    series: [
  20.  
     
  21.  
    {
  22.  
    name: '访问来源',
  23.  
    type: 'pie',
  24.  
    radius: ['30%', '40%'],
  25.  
    labelLine: {
  26.  
    normal: {
  27.  
    length: 20,
  28.  
    length2: 70,
  29.  
    lineStyle: {
  30.  
    color: '#333'
  31.  
    }
  32.  
    }
  33.  
     
  34.  
    },
  35.  
    label: {
  36.  
    normal: {
  37.  
    // 可让文字居于牵引线上方,很关键
  38.  
    // {b} 代表显示的内容标题
  39.  
    // {c}代表数据
  40.  
    formatter: ' {b}:{c} ',
  41.  
     
  42.  
    borderWidth: 20,
  43.  
    borderRadius: 4,
  44.  
    padding: [0, -70],
  45.  
    rich: {
  46.  
    a: {
  47.  
    color: '#333',
  48.  
    fontSize: 12,
  49.  
    lineHeight: 20
  50.  
    },
  51.  
    b: {
  52.  
    fontSize: 12,
  53.  
    lineHeight: 20,
  54.  
    color: '#333'
  55.  
    }
  56.  
    }
  57.  
    }
  58.  
    },
  59.  
    data: [{
  60.  
    value: 8,
  61.  
    name: '视频广告'
  62.  
    }, {
  63.  
    value: 35,
  64.  
    name: '其他'
  65.  
    }]
  66.  
    }
  67.  
    ]
  68.  
    };

结果图:

转自于:https://blog.csdn.net/k912120/article/details/81477039?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.opensearch_close&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.opensearch_close

原文地址:https://www.cnblogs.com/Ao-min/p/13452705.html