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

站长

2024年07月13日 08:50 · 阅读数 14

我想要设置不同学历的人数不同颜色（如图红色框里的人数），不知道如何设置？

例如博士研究生人数的颜色为(#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"
      }
    }
  ],
}

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

1个回答

test

2024-07-13

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"
      }
    }
  ],
}

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容