echarts -- 餅圖引導線的設置


seriesData: [
          {
            name: "進站乘客統計",
            type: "pie",
            radius: [0, 70],
            center: ["25%", "40%"],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  // color: "#ddd",
                  formatter: function (params) {
                    console.log("params", params);
                    var percent = 0;
                    var total = 0;
                    for (var i = 0; i < res.length; i++) {
                      total += Number(res[i].stationInFlow);
                    }
                    percent = ((params.value / total) * 100).toFixed(0);
                    percent = percent == "NaN" ? 0 : percent;
                    console.log("percent", percent, total);
                    if (params.name !== "") {
                      return (
                        "數量:" +
                        params.value +
                        "\n" +
                        "\n" +
                        "占百分比:" +
                        percent +
                        "%"
                      );
                    } else {
                      return "";
                    }
                  },
                },
                // labelLine: {
                //   // length: 30,
                //   // length2: 100,
                //   show: true,
                //   // color: "#00ffff",
                // },
              },
            },
            // label: {
            //   show: true,
            // },
            color: ["#0e79bf", "#678ffb", "#6bbbf5", "#a36ef3", "#63c1cf"],
            data: res.map((item) => {
              // return item.arriveCount;
              return { value: item.stationInFlow, name: item.stationName };
            }),
          },
          {
            name: "出站乘客統計",
            type: "pie",
            radius: [0, 70],
            center: ["75%", "40%"],
            // roseType: 'area',
            label: {
              show: true,
            },
            itemStyle: { normal: { label: { show: true,
                  position: "outside",
                  // color: "#ddd",
                  formatter: function (params) {
                    console.log("params", params);
                    var percent = 0;
                    var total = 0;
                    for (var i = 0; i < res.length; i++) {
                      total += Number(res[i].stationOutFlow);
                    }
                    percent = ((params.value / total) * 100).toFixed(0);
                    percent = percent == "NaN" ? 0 : percent;
                    console.log("percent", percent, total);
                    if (params.name !== "") {
                      return (
                        "數量:" +
                        params.value +
                        "\n" +
                        "\n" +
                        "占百分比:" +
                        percent +
                        "%"
                      );
                    } else {
                      return "";
                    }
                  },
                },
                // labelLine: {
                //   // length: 30,
                //   // length2: 100,
                //   show: true,
                //   // color: "#00ffff",
                // },
 }, },
            data: res.map((item) => {
              //  { value: 10, name: 'rose1' },
              return { value: item.stationOutFlow, name: item.stationName };
            }),
          },
        ],


渲染出來的樣式

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM