首页 前端知识 echarts使用echarts-wordcloud词云 字体颜色不生效问题解决

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

2024-08-10 22:08:52 前端知识 前端哥 804 186 我要收藏

使用版本

        "echarts": "~4.2.1",

        "echarts-wordcloud": "^1.1.3",

注意:echarts 5.x版本要对应echarts-wordcloud 2.x版本,echarts 4.x版本要对应echarts-wordcloud 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
    }]
}

 最终效果:

----------------------------------------------------------完美分割线--------------------------------------------------------

踩雷总结:

  1. 注意,新版本的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(',') + ')';
              }
          },
  2. echarts-world词云形状shape,默认circle(圆形),cardioid(心形)、diamond(菱形 正方形)、triangle-forward、triangle(三角形)、star(星形)、pentagon (五边形);

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15233.html
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!