index.vue
1.74 KB
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
<template>
<div class="chart-container app-container nohead">
<el-alert title="免责声明：Highcharts组件不属于NCC产品，只用于介绍第三方组件如何在《NCC快速开发平台》中使用。如果对这些组件感兴趣，请使用正版。"
type="warning" :closable="false" class="mb-10" />
<highcharts :options="chartOptions" :callback="myCallback"
style="height:530px;margin-top:30px;"></highcharts>
</div>
</template>
<script>
import { Chart } from "highcharts-vue";
import Highcharts from 'highcharts';
import highchartsWordcloud from 'highcharts/modules/wordcloud'
highchartsWordcloud(Highcharts)
export default {
name: 'extend-graphDemo-highchartsWordcloud',
components: {
highcharts: Chart
},
data() {
return {
chartOptions: {}
}
},
mounted() {
var text = 'Mountain no ling, river water is exhausted, winter thunder bursts, summer rain and snow, heaven and earth together, is dare and you must.At the same time, it is better to forget the leighton river than to help each other at the same time.';
var data = text
.split(/[,\. ]+/g)
.reduce(function (arr, word) {
var obj = arr.find(function (obj) {
return obj.name === word;
});
if (obj) {
obj.weight += 1;
} else {
obj = {
name: word,
weight: 1
};
arr.push(obj);
}
return arr;
}, [])
this.chartOptions = {
series: [{
type: 'wordcloud',
data: data
}],
title: {
text: '词云图'
},
credits: {
enabled: false
}
}
},
methods: {
myCallback() {
console.log("this is callback function");
}
}
}
</script>