echatrs词云图绘制成世界地图的形状

这是我选择的形状图片

1.检查 echarts-wordcloud版本号

首先，安装echarts和echarts-wordcloud
官网看到的说：echarts5.0.0+搭配wordcloud2.0.0+的版本才可以；不然会报错；我改了对应的但是还是不行；最后试了好多版本；
下面这个才对应上不报错
"echarts": "^4.9.0", "echarts-wordcloud": "^1.1.3",

2.定义一个div

 <divref="chartLine"style="width: 90%; height: 600px; margin: 0 auto"v-loading="chartLine.loading"class="chartLine"></div>

3.挑选图片形状

选择你想要做的形状；在线转化base64，复制代码

4.获取数据掉接口

 async initLineChart(c) {const res = await topicTendByYear({ year: c });let lineData = [];lineData = res.data.map((item) => {return {name: item.name,value: item.counts,year: item.year,};});this.chartLine.loading = false;this.$nextTick(() => {this.chartLine.line = echarts.init(this.$refs["chartLine"]);});this.initData(lineData);},

5.渲染词云图（要配置图片base64）

有一些配置可以自己修改

    initData(data) {//在这里添加图片base64的路径let img ='base64'var maskImage = new Image();maskImage.src = img;var chart = echarts.init(this.$refs["chartLine"]);maskImage.onload = () => {chart.setOption({title: {x: "center",textStyle: {fontSize: 23,},},tooltip: {show: true,},series: [{name: "话题名称", //数据提示窗标题type: "wordCloud",sizeRange: [5, 15], //画布范围，如果设置太大会出现少词（溢出屏幕）rotationRange: [-45, 0, 45, 90], //数据翻转范围//shape: 'circle',maskImage: maskImage,autoSize: {enable: true,minSize: 8,},sizeRange: [8, 60],gridSize: 0,rotationStep: 45,left: "center",top: "center",width: "100%",height: "100%",right: null,bottom: null,textStyle: {normal: {color: function () {return ("rgb(" +[Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160),].join(",") +")");},},emphasis: {shadowBlur: 10,shadowColor: "#333",},},data: data,},],});window.onresize = chart.resize;//添加点击事件,获取自定义属性chart.on("click", (params) => {this.$router.push({path: "/topic",query: { name: params.data.name ,year:params.data.year},});});};},

6.给每个元素点击事件

 //添加点击事件,获取自定义属性chart.on("click", (params) => {this.$router.push({path: "/topic",query: { name: params.data.name ,year:params.data.year},});});

我这里是跳转页面

echarts的词云图相关推荐

使用echarts做词云图
使用echarts做词云图,可以将词云图插入到HTML页面中,不像pyecharts只能生成一个独立的HTML页面,更不像wordcloud生成一张图片. 使用echarts可以实现词云(文字云) 网 ...
Echarts词云图
水果店词云图 <!DOCTYPE html> <html> <head><meta charset="utf-8"><titl ...
vue实现词云图（echarts/Highcharts）
vue实现词云图 1.echarts实现安装注意版本 echarts-wordcloud@2 is for echarts@5 echarts-wordcloud@1 is for echarts ...
echarts 词云图使用 + vue
介绍根据自己定义Echarts词云图背景图,词云图可方便的对词组进行可视化的显示. 效果图一安装 npm install echarts-wordcloud 注意Echarts5.0的版本要对应 ...
echarts绘制各种图表(柱形、折线、柱形、饼图、南丁格尔、环形、中国地图散点图、百度地图散点图、词云图)
文末附带github本文所有源代码,以及bmap.js,china.js,echarts.js,echarts-wordcloud.js文件啦 1.柱形图先来看看效果啦重要代码如下所示,必须引入e ...
ECharts：echarts-wordcloud词云图
echarts-wordcloud词云库是基于wordcloud2.js的Apache ECharts版本实现. 词云库的引入 echarts-wordcloud词云库需要配合ECharts一起使用, ...
echarts词云图形状_使用pyecharts绘制词云图-淘宝商品评论展示
一.什么是词云图? 词云图是一种用来展现高频关键词的可视化表达,通过文字.色彩.图形的搭配,产生有冲击力地视觉效果,而且能够传达有价值的信息. 制作词云图的网站有很多,简单方便,适合小批量操作. BI ...
echarts词云图实现
先看效果先装所需的依赖 npm i echarts npm i echarts-wordcloud 这里我写成了一个组件,在项目多个地方使用 <template> <div> ...
echarts5.x 词云图使用（`[ECharts] Unkown series wordCloud`）
文章目录 echarts5.x 词云图使用(`[ECharts] Unkown series wordCloud`) 背景预期效果样例代码自定义形状动效 echarts5.x 词云图使用([E ...

echarts的词云图