0%

vue+echarts-wordcloud字符云踩雷

发表于 更新于 分类于 Valine：
本文字数： 5.5k 阅读时长 ≈ 5 分钟

应用场景

报表统计某个项目中使用的关键字数量集合，由于关键字是用户自定义输入，存在不可控性，可能会有大量不同的关键字存在，于是便想到了用字符云做统计。实现效果：

踩雷过程

1、安装依赖
1
2
npm install echarts;
npm install echarts-wordcloud
2、页面引入

options的代码我是复制的官方示例代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import echarts from "echarts";
import "echarts-wordcloud";
this.chart.setOption(
    {
        tooltip: {},
        series: [{
            type: "wordCloud",
            gridSize: 5,
            textStyle: {
                color: () =>
                {
                    return "rgb(" + [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                    ].join(",") + ")";
                }
            },
            emphasis: {
                textStyle: {
                    shadowBlur: 10,
                    shadowColor: "#333"
                }
            },
            data: [
                {
                    name: "Sam S Club",
                    value: 6987
                },
                {
                    name: "Macys",
                    value: 6181
                },
                {
                    name: "Amy Schumer",
                    value: 4386
                },
                {
                    name: "Jurassic World",
                    value: 4055
                },
                {
                    name: "Charter Communications",
                    value: 2467
                },
                {
                    name: "Chick Fil A",
                    value: 2244
                },
                {
                    name: "Planet Fitness",
                    value: 1898
                },
                {
                    name: "Pitch Perfect",
                    value: 1484
                },
                {
                    name: "Express",
                    value: 1112
                },
                {
                    name: "Home",
                    value: 965
                },
                {
                    name: "Johnny Depp",
                    value: 847
                },
                {
                    name: "Lena Dunham",
                    value: 582
                },
                {
                    name: "Lewis Hamilton",
                    value: 555
                },
                {
                    name: "KXAN",
                    value: 550
                },
                {
                    name: "Mary Ellen Mark",
                    value: 462
                },
                {
                    name: "Farrah Abraham",
                    value: 366
                },
                {
                    name: "Rita Ora",
                    value: 360
                },
                {
                    name: "Serena Williams",
                    value: 282
                },
                {
                    name: "NCAA baseball tournament",
                    value: 273
                },
                {
                    name: "Point Break",
                    value: 265
                }
            ]
        }]
    });
3、踩雷在途

上面一顿操作之后，页面运行直接报错”TypeError: echarts_lib_echarts__WEBPACK_IMPORTED_MODULE_0__.helper.createDimensions is not a function”

百度之后也没整明白啥问题，然后在官网上看到了一句话。

NOTE:

echarts-wordcloud@2 is for echarts@5 echarts-wordcloud@1 is for echarts@4

image-20210416105319164

我的echarts版本是4.0.1，于是卸载echarts-wordcloud重新安装，再次运行。

1
2
npm uninstall echarts-wordcloud
npm install echarts-wordcloud@1.1.2

欢喜运行，再次打开页面，报了另一个错。

echarts_lib_echarts__WEBPACK_IMPORTED_MODULE_0__.helper.createTextStyle is not a function

沉着思考，冷静分析。。。分析不出来，开始疯狂百度，于是我又换了一个echarts的版本，从4.0.1换成了3.7.2。

再次欢喜运行。（其实重复安装依赖安装了非常多次，经过我多次试验，我发现需要先安装echarts@3.7.2的版本，再安装echarts-wordcloud@1.1.2的版本，欢喜运行就能出来）

4、曙光在即

页面是欢欢喜喜的运行出来了，然而字体却还是有点差强人意。仔细对照了官方给的文档，但是字体颜色就是不生效，出来全是一个色。

疯狂百度无果，正当山穷水尽疑无路之时，我默默的看了一眼echarts-wordcloud的源码，好家伙，还真让我发现了一个东西，color颜色定义放在textStyle的normal下面，把代码改了一下之后，字体颜色如期展示了。页面源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<template>
    <div class="middle-chart">
        <div ref="chart"
             :style="{height:height,width:width}"/>
    </div>
</template>
<script>
import echarts from "echarts";
import "echarts-wordcloud";
import { debounce } from "@/scripts/common/utils";
export default {
    props: {
        height: {
            type: String,
            default: "100%"
        },
        width: {
            type: String,
            default: "100%"
        }
    },
    data()
    {
        return {
        };
    },
    mounted()
    {
        this.initChart();
        this.__resizeHandler = debounce(() =>
        {
            if (this.chart)
            {
                this.chart.resize();
            }
        }, 100);
        window.addEventListener("resize", this.__resizeHandler);
    },
    beforeDestroy()
    {
        if (!this.chart)
        {
            return;
        }
        window.removeEventListener("resize", this.__resizeHandler);
        this.chart.dispose();
        this.chart = null;
    },
    methods: {
        initChart: function()
        {
            this.chart = echarts.init(this.$refs.chart);

            this.chart.setOption(
                {
                    tooltip: {},
                    series: [{
                        type: "wordCloud",
                        gridSize: 5,
                        textStyle: {
                            normal: {
                                color: () =>
                                {
                                    return "rgb(" + [
                                            Math.round(Math.random() * 160) + 45,
                                            Math.round(Math.random() * 160) + 45,
                                            Math.round(Math.random() * 160) + 45
                                        ].join(",") + ")";
                                }
                            }
                        },
                        emphasis: {
                            textStyle: {
                                shadowBlur: 10,
                                shadowColor: "#333"
                            }
                        },
                        data: [
                        {
                            name: "Sam S Club",
                            value: 6987
                        },
                        {
                            name: "Macys",
                            value: 6181
                        },
                        {
                            name: "Amy Schumer",
                            value: 4386
                        },
                        {
                            name: "Jurassic World",
                            value: 4055
                        },
                        {
                            name: "Charter Communications",
                            value: 2467
                        },
                        {
                            name: "Chick Fil A",
                            value: 2244
                        },
                        {
                            name: "Planet Fitness",
                            value: 1898
                        },
                        {
                            name: "Pitch Perfect",
                            value: 1484
                        },
                        {
                            name: "Express",
                            value: 1112
                        },
                        {
                            name: "Home",
                            value: 965
                        },
                        {
                            name: "Johnny Depp",
                            value: 847
                        },
                        {
                            name: "Lena Dunham",
                            value: 582
                        },
                        {
                            name: "Lewis Hamilton",
                            value: 555
                        },
                        {
                            name: "KXAN",
                            value: 550
                        },
                        {
                            name: "Mary Ellen Mark",
                            value: 462
                        },
                        {
                            name: "Farrah Abraham",
                            value: 366
                        },
                        {
                            name: "Rita Ora",
                            value: 360
                        },
                        {
                            name: "Serena Williams",
                            value: 282
                        },
                        {
                            name: "NCAA baseball tournament",
                            value: 273
                        },
                        {
                            name: "Point Break",
                            value: 265
                        }
                    ]
                    }]
                });
        }
    }
};
</script>
<style lang="scss" scoped>
@import url("./chart.scss");
</style>
6、结语

官方给的随机颜色是在0-160区间，红黄蓝都在这个区间显示的字体颜色是深色的，比较适合浅色背景，如果和我一样是深色背景的可以将rgba的色值调高一点，一般160-255之间的出来颜色会偏浅。

-------------The End-------------
坚持原创技术分享，您的支持将鼓励我继续创作！