请问可以支持单个词的点击事件吗

[mxdyyt1314]

我看 wordcloud2.js中有支持click事件，echarts-wordcloud中有支持到吗，我试了click属性貌似不可以

[arika163]

遇到了同样的问题，似乎echarts-wordcloud最后给出的canvas并不是wordcloud2绘制的，所以尝试修改源代码把click传进去也行不通，希望官方可以支持这项功能

[wbpmrck]

这个问题解决了吗

[hongzelin]

我这边没有问题；附上代码

import React from "react";
// import { Card } from "antd";
import echarts from "echarts";
import "echarts-wordcloud";
import { connect } from "dva";
import wordcloudIcon from "assets/wordcloud.svg";
import CardTitle from "components/CardTitle";

import { mapStateToProps, mapDispatchToProps } from "./MapProps";
import styles from "./styles.less";

const data = (() => {
  const res = [];
  for (let i = 0; i < 100; i += 1) {
    res.push({
      name: `热词${Math.round(Math.random() * 100) + 1}`,
      value: Math.round(Math.random() * 100) + 1,
    });
  }
  return res;
})();
class WordCloud extends React.Component {
  constructor(props) {
    super(props);
    this.ele = React.createRef();
  }

  componentDidMount() {
    this.initOptions();
  }

  initOptions() {
    const chart = echarts.init(this.ele);
    chart.setOption({
      series: [
        {
          type: "wordCloud",
          name: "热点词云",
          gridSize: 29,
          sizeRange: [9, 29],
          rotationRange: [0, 0],
          shape: "circle",
          autoSize: {
            enable: true,
            minSize: 13,
          },
          textStyle: {
            normal: {
              fontFamily: '微软雅黑',
              color: () => {
                const color = ["#0C92FF", "#333330", "#018CFF", "#6ADEFF"]
                return color[Math.round(Math.random() * 3 + 0)];
              },
            },
          },
          data,
        },
      ],
    });

    // 关键代码
    chart.on('click', (param) => {
      // eslint-disable-next-line
      console.log(param);
    });
    window.addEventListener("resize", () => {
      chart.resize();
    });
  }

  render() {
    const { count } = this.props;
    return (
      <div className={styles.root}>
        <div className={styles.card}>
          <CardTitle icon={wordcloudIcon} title="热点词云" count={count} />
        </div>
        <div
          ref={e => {
            if (e) {
              this.ele = e;
            }
          }}
          className={styles.wordcloud}
        />

      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(WordCloud);

[wang3852]

谢谢 解决了

[youisbaby]

@hongzelin 正解