您现在的位置是:首页 > 数码 > 

vue项目echarts实现气泡图

2025-07-26 16:05:20
vue项目echarts实现气泡图 1、下载echarts词云扩展 下载链接 2、修改WordCloudView.js import * as echarts from echarts echarts.extendChartView({type: wordCloud ,render: function (seriesModel, ecModel

vue项目echarts实现气泡图

1、下载echarts词云扩展

下载链接

2、修改WordCloudView.js

import * as echarts from 	echarts	({type: 	wordCloud	,render: function (seriesModel, ecModel, api) {ct group = this.groupgroup.removeAll()ct data = seriesModel.getData()ct gridSize = seriesModel.get(	gridSize	)seriesModel. = function (text, size, dataIdx, drawn) {ct itemModel = data.getItemModel(dataIdx)ct textStyleModel = itemModel.getModel(	textStyle	)ct { option: label } = itemModel.getModel(	label	)ct labelStyle = itemModel.getModel(	labelStyle	)ct textEl = new echarts.graphic.Text({style: echarts.(textStyleModel),scaleX: 1 / drawn.,scaleY: 1 / drawn.,x: (drawn.gx  drawn.info.gw / 2) * gridSize,y: (drawn.gy  drawn.info.gh / 2) * gridSize,rotation: drawn.rot})textEl.setStyle({x: drawn.info.fillTextOffsetX,y: drawn.info.fillTextOffsetY  size * 0.5,text: text,verticalAlign: 	middle	,fill: data.getItemVisual(dataIdx, 	style	).fill,fontSize: size})ct textLabel = new echarts.graphic.Text({style: echarts.(labelStyle),scaleX: 1 / drawn.,scaleY: 1 / drawn.,x: (drawn.gx  drawn.info.gw / 2) * gridSize,y: (drawn.gy  drawn.info.gh / 2) * gridSize,rotation: drawn.rot})textLabel.setStyle({x: drawn.info.fillTextOffsetX  size * 0.45,y: drawn.info.fillTextOffsetY  size * 0.45,// text: label.length > 5 ? label.slice(0, 5)  	...	 : label,text: label,align: 	center	,verticalAlign: 	middle	})group.add(textEl)group.add(textLabel)data.setItemGraphicEl(dataIdx, textEl)(	emphasis	).style = echarts.(itemModel.getModel([	emphasis	, 	textStyle	]),{state: 	emphasis	})(	blur	).style = echarts.(itemModel.getModel([	blur	, 	textStyle	]),{state: 	blur	})echarts.(textEl,itemModel.get([	emphasis	, 	focus	]),itemModel.get([	emphasis	, 	blurScope	]))textEl.stateTransition = {duration: seriesModel.get(	animation	)? seriesModel.get([	stateAnimation	, 	duration	]): 0,easing: seriesModel.get([	stateAnimation	, 	easing	])}// TODOtextEl.__highDownDispatcher = true}this._model = seriesModel},remove: function () {this.group.removeAll()this._model.layoutInstance.dispose()},dispose: function () {this._model.layoutInstance.dispose()}
})

、使用

<script setup>
import 	@/utils/wordCloud/index	
import * as echarts from 	echarts	
import { onMounted, ref } from 	vue	ct option = {tooltip: {show: true,formatter: (e) => {return `${e.data.label}:${e.data.value}`}},series: [{type: 	wordCloud	,// 形状 circle 圆 cardioid  心 diamond 菱形// triangle-forward triangle 三角 star五角星shape: 	diamond	,left: 	center	,top: 10,gridSize: 20,sizeRange: [5, 80],rotationRange: [0, 0],rotationStep: 90,drawOutOfBound: false,labelStyle: {color: 	#ffffff	,fontSize: 12,width: 80},textStyle: {color: function () {// Random colorreturn 	rgb(	  [Math.round(Math.random() * 255),Math.round(Math.random() * 255),Math.round(Math.random() * 255)].join(	,	)  	)	}},data: [{ name: 	⬤	, value: 100, label: 	java	 },{ name: 	⬤	, value: 21, label: 	c	 },{ name: 	⬤	, value: 4, label: 	c	 },{ name: 	⬤	, value: 12, label: 	python	 },{ name: 	⬤	, value: 50, label: 	vue	 }]}]
}ct chartRef = ref(null)onMounted(() => {ct chart = echarts.init(chartRef.value)chart.setOption(option)
})
</script>
<template><div :style={height: 	00px	, width: 	400px	} ref=chartRef></div>
</template>
<style lang=less scoped>
</style>

4、效果图

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可,转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址:http://www.dnpztj.cn/shuma/857290.html

相关标签:无
上传时间: 2024-02-10 11:23:20
留言与评论(共有 13 条评论)
本站网友 百度关键词
22分钟前 发表
本站网友 农民工返乡
22分钟前 发表
[{ name
本站网友 淮安美食
20分钟前 发表
text
本站网友 臭氧层的作用
8分钟前 发表
echarts.(labelStyle)
本站网友 脑后有反骨
24分钟前 发表
fill
本站网友 社会保障税
10分钟前 发表
vue }]}] }ct chartRef = ref(null)onMounted(() => {ct chart = echarts.init(chartRef.value)chart.setOption(option) }) </script> <template><div
本站网友 成都餐饮
1分钟前 发表
function () {this.group.removeAll()this._model.layoutInstance.dispose()}
本站网友 高性能mysql
19分钟前 发表
[5
本站网友 佳能复印机官网
23分钟前 发表
false
本站网友 济南轻轨
24分钟前 发表
y
本站网友 裂帛实体店
22分钟前 发表
y
本站网友 不吃嗟来之食
5分钟前 发表