关于 Echarts formatter rich 字体颜色配置问题?

新手上路,请多包涵

我想要设置不同学历的人数不同颜色(如图红色框里的人数),不知道如何设置?

例如
博士研究生 人数的颜色为(#40A6FF)
硕士研究生 人数的颜色为(#68D968)
大学本科 人数的颜色为(#FCCE61)
...

option = {
  "radar": {
    "name": {
      formatter: function (value, indicator) {
         var arr = value.split('\n');
         var num = arr[0];
         var text = arr[1];
         return `{a|${num}}\n{b|${text}}`;
      },
      rich: {
          a: {
            fontSize: "16",
            fontWeight: "900",
            textAlign: "center",
            "color": "#666",
          },
          b: {
            fontSize: "14",
            color: "#666"
          }
        }
    },
    
    "indicator": [
      {
        "name": "20人\n博士研究生",
        "max": 84
      },
      {
        "name": "22人\n硕士研究生",
        "max": 84
      },
      {
        "name": "80人\n大学本科",
        "max": 84
      },
      {
        "name": "70人\n大学专科",
        "max": 84
      },
      {
        "name": "20人\n高中",
        "max": 84
      },
      {
        "name": "8人\n离职",
        "max": 84
      },
      {
        "name": "10人\n初中及以下",
        "max": 84
      }
    ],
    "splitLine": "false",
    "axisLine": {
      "symbol": [
        "none",
        "arrow"
      ],
      "symbolSize": [
        "10",
        "15"
      ],
      "lineStyle": {
        "color": "#108CEE"
      }
    },
    "splitArea": {
      "areaStyle": {
        "color": [
          "#0D47A1",
          "#1E88E5",
          "#64B5F6",
          "#BBDEFB",
          "#E3F2FD"
        ]
      }
    }
  },
  "series": [
    {
      "name": "",
      "type": "radar",
      "data": [
        [
          "20",
          "22",
          "80",
          "70",
          "20",
          "8",
          "10"
        ]
      ],
      "symbolSize": 10,
      "itemStyle": {
        "borderColor": "#08DAAA",
        "borderWidth": "2"
      },
      "lineStyle": {
        "color": "#08DAAA"
      },
      "areaStyle": {
        "color": "#00FFCF",
        "opacity": "0.5"
      },
      "label": {
        "show": false,
        "color": "#fff"
      }
    }
  ],
}


阅读 2.2k
1 个回答
option = {
  "radar": {
    "name": {
      formatter: function (value, indicator) {
         var arr = value.split('\n');
         var num = arr[0];
         var text = arr[1];
         return `{a|${num}}\n{b|${text}}`;
      },
      rich: {
          a: {
            fontSize: "16",
            fontWeight: "900",
            textAlign: "center",
          
          },
          b: {
            fontSize: "14",
      
          }
        }
    },
    
   "indicator": [
      {
        "name": "20人\n博士研究生",
        "max": 84,
          "color":  '#40A6FF'
      },
      {
        "name": "22人\n硕士研究生",
        "max": 84,
         "color": '#68D968'
      },
      {
        "name": "80人\n大学本科",
        "max": 84,
          "color":'yellow'
      },
      {
        "name": "70人\n大学专科",
        "max": 84,
          "color":'red'
      },
      {
        "name": "20人\n高中",
        "max": 84,
          "color":'red'
      },
      {
        "name": "8人\n离职",
        "max": 84,
          "color":'red'
      },
      {
        "name": "10人\n初中及以下",
        "max": 84,
          "color":'red'
      }
    ],
    "splitLine": "false",
    "axisLine": {
      "symbol": [
        "none",
        "arrow"
      ],
      "symbolSize": [
        "10",
        "15"
      ],
      "lineStyle": {
        "color": "#108CEE"
      }
    },
    "splitArea": {
      "areaStyle": {
        "color": [
          "#0D47A1",
          "#1E88E5",
          "#64B5F6",
          "#BBDEFB",
          "#E3F2FD"
        ]
      }
    }
  },
  "series": [
    {
      "name": "",
      "type": "radar",
      "data": [
        [
          "20",
          "22",
          "80",
          "70",
          "20",
          "8",
          "10"
        ]
      ],
      "symbolSize": 10,
      "itemStyle": {
        "borderColor": "#08DAAA",
        "borderWidth": "2"
      },
      "lineStyle": {
        "color": "#08DAAA"
      },
      "areaStyle": {
        "color": "#00FFCF",
        "opacity": "0.5"
      },
      "label": {
        "show": false,
        "color": "#fff"
      }
    }
  ],
}


撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题