随笔 - 87,  文章 - 0,  评论 - 1,  阅读 - 95838
复制代码
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 };
            }),
          },
        ],


复制代码

渲染出来的样式

 

posted on   菜鸟成长日记lx  阅读(9838)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
< 2025年3月 >
23 24 25 26 27 28 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 1 2 3 4 5

点击右上角即可分享
微信分享提示