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

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%96icon-default.png?t=N7T8https://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-阿里巴巴矢量图标库icon-default.png?t=N7T8https://www.iconfont.cn/search/index?searchType=icon&q=%E5%BF%83&page=1&fromCollection=-1&tag=fill

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

        1.图片转Base64,可以去这个转化网站,进行转化,链接如下:base64图片在线转换工具 - 站长工具 (chinaz.com)icon-default.png?t=N7T8https://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.方法名()就可以调用啦。

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

  • 20
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue实现复杂自定义覆盖物可以使用百度地图API中提供的Overlay类和自定义覆盖物。自定义覆盖物是指在地图上添加自己的DOM元素,可以通过DOM元素来实现自己的样式和交互效果。 下面是在Vue实现复杂自定义覆盖物的步骤: 1. 安装vue-baidu-map 在终端中运行以下命令来安装vue-baidu-map: ``` npm install vue-baidu-map --save ``` 2. 注册vue-baidu-map组件 在Vue组件中注册vue-baidu-map组件: ``` import BaiduMap from 'vue-baidu-map' export default { components: { BaiduMap } } ``` 3. 在模板中添加地图 在模板中添加vue-baidu-map标签,并设置地图的中心点和缩放级别: ``` <template> <div> <BaiduMap :center="center" :zoom="zoom"></BaiduMap> </div> </template> <script> export default { data() { return { center: {lng: 116.404, lat: 39.915}, zoom: 15 } } } </script> ``` 4. 创建自定义覆盖物 在Vue组件的mounted()生命周期函数中,创建自定义覆盖物: ``` mounted() { const map = this.$refs.baiduMap.getBMap() const BMap = window.BMap const CustomOverlay = function(point, options) { this._point = point this._options = options } CustomOverlay.prototype = new BMap.Overlay() CustomOverlay.prototype.initialize = function(map) { this._map = map const div = document.createElement('div') div.style.position = 'absolute' div.style.width = '100px' div.style.height = '100px' div.style.background = '#fff' div.style.borderRadius = '50%' div.style.boxShadow = '0 0 15px rgba(0, 0, 0, 0.3)' div.style.cursor = 'pointer' div.innerHTML = '<span>自定义覆盖物</span>' div.addEventListener('click', () => { console.log('自定义覆盖物被点击了') }) map.getPanes().labelPane.appendChild(div) this._div = div return div } CustomOverlay.prototype.draw = function() { const pixel = this._map.pointToOverlayPixel(this._point) this._div.style.left = pixel.x - 50 + 'px' this._div.style.top = pixel.y - 50 + 'px' } const point = new BMap.Point(116.404, 39.915) const myOverlay = new CustomOverlay(point) map.addOverlay(myOverlay) } ``` 在上面的代码中,我们创建了一个CustomOverlay类,它继承了BMap.Overlay类,用于创建自定义覆盖物。在CustomOverlay类的initialize方法中,我们创建了一个DIV元素,并设置了DIV元素的样式和内容。我们将DIV元素添加到地图的labelPane层中,这样它就可以显示在其他标注之上了。在CustomOverlay类的draw方法中,我们将DIV元素的位置设置为自定义覆盖物的位置。 5. 添加CSS样式 最后,我们需要添加CSS样式来定义自定义覆盖物的样式: ``` <style> .custom-overlay { position: absolute; width: 100px; height: 100px; background: #fff; border-radius: 50%; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); cursor: pointer; } </style> ``` 在上面的代码中,我们定义了".custom-overlay"类来设置自定义覆盖物的样式。 这样就可以在Vue实现复杂自定义覆盖物了。可以根据需要修改CustomOverlay类的实现,来实现更复杂的自定义覆盖物。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值