echarts实现标签云文字云效果代码

代码语言:html

所属分类:其他

代码描述:echarts实现标签云文字云效果代码

代码标签: echarts 标签云 文字云

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
</style>

 


</head>

<body>
  <div id='main'></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-4.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts-wordcloud2.min.js"></script>
      <script >
var chart = echarts.init(document.getElementById('main'));

var option = {
  tooltip: {},
  series: [{
    type: 'wordCloud',
    gridSize: 2,
    sizeRange: [12, 50],
    rotationRange: [-90, 90],
    // The shape of the "cloud" to draw. Can be any polar equation represented as a
    // callback function, or a keyword present. Available presents are circle (default),
    // cardioid (apple or heart shape curve, the most known polar equation), diamond (
    // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.
    // Shapes: pentagon, star, random-light, random-dark, circle, cardioid, diamond, triangle-forward, triangle, triangle-upright, apple, heart shape curve
    shape: 'apple',
    width: 600,
    height: 400,
    drawOutOfBound: true,
    textStyle: {
      normal: {
        color: function () {
          return 'rgb(' + [
          Math.round(Math.random() * 160),
          Math.round(Math.random() * 160),
          Math.round(Math.random() * 160)].
          join(',') + ')';
        } },

      emphasis: {
        shadowBlur: 10,
        shadowColor: '#333' } },


    data: [
    {
      name: 'Machine Learning',
      value: 10000,
      textStyle: {
        normal: {
          color: 'black' },

        emphasis: {
          color: 'red' } } },



    {
      name: 'Deep Learning',
      value: 6181 },

    {
      name: 'Computer Vision',
      value: 4386 },

    {
      name: 'Artificial Intelligence',
      value: 4055 },

    {
      name: 'Neural Network',
      value: 3500 },

    {
      name: 'Algorithm',
      value: 3333 },

    {
      name: 'Model',
      value: 2700 },

    {
      name: 'Supervised',
      value: 2500 },

    {
      name: 'Unsupervised',
      value: 2333 },

    {
      name: 'Natural Language Processing',
      value: 1900 },

    {
      name: 'Chatbot',
      value: 1800 },

    {
      name: 'Virtual Assistant&.........完整代码请登录后点击上方下载按钮下载查看

网友评论0