在项目中,有时我们需要实现出字符云的特效,如下:
19.jpg

1. 引入相关js

<script src="js/echarts-wordcloud.js"></script>

2. 核心代码:

var myChart = echarts.init(document.getElementById('main'))
var option = {
  tooltip: {},
  series: [
    {
      type: 'wordCloud',
      gridSize: 2,
      sizeRange: [12, 100], // 大小
      rotationRange: [-90, 90], // 旋转角度范围
      shape: 'pentagon',
      width: 400,
      height: 600,
      drawOutOfBound: true,
      textStyle: {
        normal: {
          color: function () {
            return (
              'rgb(' +
              [
                Math.round(Math.random() * 255),
                Math.round(Math.random() * 255),
                Math.round(Math.random() * 255)
              ].join(',') +
              ')'
            )
          }
        },
        emphasis: {
          shadowBlur: 10,
          shadowColor: '#333'
        }
      },
      //数据
      data: [
        { name: '好', value: '756' },
        { name: '好好学习', value: '701' },
        { name: '天天向上', value: '622' },
        { name: 'HTML', value: '579' },
        { name: '哈哈哈', value: '525' },
        { name: 'CSS3', value: '479' },
        { name: '今天天气很好', value: '443' },
        { name: '搞笑啊', value: '386' },
        { name: '可口可乐', value: '171' },
        { name: '哈哈哈哈哈', value: '136' },
        { name: 'VUE', value: '38' },
        { name: '好', value: '756' },
        { name: '好好学习', value: '701' },
        { name: '天天向上', value: '622' },
        { name: 'HTML', value: '579' },
        { name: '哈哈哈', value: '525' },
        { name: 'CSS3', value: '479' },
        { name: '今天天气很好', value: '443' },
        { name: '搞笑啊', value: '386' },
        { name: '可口可乐', value: '171' },
        { name: '哈哈哈哈哈', value: '136' },
        { name: 'VUE', value: '38' }
      ]
    }
  ]
}
myChart.setOption(option)
window.resize = myChart.resize

3. 总结

  • echarts的使用
  • 字符云的效果实现