Taro React使用echarts 词云

Taro React使用echarts 词云

组件网址

echarts-wordcloud
echarts-for-react

安装组件和配置

npm install echarts
npm install echarts-wordcloud
npm install --save echarts-for-react

引用

import ReactEcharts from 'echarts-for-react';
import * as echarts from "echarts";
import "echarts-wordcloud";

使用方法

class wordcloud extends Component {
  wordOption(){
  
    let wordData = [
      {
        name: "游戏",
        value: 4220000
      },
      {
        name: "美食",
        value: 16681
      },
      {
        name: "衣服",
        value: 4386
      },
      {
        name: "鞋子",
        value: 222055
      },
      {
        name: "零食",
        value: 233467
      },
      {
        name: "化妆品",
        value: 66662244
      },
      {
        name: "吃货",
        value: 18298
      },
      {
        name: "美食家",
        value: 1488884
      },
      {
        name: "程序猿",
        value: 999999999
      },
      {
        name: "肝帝",
        value: 182298
      },
      {
        name: "老师",
        value: 144884
      },
      {
        name: "宠物",
        value: 15622355
      }
    ]

    let option = {
      backgroundColor: "#fff",
      tooltip: {
        pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
      },
      series: [
        {
          type: "wordCloud",
          gridSize: 1,
          sizeRange: [12, 55],
          rotationRange: [-45, 0, 45, 90],
          textStyle: {
            normal: {
              color: function () {
                return (
                  "rgb(" +
                  Math.round(Math.random() * 255) +
                  ", " +
                  Math.round(Math.random() * 255) +
                  ", " +
                  Math.round(Math.random() * 255) +
                  ")"
                );
              }
            }
          },
          left: "center",
          top: "center",
          right: null,
          bottom: null,
          width: "90%",
          height: "110%",
          data: wordData
        }
      ]
    };
    return option;
  };

  render() {
  
    return (
       <View className='word-chart'>
                <ReactEcharts
                  option={this.wordOption()}
                  theme='ThemeStyle'
                />
       </View>)}
}