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


    渲染出来的样式

  • 相关阅读:
    C++中函数模板template的使用
    C++中模板template和类class的结合使用
    Python中shuffle函数
    Python中利用tkinter模块构建图形用户界面GUI
    Python中怎样初始化一个类类class?
    Python中字典的has_key方法在3.4版本中改为in
    Python中怎样对数据集整体进行映射转换类型
    matlab中怎样对矩阵的某一列进行排序而使得其他列对应移动??
    Python中怎样使用shape计算矩阵的行和列
    27.反射2.md
  • 原文地址:https://www.cnblogs.com/lxsunny/p/14173725.html
Copyright © 2011-2022 走看看