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


    渲染出来的样式

  • 相关阅读:
    Error: bzip2: Compressed file ends unexpectedly; # perhaps it is corrupted?
    诡异shellbash脚本没写错运行的时候不报错也不执行
    seeksv
    常用Linux对脚本的基本操作——持续更新
    lumpy-sv
    常用linux对系统的基本操作——持续更新
    常用linux对文件的基本操作——持续更新
    css浮动与定位
    CSS知识点概要
    HTML5新手入门基础知识要点概要
  • 原文地址:https://www.cnblogs.com/lxsunny/p/14173725.html
Copyright © 2011-2022 走看看