echarts 词云图

        实际上是基于echarts散点图实现的,并非真正的词云图(有轮廓形状)。适用于词语较少的情况,其中字体的大小和颜色,也可以根据提供的类别value值自行设置(本文代码是写死的)。

option = {
    grid: {
      left: '10%',
      top: 5,
      right: '10%',
      bottom: 5,
    },
    itemStyle: {
      color: 'rgba(255,255,255,0)',
    },
    tooltip: {
      show: true,
      trigger: 'item',
    },
    series: [
      {
        type: 'graph',
        layout: 'force', //引导布局
        label: {
          show: true,
          color: 'auto',
        },
        data: [{ name: '年久失修', size: 18, color: '#3B8BFF', x: 60, y: 32 },
        { name: 'xxx1', size: 16, color: '#70aeb4', x: 30, y: 50 },
        { name: '开发过度', size: 18, color: '#3059F7', x: 50, y: 80 },
        { name: 'xxx2', size: 14, color: '#559399', x: 104, y: 86 },
        { name: '泥头车过重', size: 22, color: '#B4FFFC', x: 90, y: 54 },
        { name: '地形原因', size: 17, color: '#C36D6D', x: 120, y: 70 },
        { name: '天气原因', size: 16, color: '#77BFFF', x: 164, y: 48 },
        { name: 'xxx3', size: 16, color: '#3059F7', x: 174, y: 75 },
        { name: '质量管控', size: 20, color: '#FCD67A', x: 156, y: 30 },
        { name: 'xxx4', size: 15, color: '#3059F7', x: 112, y: 24 }].map((item) => ({
          name: item.name,
          //   draggable: false,
          itemStyle: {
            color: 'rgba(255,255,255,0)',
          },
          value: item.val,
          x: item.x,
          y: item.y,
          fixed: true,
          label: {
            color: item.color,
            fontSize: item.size,
          },
        })),
      },
    ],
  };

echarts 词云图_第1张图片

 

你可能感兴趣的:(前端随笔,echarts,javascript,react.js)