carInsightSystem_web/src/utils/gol/bubbleWord.js

/*
 * @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";
// 将后台数据转成数组
function doWordCloud(data) {
    let arr1 = [];
    for (let key in data) {
        let obj = { key: key, value: data[key] };
        arr1.push(obj);
    }
    return arr1;
}
// 创建词云的对象
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 = 380;
    // 根据气泡数量配置基础大小和斥力因子（以实际情况进行适当调整，使气泡合理分布）
    if (data.length >= 5 && data.length < 10) {
        basicSize = 20;
        repulsion = 230;
    }
    if (data.length >= 10 && data.length < 20) {
        basicSize = 30;
        repulsion = 150;
    } else if (data.length >= 20) {
        basicSize = 40;
        repulsion = 65;
    }
    // 填充气泡数据数组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;
        if (size < basicSize) size = 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
        }]
    }
}