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


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

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

     所以代码应该修改

    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}}
    
    ",
                  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" } }
                  }
                ]
              }
            ]
          }
    

      

  • 相关阅读:
    注册系统
    android登录界面
    android作业 购物界面
    第六周jsp作业
    JSP第四周
    JSP第二次作业
    JSP第一次作业
    第一周软件测试
    第九次安卓
    购物菜单
  • 原文地址:https://www.cnblogs.com/BySee1423/p/13255159.html
Copyright © 2020-2023  润新知