echarts詞雲

 

 

   echarts詞雲對版本有要求，
   echarts版本：4.9及以下（包括4.9）

   echarts-wordcloud：2.0以下（不包括2.0）

<div id="echarts"></div>
<style>
   #echarts{
     width:800px;
     height:600px;
  }
</style>

drawCloud() {

  let myChart = echarts.init(document.getElementById('echarts'));
  let data=[

　　{ value: 100, name: "文字" },
　　{ value: 400, name: "圖片" },
　　{ value: 333, name: "參考" },
　　{ value: 855, name: "音視頻" },
　　{ value: 343, name: "新媒體" },
　　{ value: 343, name: "測試1" },
　　{ value: 43, name: "測試2" },
　　{ value: 543, name: "測試3" },
　　{ value: 333, name: "測試4" },
　　{ value: 323, name: "測試5" },
　　{ value: 33, name: "測試6" },
　　{ value: 13, name: "測試7" },
　　{ value: 543, name: "測試8" },
　　{ value: 66, name: "測試9" },
　　{ value: 666, name: "測試10" },

 ]

  // // 隨機顏色
  let randcolor = () => {
    let r = 100 + ~~(Math.random() * 100);
    let g = 135 + ~~(Math.random() * 100);
    let b = 100 + ~~(Math.random() * 100);
    return `rgb(${r}, ${g}, ${b})`
  }
  const option = {
    backgroundColor:'#ebebeb',
    tooltip: {
      trigger: 'item',
      padding: [10, 15],
      textStyle: {
        fontSize: 20
      },
      formatter: params => {
        const { name, value } = params
        return `
              平台：${name} <br/>
              數量：${value}
          `
      }
    },
    series: [{
      type: 'wordCloud',
      gridSize: 20,
      sizeRange: [12, 50],
      rotationRange: [0, 0],
      shape: 'circle',
      textStyle: {
        normal: {
          color:randcolor,
          // color: function() {
          //   return (
          //     'rgb(' + [
          //       Math.round(Math.random() * 500),
          //       Math.round(Math.random() * 300),
          //       Math.round(Math.random() * 200)
          //     ].join(',') +
          //     ')'
          //   )
          // }
        },
        emphasis: {
          shadowBlur: 10,
          shadowColor: '#ccc'
        }
      },
      data: data
    }]
  };
  myChart.setOption(option);
},