echarts图表——词云&布局、操作、效果

二十一.词云

词云图由词汇组成类似云的彩色图形，用于展示大量文本数据。例如，制作用户画像，对用户进行聚类，实现精细化营销。多用于描述网站上的关键字（即标签），或可视化自由格式文本，可以对比文字的重大程度。
词云是基于echarts的扩展，需要另外引入扩展插件:npm i echarts-wordcloud
https://github.com/ecomfe/echarts-wordcloud

            var option = {
                tooltip: {},
                series: [ {
                    type:  wordCloud ,
                    gridSize: 2,
                    sizeRange: [12, 50],
                    rotationRange: [-90, 90],
                    shape:  pentagon ,
                    width: 600,
                    height: 400,
                    drawOutOfBound: true,
                    textStyle: {
                        color: function () {
                            return  rgb(  + [
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160)
                            ].join( , ) +  ) ;
                        }
                    },
                    emphasis: {
                        textStyle: {
                            shadowBlur: 10,
                            shadowColor:  #333 
                        }
                    },
                    data: [
                        {
                            name:  Sam S Club ,
                            value: 10000,
                            textStyle: {
                                color:  black 
                            },
                            emphasis: {
                                textStyle: {
                                    color:  red 
                                }
                            }
                        },
                        {
                            name:  Macys ,
                            value: 6181
                        },
                        {
                            name:  Amy Schumer ,
                            value: 4386
                        },
                        {
                            name:  Jurassic World ,
                            value: 4055
                        },
                        {
                            name:  Charter Communications ,
                            value: 2467
                        },
                        {
                            name:  Chick Fil A ,
                            value: 2244
                        },
                        {
                            name:  Planet Fitness ,
                            value: 1898
                        },
                        {
                            name:  Pitch Perfect ,
                            value: 1484
                        },
                        {
                            name:  Express ,
                            value: 1112
                        },
                        {
                            name:  Home ,
                            value: 965
                        },
                        {
                            name:  Point Break ,
                            value: 265
                        }
                    ]
                } ]
            };

二十二.布局、操作、效果

数据集
ECharts 使用 dataset 管理数据。
dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。

    dataset: {
      source: [
        [ product ,  2012 ,  2013 ,  2014 ,  2015 ,  2016 ,  2017 ],
        [ Milk Tea , 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
        [ Matcha Latte , 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
        [ Cheese Cocoa , 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
        [ Walnut Brownie , 25.2, 37.1, 41.2, 18, 33.9, 49.1]
      ]
    },

富文本
利用富文本样式，可以在标签中做出超级丰富的效果。

label: {
        rich: {
          a: {
            color:  #6E7079 ,
            lineHeight: 22,
            align:  center 
          },
          hr: {
            borderColor:  #8C8D8E ,
            width:  100% ,
            borderWidth: 1,
            height: 0
          },
          b: {
            color:  #4C5058 ,
            fontSize: 14,
            fontWeight:  bold ,
            lineHeight: 33
          },
          per: {
            color:  #fff ,
            backgroundColor:  #4C5058 ,
            padding: [3, 4],
            borderRadius: 4
          }
        }
      },

缩放
dataZoom 组件用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
目前支持这几种类型的 dataZoom 组件：

内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。
框选型数据区域缩放组件（dataZoomSelect）：提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在 toolbox 中。

  dataZoom: [
    {
      type:  inside ,
      start: 0,
      end: 10
    },
    {
      start: 0,
      end: 10
    }
  ],

拖拽
目前这个功能被认为不具备通用性，开发者要实现这个功能就要使用 API ，这样做的好处是能够让开发者按自己的需要进行设置。

  myChart.setOption({
    graphic: data.map(function (item, dataIndex) {
      return {
        type:  circle ,
        position: myChart.convertToPixel( grid , item),
        shape: {
          cx: 0,
          cy: 0,
          r: symbolSize / 2
        },
        invisible: true,
        draggable: true,
        ondrag: function (dx, dy) {
          onPointDragging(dataIndex, [this.x, this.y]);
        },
        onmousemove: function () {
          showTooltip(dataIndex);
        },
        onmouseout: function () {
          hideTooltip(dataIndex);
        },
        z: 100
      };
    })
  });

function onPointDragging(dataIndex, pos) {
  data[dataIndex] = myChart.convertFromPixel( grid , pos);
  // Update data
  myChart.setOption({
    series: [
      {
        id:  a ,
        data: data
      }
    ]
  });
}