echarts使用echarts-wordcloud词云字体颜色不生效问题解决

本文介绍: echarts 使用 echarts–wordcloud 词云自定义字体颜色不生效问题解决

使用版本

“echarts“: “~4.2.1”,

“echarts–wordcloud“: “^1.1.3”,

注意：echarts 5.x版本要对应echarts–wordcloud 2.x版本，echarts 4.x版本要对应echarts–word cloud 1.x版本。

代码：

const mockData = [
  { name: '微信', value: 1 },
  { name: '南方+', value: 1045 },
  { name: '东莞时间网', value: 834 },
  { name: '东莞', value: 804 },
  { name: '新浪微博', value: 532 },
  { name: '今日头条', value: 493 },
  { name: '腾讯新闻', value: 479 },
  { name: '东莞阳光网', value: 387 },
  { name: '东莞日报', value: 289 },
  { name: '一点资讯', value: 287 },
  { name: '东方头条网', value: 233 },
  { name: '南方都市报', value: 228 },
  { name: '新粤网', value: 207 },
  { name: '南方plus', value: 206 },
  { name: '网易新闻', value: 201 },
  { name: '东方头条', value: 180 },
  { name: '趣头条', value: 178 },
  { name: '羊城派', value: 151 },
  { name: '东莞时报', value: 143 }
];

一开始的写法：

options = {
    color: ['yellow', '#00eff6', '#0098ff', '#ff4f78'],
    series: [{
      sizeRange: [20, 52.42],
      size: ['100%', '100%'], // 设置显示的字云图的大小
      rotationRange: [0, 0], // 设置文字倾斜角度
      textPadding: 30, // 设置文字之间的间距
      type: 'wordCloud',
      shape: 'pentagon',// 词云形状，默认circle(圆形)，cardioid（心形）、diamond（菱形 正方形）、triangle-forward、triangle（三角形）、star（星形）、pentagon （五边形）；
      gridSize: 20,
      data
    }]
}

效果

却………..只显示了第一个的颜色—————————————————————————————

正确 写法：

options = {
    series: [{
      sizeRange: [20, 52.42],
      size: ['100%', '100%'], // 设置显示的字云图的大小
      rotationRange: [0, 0], // 设置文字倾斜角度
      textPadding: 30, // 设置文字之间的间距
      type: 'wordCloud',
      shape: 'pentagon',// 词云形状，默认circle(圆形)，cardioid（心形）、diamond（菱形 正方形）、triangle-forward、triangle（三角形）、star（星形）、pentagon （五边形）；
      gridSize: 20,
      textStyle: {
        normal: {
          fontFamily: '微软雅黑',
          // fontWeight: 'bold',
          color: function() {
            // Random color
            return 'rgb(' + [
              Math.round(Math.random() * 200),
              Math.round(Math.random() * 250),
              Math.round(Math.random() * 250)
            ].join(',') + ')';
          }
        }
      },
      data
    }]
}

最终效果：

———————————————————-完美分割线——————————————————–

踩雷总结：

注意，新版本的echarts 设置 textStyle不需要写在normal 里面了，也就是将对文本的设置直接写在textStyle里：

textStyle: {
       fontFamily: '微软雅黑',
          // fontWeight: 'bold',
          color: function() {
            // Random color
            return 'rgb(' + [
              Math.round(Math.random() * 200),
              Math.round(Math.random() * 250),
              Math.round(Math.random() * 250)
            ].join(',') + ')';
          }
      },