zoukankan      html  css  js  c++  java
  • 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" } }
                  }
                ]
              }
            ]
          }
    

      

  • 相关阅读:
    JavaScript节点属性
    main函数的参数
    CGI
    open()函数 linux中open函数使用
    海伦公式
    C语言字符串操作函数
    makefile(一)
    makefile
    第一天
    时间小憩
  • 原文地址:https://www.cnblogs.com/BySee1423/p/13255159.html
Copyright © 2011-2022 走看看