prod
parent
eed1c15bd7
commit
2132150081
|
After Width: | Height: | Size: 37 KiB |
@ -1,188 +1,74 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-21 11:36:36
|
||||
* @LastEditTime: 2021-11-25 11:07:14
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/utils/gol/bubbleWord.js
|
||||
*/
|
||||
import { compare } from "./dataTool"
|
||||
import * as echarts from "echarts";
|
||||
require("./bubbleWord/echarts-wordcloud");
|
||||
|
||||
let maskImage = new Image();
|
||||
maskImage.src = require('@/assets/images/carRound.png')
|
||||
let colors = ['rgba(84,111,197,1)', 'rgba(145,203,116,1)', 'rgba(90,203,156,1)', 'rgba(248,200,87,1)', 'rgba(237,101,101,1)', "rgba(114,191,222,1)", 'rgba(58,162,114,1)', 'rgba(251,131,81,1)']
|
||||
|
||||
// 将后台数据转成数组
|
||||
function doWordCloud(data) {
|
||||
let arr1 = [];
|
||||
for (let key in data) {
|
||||
let obj = { key: key, value: data[key] };
|
||||
let obj = { name: key, value: data[key] };
|
||||
arr1.push(obj);
|
||||
}
|
||||
return arr1;
|
||||
}
|
||||
// 气泡大小算法
|
||||
function bubbleDivide(val, maxVal, size) {
|
||||
let percent = val / maxVal * 1.00;
|
||||
if (0.15<percent<=0.25) {
|
||||
return size * 1.5;
|
||||
} else if (0.25<percent<=0.35) {
|
||||
return size * 2.7;
|
||||
} else if (0.35<percent<=0.45) {
|
||||
return size * 3.6;
|
||||
} else if (0.45<percent<=0.52) {
|
||||
return size * 4.3;
|
||||
} else if (0.52<percent<=0.58) {
|
||||
return size * 4.9;
|
||||
} else if (0.58<percent<=0.66) {
|
||||
return size * 5.4;
|
||||
} else if (0.66<percent<=0.80) {
|
||||
return size * 5.8;
|
||||
} else if (0.80<percent<=0.90) {
|
||||
return size * 6.1;
|
||||
} else if (0.90<percent<=1.00) {
|
||||
return size * 6.3;
|
||||
} else {
|
||||
return size * 1.0;
|
||||
}
|
||||
}
|
||||
// 创建词云的对象
|
||||
function bubbleChart(data = [], format = []) {
|
||||
let [maxValue, temp] = [0, []];
|
||||
data.forEach((item) => {
|
||||
temp.push(item[format[1]]);
|
||||
});
|
||||
maxValue = Math.max.apply(null, temp);
|
||||
// 气泡颜色数组
|
||||
let color = [
|
||||
{
|
||||
key: '#047ddc',
|
||||
fontColor: '#8ec0ea',
|
||||
value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(4, 60, 135, 1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(1, 11, 25, 1)'
|
||||
}
|
||||
], false)
|
||||
},
|
||||
{
|
||||
key: '#a3951f',
|
||||
fontColor: '#a4a27f',
|
||||
value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(120, 124, 14, 1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(1, 11, 25, 1)'
|
||||
}
|
||||
], false)
|
||||
},
|
||||
{
|
||||
key: '#01aa87',
|
||||
fontColor: '#99e5d5',
|
||||
value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(25, 137, 129, 1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(1, 11, 25, 1)'
|
||||
}
|
||||
], false)
|
||||
}
|
||||
|
||||
];
|
||||
// 气泡颜色备份
|
||||
let bakeColor = [...color];
|
||||
// 气泡数据
|
||||
let bubbleData = [];
|
||||
let basicSize = 20; //基础大小
|
||||
let repulsion = 90; //斥力因子
|
||||
// 填充气泡数据数组bubbleData
|
||||
for (let item of data) {
|
||||
// 确保气泡数据条数少于或等于气泡颜色数组大小时，气泡颜色不重复
|
||||
if (!bakeColor.length) bakeColor = [...color];
|
||||
let colorSet = new Set(bakeColor);
|
||||
let curIndex = Math.round(Math.random() * (colorSet.size - 1));
|
||||
let borderColor = bakeColor[curIndex].key;
|
||||
let curColor = bakeColor[curIndex].value;
|
||||
let fontColor = bakeColor[curIndex].fontColor;
|
||||
colorSet.delete(curColor);
|
||||
bakeColor = [...colorSet];
|
||||
// 气泡大小设置
|
||||
//let size = (item[format[1]] * basicSize * 2) / maxValue;
|
||||
let size = bubbleDivide(item[format[1]],maxValue,basicSize);
|
||||
|
||||
bubbleData.push({
|
||||
name: item[format[0]],
|
||||
value: item[format[1]],
|
||||
symbolSize: size,
|
||||
draggable: true,
|
||||
label: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
fontSize: 12
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: curColor,
|
||||
opacity: 0.8,
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowColor: "rgba(0,0,0,0.3)",
|
||||
borderType : 'solid',
|
||||
borderColor: borderColor,
|
||||
borderWidth: 1
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
return {
|
||||
bubbleData,
|
||||
repulsion,
|
||||
};
|
||||
}
|
||||
|
||||
// 创建词云图
|
||||
export default function createWordCloud(obj) {
|
||||
let bubble = null;
|
||||
if (Array.isArray(obj)) {
|
||||
bubble = bubbleChart(obj, ['key', 'value']);
|
||||
//创建词云
|
||||
export default function createWordCloud(data) {
|
||||
let showData = null;
|
||||
if (Array.isArray(data)) {
|
||||
let words = [];
|
||||
data.forEach(e => {
|
||||
let o = {
|
||||
name: e.key,
|
||||
value: e.value
|
||||
}
|
||||
words.push(o)
|
||||
})
|
||||
showData = words;
|
||||
} else {
|
||||
let words = doWordCloud(obj);
|
||||
words.sort(compare('value'));
|
||||
bubble = bubbleChart(words, ['key', 'value']);
|
||||
let words = doWordCloud(data);
|
||||
showData = words;
|
||||
}
|
||||
return {
|
||||
animationEasingUpdate: 'bounceIn',
|
||||
tooltip: {
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
tooltip: {},
|
||||
series: [{
|
||||
type: 'wordCloud',
|
||||
gridSize: 5,
|
||||
sizeRange: [8, 60],
|
||||
rotationRange: [0, 0],
|
||||
//shape: 'circle',
|
||||
maskImage: maskImage,
|
||||
width: 600,
|
||||
height: 390,
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
right: null,
|
||||
bottom: null,
|
||||
drawOutOfBound: true,
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
fontFamily: 'sans-serif',
|
||||
fontWeight: 'bold',
|
||||
color: function () {
|
||||
return colors[Math.floor((Math.random() * 8) + 0)];
|
||||
// return 'rgb(' + [
|
||||
// Math.round(Math.random() * 255),
|
||||
// Math.round(Math.random() * 255),
|
||||
// Math.round(Math.random() * 255)
|
||||
// ].join(',') + ')';
|
||||
}
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||
formatter: function (param) {
|
||||
let data = param.data;
|
||||
return `<span>${data.name}</span><br><span>${data.value}</span>`
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'graph',
|
||||
layout: 'force',
|
||||
force: {
|
||||
gravity: 0.2,
|
||||
repulsion: bubble.repulsion,
|
||||
edgeLength: 10
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
shadowBlur: 100,
|
||||
shadowColor: '#333'
|
||||
}
|
||||
},
|
||||
// 是否开启鼠标缩放和平移漫游
|
||||
roam: true,
|
||||
data: bubble.bubbleData
|
||||
data: showData
|
||||
// {
|
||||
// name: 'Sam S Club',
|
||||
// value: 10000,
|
||||
// }
|
||||
}]
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,61 @@
|
||||
|
||||
require("./echarts-wordcloud");
|
||||
|
||||
// 将后台数据转成数组
|
||||
function doWordCloud(data) {
|
||||
let arr1 = [];
|
||||
for (let key in data) {
|
||||
let obj = { name: key, value: data[key] };
|
||||
arr1.push(obj);
|
||||
}
|
||||
return arr1;
|
||||
}
|
||||
//创建词云
|
||||
export default function createWordCloud(data) {
|
||||
let showData = null;
|
||||
if (Array.isArray(data)) {
|
||||
showData = data;
|
||||
} else {
|
||||
let words = doWordCloud(data);
|
||||
showData = words;
|
||||
}
|
||||
return {
|
||||
tooltip: {},
|
||||
series: [{
|
||||
type: 'wordCloud',
|
||||
gridSize: 12,
|
||||
sizeRange: [10, 52],
|
||||
rotationRange: [0, 0],
|
||||
shape: 'circle',
|
||||
width: 400,
|
||||
height: 400,
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
right: null,
|
||||
bottom: null,
|
||||
drawOutOfBound: true,
|
||||
textStyle: {
|
||||
fontFamily: 'sans-serif',
|
||||
fontWeight: 'bold',
|
||||
color: function () {
|
||||
return 'rgb(' + [
|
||||
Math.round(Math.random() * 255),
|
||||
Math.round(Math.random() * 255),
|
||||
Math.round(Math.random() * 255)
|
||||
].join(',') + ')';
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
shadowBlur: 100,
|
||||
shadowColor: '#333'
|
||||
}
|
||||
},
|
||||
data: showData
|
||||
// {
|
||||
// name: 'Sam S Club',
|
||||
// value: 10000,
|
||||
// }
|
||||
}]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,188 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-21 11:36:36
|
||||
* @LastEditTime: 2021-11-25 11:07:14
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
*
|
||||
*/
|
||||
import { compare } from "./dataTool"
|
||||
import * as echarts from "echarts";
|
||||
// 将后台数据转成数组
|
||||
function doWordCloud(data) {
|
||||
let arr1 = [];
|
||||
for (let key in data) {
|
||||
let obj = { key: key, value: data[key] };
|
||||
arr1.push(obj);
|
||||
}
|
||||
return arr1;
|
||||
}
|
||||
// 气泡大小算法
|
||||
function bubbleDivide(val, maxVal, size) {
|
||||
let percent = val / maxVal * 1.00;
|
||||
if (0.15<percent<=0.25) {
|
||||
return size * 1.5;
|
||||
} else if (0.25<percent<=0.35) {
|
||||
return size * 2.7;
|
||||
} else if (0.35<percent<=0.45) {
|
||||
return size * 3.6;
|
||||
} else if (0.45<percent<=0.52) {
|
||||
return size * 4.3;
|
||||
} else if (0.52<percent<=0.58) {
|
||||
return size * 4.9;
|
||||
} else if (0.58<percent<=0.66) {
|
||||
return size * 5.4;
|
||||
} else if (0.66<percent<=0.80) {
|
||||
return size * 5.8;
|
||||
} else if (0.80<percent<=0.90) {
|
||||
return size * 6.1;
|
||||
} else if (0.90<percent<=1.00) {
|
||||
return size * 6.3;
|
||||
} else {
|
||||
return size * 1.0;
|
||||
}
|
||||
}
|
||||
// 创建词云的对象
|
||||
function bubbleChart(data = [], format = []) {
|
||||
let [maxValue, temp] = [0, []];
|
||||
data.forEach((item) => {
|
||||
temp.push(item[format[1]]);
|
||||
});
|
||||
maxValue = Math.max.apply(null, temp);
|
||||
// 气泡颜色数组
|
||||
let color = [
|
||||
{
|
||||
key: '#047ddc',
|
||||
fontColor: '#8ec0ea',
|
||||
value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(4, 60, 135, 1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(1, 11, 25, 1)'
|
||||
}
|
||||
], false)
|
||||
},
|
||||
{
|
||||
key: '#a3951f',
|
||||
fontColor: '#a4a27f',
|
||||
value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(120, 124, 14, 1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(1, 11, 25, 1)'
|
||||
}
|
||||
], false)
|
||||
},
|
||||
{
|
||||
key: '#01aa87',
|
||||
fontColor: '#99e5d5',
|
||||
value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(25, 137, 129, 1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(1, 11, 25, 1)'
|
||||
}
|
||||
], false)
|
||||
}
|
||||
|
||||
];
|
||||
// 气泡颜色备份
|
||||
let bakeColor = [...color];
|
||||
// 气泡数据
|
||||
let bubbleData = [];
|
||||
let basicSize = 20; //基础大小
|
||||
let repulsion = 90; //斥力因子
|
||||
// 填充气泡数据数组bubbleData
|
||||
for (let item of data) {
|
||||
// 确保气泡数据条数少于或等于气泡颜色数组大小时，气泡颜色不重复
|
||||
if (!bakeColor.length) bakeColor = [...color];
|
||||
let colorSet = new Set(bakeColor);
|
||||
let curIndex = Math.round(Math.random() * (colorSet.size - 1));
|
||||
let borderColor = bakeColor[curIndex].key;
|
||||
let curColor = bakeColor[curIndex].value;
|
||||
let fontColor = bakeColor[curIndex].fontColor;
|
||||
colorSet.delete(curColor);
|
||||
bakeColor = [...colorSet];
|
||||
// 气泡大小设置
|
||||
//let size = (item[format[1]] * basicSize * 2) / maxValue;
|
||||
let size = bubbleDivide(item[format[1]],maxValue,basicSize);
|
||||
|
||||
bubbleData.push({
|
||||
name: item[format[0]],
|
||||
value: item[format[1]],
|
||||
symbolSize: size,
|
||||
draggable: true,
|
||||
label: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
fontSize: 12
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: curColor,
|
||||
opacity: 0.8,
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowColor: "rgba(0,0,0,0.3)",
|
||||
borderType : 'solid',
|
||||
borderColor: borderColor,
|
||||
borderWidth: 1
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
return {
|
||||
bubbleData,
|
||||
repulsion,
|
||||
};
|
||||
}
|
||||
|
||||
// 创建词云图
|
||||
export default function createWordCloud(obj) {
|
||||
let bubble = null;
|
||||
if (Array.isArray(obj)) {
|
||||
bubble = bubbleChart(obj, ['key', 'value']);
|
||||
} else {
|
||||
let words = doWordCloud(obj);
|
||||
words.sort(compare('value'));
|
||||
bubble = bubbleChart(words, ['key', 'value']);
|
||||
}
|
||||
return {
|
||||
animationEasingUpdate: 'bounceIn',
|
||||
tooltip: {
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||
formatter: function (param) {
|
||||
let data = param.data;
|
||||
return `<span>${data.name}</span><br><span>${data.value}</span>`
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'graph',
|
||||
layout: 'force',
|
||||
force: {
|
||||
gravity: 0.2,
|
||||
repulsion: bubble.repulsion,
|
||||
edgeLength: 10
|
||||
},
|
||||
// 是否开启鼠标缩放和平移漫游
|
||||
roam: true,
|
||||
data: bubble.bubbleData
|
||||
}]
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue