echarts词云设置分段颜色

先贴下版本："echarts": "^5.2.0", "echarts-for-react": "^3.0.1", "echarts-wordcloud": "^2.0.0" 需要注意的是：echarts-wordcloud@2 is for echarts@5 echarts-wordcloud@1 is for echarts@4

大部分词云的demo中，都是随机色，直接在textStyle下的color函数里面设置即可（见下面注释代码）。我的需求是展示top10数据，字体颜色透明度从深到浅。那就需要visualMap分段型视觉映射组件来辅助，渲染出来的图例我贴在下面，可通过设置show: false来隐藏。详细配置见：echarts.apache.org/zh/option.h…

const getWordCloudOpt = () => {
   const data = [
    { name: '疾病名称1', value: 1000 },
    { name: '疾病名称2', value: 900 },
    { name: '疾病名称3', value: 800 },
    { name: '疾病名称4', value: 700 },
    { name: '疾病名称5', value: 600 },
    { name: '疾病名称6', value: 500 },
    { name: '疾病名称7', value: 400 },
    { name: '疾病名称8', value: 300 },
    { name: '疾病名称9', value: 200 },
    { name: '疾病名称10', value: 100 }
  ];

  const nums = data.map((item) => item.value);
  const min = Math.min(...nums);
  const max = Math.max(...nums);
  const color = [
    'rgba(255,255,255,1)',
    'rgba(255,255,255,0.8)',
    'rgba(255,255,255,0.7)',
    'rgba(255,255,255,0.6)',
    'rgba(255,255,255,0.5)',
    'rgba(255,255,255,0.4)'
  ];

  return {
     visualMap: {
      type: 'piecewise',
      show: false, // 如果设置为 false，不会显示，但是数据映射的功能还存在
      min,
      max,
      splitNumber: 6, // 6个颜色，所以分成6段
      color
    },
    series: [
      {
        type: 'wordCloud',
        shape: 'square',
        sizeRange: [calFontSize(16), calFontSize(48)],
        drawOutOfBound: true, // 默认超出不显示
        // textStyle: {
        //   color: function(e) {
        //     return color[e.dataIndex % 6];
        //   }
        // },
        data
      }
    ]
  };
};

export default getWordCloudOpt;

结束啦。