饼图 - 图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.       },