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 };
                }),
              },
            ],


    渲染出来的样式

  • 相关阅读:
    ubuntu16.04下docker安装和简单使用(转)
    spring security There was an unexpected error (type=Forbidden, status=403).
    笔记42 Spring Web Flow——Demo(2)
    Idea debug时报错:Command line is too long
    特殊字符(包括emoji)梳理和UTF8编码解码原理(转)
    如何理解多租户架构?(转)
    Android Studio使用阿里云Aliyun Maven仓库
    解决 INSTALL FAILED CONFLICTING PROVIDER
    Android解决冲突
    Mysql查询库、表存储量(Size)
  • 原文地址:https://www.cnblogs.com/lxsunny/p/14173725.html
Copyright © 2011-2022 走看看