饼图 - 图1

    1. 这里的data选项。每一个value对应两种不同的解释,既是威胁人数>1000人,也是特大型。
    2. 同一条数据上下两行的背景色和字体颜色互换了。

    主要用到两个配置:

    1. series-pie.label.formatter 标签内容格式化
    2. series-pie.label.rich 自定义富文本样式
    1. pieOption: {
    2. title: {
    3. text: "Traffic Sources",
    4. left: "center",
    5. },
    6. grid: {
    7. left: "center",
    8. top: 40,
    9. containLabel: true,
    10. },
    11. color: ["#8676F8", "#99CDFD", "#3FE8BD", "#FA9DA6"],
    12. legend: {
    13. orient: "vertical",
    14. left: "left",
    15. data: [
    16. "威胁人数>1000人",
    17. "威胁人数<10人",
    18. "威胁人数>10人",
    19. "威胁人数>100人",
    20. ],
    21. },
    22. series: [
    23. {
    24. name: "Traffic Sources",
    25. type: "pie",
    26. radius: "48%",
    27. data: [
    28. { value: 100, name: "威胁人数>1000人" },
    29. { value: 200, name: "威胁人数<10人" },
    30. { value: 218, name: "威胁人数>10人" },
    31. { value: 130, name: "威胁人数>100人" },
    32. ],
    33. label: {
    34. lineHeight: 15,
    35. formatter: function (params) {
    36. var type;
    37. var styleLabel;
    38. var styleText;
    39. switch (params.name) {
    40. case "威胁人数>1000人":
    41. type = "特大型";
    42. styleLabel = "xl";
    43. styleText = "xlText";
    44. break;
    45. case "威胁人数>100人":
    46. type = "大型";
    47. styleLabel = "l";
    48. styleText = "l";
    49. break;
    50. case "威胁人数>10人":
    51. type = "中型";
    52. styleLabel = "m";
    53. styleText = "m";
    54. break;
    55. case "威胁人数<10人":
    56. type = "小型";
    57. styleLabel = "s";
    58. styleText = "s";
    59. break;
    60. }
    61. return (
    62. "{" +
    63. styleText +
    64. "|" +
    65. params.name +
    66. "}"
    67. +
    68. "\n" +
    69. "{" +
    70. styleLabel +
    71. "|" +
    72. type +
    73. ": " +
    74. params.value +
    75. "处}"
    76. );
    77. },
    78. rich: {
    79. xlText: {
    80. color: "#8676F8",
    81. backgroundColor: "#ffffff"
    82. },
    83. xl: {
    84. color: "#FFFFFF",
    85. backgroundColor: "#8676F8",
    86. padding: [4, 4,2,4],
    87. borderRadius: 2,
    88. },
    89. l: {
    90. color: "#FFFFFF",
    91. backgroundColor: "#FA9DA6",
    92. padding: [4, 4,2,4],
    93. borderRadius: 2,
    94. },
    95. m: {
    96. color: "#FFFFFF",
    97. backgroundColor: "#3FE8BD",
    98. padding: [4, 4,2,4],
    99. borderRadius: 2,
    100. },
    101. s: {
    102. color: "#FFFFFF",
    103. backgroundColor: "#99CDFD",
    104. padding: [4, 4,2,4],
    105. borderRadius: 2,
    106. },
    107. },
    108. },
    109. },
    110. ],
    111. },