Echarts && 饼图引导线以及周围文字位置的改变

我们在官网的demo中看到饼图的引导线都是直接对接文字的

 

 但是需求是要把文字放在引导线上方

 

 所以代码应该修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
option:{
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
          textStyle: {
            color: "#ffffff",
            fontSize: 30
          }
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["30%", "55%"],
            labelLine: {
              normal: {
                length: 20,
                length2: 70,
              }
            },
            label: {
              formatter: "{per|{d}%}{b|{b}}\n\n",
              borderWidth: 20,
              borderRadius: 4,
              padding: [0, -70],
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  lineHeight: 33
                },
                per: {
                  fontSize: 12,
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            },
            data: [
              {
                value: 500,
                name: "win8",
                itemStyle: { normal: { color: "#02B672" } }
              },
              {
                value: 42,
                name: "win10",
                itemStyle: { normal: { color: "#0FC2E7" } }
              },
              {
                value: 175,
                name: "winXP",
                itemStyle: { normal: { color: "#0C6CE8" } }
              },
              {
                value: 145,
                name: "macOS",
                itemStyle: { normal: { color: "#DF4546" } }
              },
              {
                value: 342,
                name: "win7",
                itemStyle: { normal: { color: "#F7BB2D" } }
              }
            ]
          }
        ]
      }

  

posted @   微笑时很美n  阅读(7520)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示