zoukankan      html  css  js  c++  java
  • 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 +
                            "
    " +
                            "
    " +
                            "占百分比:" +
                            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 +
                            "
    " +
                            "
    " +
                            "占百分比:" +
                            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 };
                }),
              },
            ],


    渲染出来的样式

  • 相关阅读:
    hdu 1028 母函数 一个数有几种相加方式
    第m个全排列
    大数处理
    并查集
    KMP算法及KMP算法的应用(POJ2406)
    算法---分治法
    末学者笔记--NTP服务和DNS服务
    末学者笔记--NFS服务和DHCP服务讲解
    末学者笔记--SSHD服务及SCP用法
    末学者笔记——SAMBA服务、FTP服务讲解
  • 原文地址:https://www.cnblogs.com/lxsunny/p/14173725.html
Copyright © 2011-2022 走看看