5分钟实现 Java 使用 HanLP提取关键词短语；Vue实现词云图，词云图自定义形状，关键词绑定事件。

捡星星同学

4513人浏览 · 2024-03-01 10:46:21

捡星星同学 · 2024-03-01 10:46:21 发布

1.Java使用HanLp提取关键词短语

首先HanLp是开源免费的，可以直接引入依赖

  <dependency>
            <groupId>com.hankcs</groupId>
            <artifactId>hanlp</artifactId>
            <version>portable-1.8.4</version>
  </dependency>

小伙伴们如果有兴趣可以查看官方文档，写的非常详细，我这里就是用的关键词提取的功能

示例代码如下：

String content = "世嘉：《索尼克：超级巨星》销量不佳与《马里奥惊奇》撞车有关";
List<String> keywordList = HanLP.extractKeyword(content, 2);
System.out.println(keywordList);

官方文档：

https://github.com/hankcs/HanLP/tree/1.x#14-%E5%85%B3%E9%94%AE%E8%AF%8D%E6%8F%90%E5%8F%96https://github.com/hankcs/HanLP/tree/1.x#14-%E5%85%B3%E9%94%AE%E8%AF%8D%E6%8F%90%E5%8F%96

2.Vue实现词云图

先看效果：

那么我们如何实现如上的词云图呢？直接上代码：

setWordChart = function (detail) {
    const that = this;
    if (that.$refs.wordChart) {
      // 如果已经初始化，则销毁图表实例
      echarts.dispose(this.$refs.wordChart);
    }
    // 获取 chart 元素
    const chartDom = that.$refs.wordChart;
    // 初始化 echarts
    const myChart = echarts.init(chartDom);
    //let data = Object.entries(detail).map(([name, value]) => ({name, value}));//这个detail就是你自己通过handlp获取到的关键词存储到了数据库，通过后端数据库查询到的值传过来来的，我这里是传了一个map回来，关键词和值的key-value形式
    // 示例数据
    let data = [
      { value: 60, name: '运量' },
      { value: 41, name: '延安路' },
      { value: 37, name: '公交' },
      { value: 35, name: '中运量' },
      { value: 15, name: '申昆路' },
      { value: 14, name: '路' },
      { value: 13, name: '上海' },
      { value: 11, name: '车道' },
      { value: 10, name: '电车' },
      { value: 10, name: '终点站' },
      { value: 9, name: '公交车' },
      { value: 9, name: '专用道' },
      { value: 9, name: '载客' },
      { value: 8, name: '无轨电车' },
      { value: 7, name: '开通' },
      { value: 7, name: '外滩' },
      { value: 7, name: '专用' },
      { value: 5, name: '线路' },
      { value: 5, name: '全文' },
      { value: 5, name: '延安东路' },
      { value: 4, name: '延安西路' },
      { value: 4, name: '试运行' },
      { value: 3, name: 'brt' },
      { value: 3, name: '高架' },
      { value: 3, name: '司机' },
      { value: 3, name: '运营' },
      { value: 3, name: '枢纽站' },
      { value: 2, name: '联调' },
      { value: 2, name: '区间' },
      { value: 2, name: '巴士' },
      { value: 2, name: '巨龙' },
      { value: 2, name: '中山东一路' },
      { value: 2, name: '车辆' },
      { value: 2, name: '虹桥' },
      { value: 2, name: '青平公路' },
      { value: 2, name: '乘坐' },
      { value: 2, name: '巨龙车' },
      { value: 2, name: '乘客' },
      { value: 2, name: '线网' },
      { value: 2, name: '通车' },
      { value: 2, name: '车站' },
      { value: 2, name: '去外滩' },
      { value: 2, name: '空载' },
      { value: 2, name: '尝鲜' },
      { value: 2, name: '红灯' },
      { value: 2, name: '体验' },
      { value: 2, name: '安东路外滩' },
      { value: 2, name: '试车' },
      { value: 2, name: '速递' },
      { value: 2, name: '站台' },
      { value: 2, name: '延安' },
      { value: 1, name: '西藏' },
      { value: 1, name: '客流' },
      { value: 1, name: '车厢' },
      { value: 1, name: '上海·七莘' },
      { value: 1, name: '长宁' },
      { value: 1, name: '恶臭' },
      { value: 1, name: '娄山关' },
      { value: 1, name: '天桥' },
      { value: 1, name: '红绿灯' },
      { value: 1, name: '正式' },
      { value: 1, name: '路权' },
      { value: 1, name: '新片' },
      { value: 1, name: '视频' },
      { value: 1, name: '头班车' },
      { value: 1, name: '中路' },
      { value: 1, name: '北路站' },
      { value: 1, name: '传说' },
      { value: 1, name: '小时' },
      { value: 1, name: '路试' },
      { value: 1, name: '单程' },
      { value: 1, name: '路上' },
      { value: 1, name: '拥堵' },
      { value: 1, name: '启用' },
      { value: 1, name: '换乘' },
      { value: 1, name: '调试' },
      { value: 1, name: '中门' },
      { value: 1, name: '凯旋路' },
      { value: 1, name: '候车' },
      { value: 1, name: '双流路' },
      { value: 1, name: '上班' },
      { value: 1, name: '天山路' },
      { value: 1, name: '交通委' },
      { value: 1, name: '市民' },
      { value: 1, name: '发车' },
      { value: 1, name: '上车' },
      { value: 1, name: '开车' },
      { value: 1, name: '驾驶员' },
      { value: 1, name: '路线' },
      { value: 1, name: '样车' },
      { value: 1, name: '华山路' },
      { value: 1, name: '缩线' },
      { value: 1, name: '铰接' },
      { value: 1, name: '马路' },
      { value: 1, name: '凑热闹' },
      { value: 1, name: '高峰' },
      { value: 1, name: '中路站' },
      { value: 1, name: '你好' },
      { value: 1, name: '外滩站' }
    ]
    //因为这里我采用了自定义形状的方式，数据太少，展示不出具体的形状，所以我就把数据扩大了，大家可以结合自身业务情况选择用不用自定义形状
    data = [...data,...data,...data,...data]
 //词云图自定义形状   
const maskImage = new Image();
  //五角星形状 图片可以转Base64，也可以你引入到的项目中直接获取
maskImage.src='data:image/png;base64,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'
    //爱心形状 //maskImage.src='data:image/png;base64,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'

    // 配置项
    const option = {
      series: [{
        type: 'wordCloud',
        shape: 'roundRect',
        maskImage: maskImage,
        sizeRange: [10, 30],//设置关键词字体大小
        rotationRange: [0, 0],
        rotationStep: 45,
        gridSize: 10,//设置间隔距离
        drawOutOfBound: false,
        data: data,
        height:'100%',//这里你如果使用自定义的形状，必须保证你的高度足够和宽度足够
        width:'100%',
        textStyle: {
          color: function() {
            // Random color
            return 'rgb(' + [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160)
            ].join(',') + ')'
          }
        },
        emphasis: {
          focus: 'self', // 设置词云图的 emphasis 样式
          textStyle: {
            shadowBlur: 10,
            shadowColor: '#333'
          },
        }
      }],
    };
    // 设置图表配置项
    maskImage.onload =function (){
      myChart.setOption(option);
    }
    myChart.on('click', function (params) {
      that.keyword = params.data.name
      that.doSearch()
    });
  }

注意事项：

1.要使用echats的词云图，需要先前端下载 echarts-wordcloud，下载方式 npm install echarts-wordcloud；

2.小伙伴如果要自己找另外的形状，可以去阿里巴巴矢量图标库里面找，直接下载为png的图片就好了，但是我建议最好不要用线性的图标，因为线性的图可能很难出现你需要的效果，就是页面上不报错，词云图就是一片白板，其实是出现了，但是跟图标形状有关，有的词直接就超出你的范围，就看不到了，我建议用填充（filling）的矢量图，图标库链接如下：

iconfont-阿里巴巴矢量图标库https://www.iconfont.cn/search/index?searchType=icon&q=%E5%BF%83&page=1&fromCollection=-1&tag=fill

3. 图片下载好了之后，可以有两个选择

1.图片转Base64,可以去这个转化网站，进行转化，链接如下：base64图片在线转换工具 - 站长工具 (chinaz.com)https://tool.chinaz.com/tools/imgtobase/

然后复制转化出来的链接，maskImage.src='你转化出来的链接'

2.如果不想转Base64也是可以的，直接把图片放到你的项目的某个资源包下面，然后获取地址，比如 maskImage.src= require('./image/star.png')，最好用上require，不然有可能你是获取不到那个图片的。

4.词云图里面的每个关键词是可以绑定点击事件的，我这里就绑定了一个事件，用来查询与关键词相关的数据，代码如下：

myChart.on('click', function (params) {
      that.keyword = params.data.name
      that.doSearch()
    });

这里要注意的是你当前如果直接使用this的话，是调用不到你外面的其他方法的，你需要指定最开始的this，所以我在最上面定义了 const that = this，这样通过that.方法名()就可以调用啦。

总结：通过如上的操作就可以实现我们上面的效果啦，希望能帮到各位小伙伴！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^