vue实现词云图（echarts/Highcharts）

vue实现词云图

1、echarts实现
安装
注意版本

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

1
2
3
4

代码部分

<template>
  <div class="cloud-wrap">
    <div
      ref="cloudEl"
      class="cloud-box"
      :id="title"
      style="height: 200px; width: 200px"
    ></div>
  </div>
</template>
  
  <script>
import echarts from "echarts";
require('echarts-wordcloud')
// import wordcloud from "echarts-wordcloud";
export default {
  props: {
    title: "",//传过来的id
    chartData: {},//数据
  },
  data() {
    return {
      bgImg:
        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAABTtJREFUeF7tnQGOnTAMRNmTtT3Ztidre7JWkUDis3xwgjOOJ4O00rYKhHieJ074/P1YdEwdgY+pR6/BLwJgcggEgACYPAKTD18OIAAmj8Dkw5cDCIDJIzD58Gd2gO/LspSfPzsG9r9PgcaMAPxcluXzjboFgF8HKKhBmAmAku2/jWoWCAoo9McsANSIv4k+BQSzAFAyv0BQe9BDMAMAreJvsFDHiHpwa9Zb5/137kDtAuwAPM1+ehdgBqCl8JvOBZgB8Mp+ahdgBcAz+6mXhawAeGc/rQswAtAj+2ldgBGAXtlP6QJsAPTMfkoXYAOgd/bTuQAbAP9qN/sb29PsDjIBcPWcv1Hny9MoYkcxiFUmVPZT1QIsAKCzn6YWYAEAnf00LsAAQFT2U7gAAwBR2U/hAtkBiM7+9C6QHYDo7E/vApkBGCX7U7tAZgBGyf7ULpAVgNGyP60LZAQA8cSvdes43TOCbACMLH7KqSATAKPa/plbpHnJdHQAthc0373N22rVqPM2EEp/Q756PgIA23v6JUjfVmVa3uNDifq0nw2EvzsowuBAATCbyC2Q7CGAweEJwF7kLZuZM7lF5NZzusHRCsAmdrFsidwqq895GxxN32zSAkCmatwnxLmu8qOm4KwBIMMaPJdU/e7WvCFlBUDi9xOr15VNEFgBQH3evlcwZr3uLQQWAJT9efFxAUDZnxeAcueXSW5xAAGQG4DLVYEFgNE+eJFbDvzdCwB8zIfq8TEAmgKG0rP6Zh4DoJ2/6pgPc0LZJi4AvD0sNUA5WXXAMJpW3YgbAHKBqrgP0fhW/Ns14mEYqgWG0NV8E6aHQtYpYOtVEJjjH9rwdgdwu7taAMp5giBU29vOzeLXTgH7ngXBrQ4hDarEfwKAnCBE38tOTXP+8QotU4CcgET8pw6gwnAMEJoy/0kReDZs1QQxMDwS38sBtqFrswgLwWPxvQEo1xMEGAhcxO8BgCDoD4Cb+L0AEAT9IHAVvycAgsAfAnfxewMgCHwgMD3Va+3q6UaQpV8VhpYonbfpKj7CAbREHFh8JACaDupA6J753juB1uFpOriPFEx8tANoOrgXH64Jogg8G7Y+ZHoOQ5el3hV3UQBoKviqCtT6o2qA/bDlAq8QwLMfPt8coNcj5MkB0DTwCkDIdBzS6TpuOYAA0FfM7RgIScaQTuUApwuz6YpArQJeOaj+TL9tX+m6VZQD6IunvuoiADyITnyNqTaCtAQ8JxXuyPAOVQBeehRcD3iHAuASAPhKIAoArQDOOYAXghEAaAXw3gQEQOIq3uPW4SuBCAfQM4CB9mYEgEfe+l4Dqgm0szVOKgCvgYGuBASAb/Z6XA1aCKIB0ArgHhEBcB8j6hbQlQDaAbQCsLEL0wXWkbaAbcqvrWCFIBoArQBsHMDqACQAKgBt4pdWAsAeq6aWJcDl2P9R5s/1/0b4W8iUAIzwIRBLYAsABYZIEGArAeQUELkCsAh/tJJoECDaQDoJXAG0CH8GQoEXfUBWAqwAeAh/FBw9hQmAhpTbirsiVq8DBQIdAD0DhxD+CFTvmgbizpBO1sj1AqCH3Vvdo1ehSLkKKEH13AmMFL73igFi/2UQSAco/Xm4wEjC9wABlv0RADyBYGThvUCAih8FQC0EmYR/AkLIONFTwD5AdwVUSECs1V9lu2HHGgnAEYb9v/cPaSpjPXzz/TOG8HGOAsDwqrHeoABgVdY4LgFgDBRrMwHAqqxxXALAGCjWZgKAVVnjuASAMVCszQQAq7LGcQkAY6BYmwkAVmWN4/oPekPmgYiq8REAAAAASUVORK5CYII=",
    };
  },
  watch: {
  },
  mounted() {
    this.drawCloud(this.title);
  },
  methods: {
    drawCloud(id) {
      var  myChart = echarts.init(document.getElementById(id));
      var maskImage = new Image(); //可以根据图片形状生成有形状的词云图
      maskImage.src = this.bgImg;
      let arr = this.chartData[this.title];
      let list = [];

      arr.map((item) => {
        let obj = {};
        obj.name = item.content_info;
        obj.value = item.frequency;
        obj.label = item.label_info;
        list.push(obj);
      });
      list.sort(function (a, b) {
        // return a - b; // 升序的顺序排列
        return a.value - b.value; // 降序的顺序排列
      });
      let colorList = ["#999999", "#666666", "#333333", "#FF060B"];
      let length = list.length;
      //按出现频率上色
      list.map((item, index) => {
        if (item.label == "不好") {
          item.color = 3;
        } else {
          if (index < length / 3 || index == length / 3) {
            item.color = 0;
          } else if (index < (length * 2) / 3 || index == (length * 2) / 3) {
            item.color = 1;
          } else {
            item.color = 2;
          }
        }
      });
      let option = {
        title: {
          text: this.title, //这里的参数是整个图标的标题 后面也可以加注释
          //   subtext: '888'
          left: "10%",
          textStyle: {
            fontSize: 12,
          },
        },
        tooltip: {
          show: true,
          confine:true,//限定在图表范围内
        },
        // backgroundColor:'#333944', // 画布背景色
        series: [
          {
            name: "评价",
            type: "wordCloud",
            // maskImage: maskImage, // 图片形状
            //maskImage的横纵比为1:1
            keepAspect: false,
            sizeRange: [8, 18], //词云的文字字号范围，默认是[12, 60]。
            rotationRange: [0, 0], //数据翻转范围
            shape: "star",
            width: "180px", //词云的宽高，默认是 75%、80%。
            height: "100%",
            // drawOutOfBound: true, // 超出画布的词汇是否隐藏
            drawOutOfBound: false,
            color: "#fff",
            left: "center",
            top: "center",
            right: null,
            bottom: null,
            // width: "100%",
            // height: "100%",
            gridSize: 2, //每个词之间的间距。
            // textPadding: 10,
            autoSize: {
              enable: true,
              minSize: 6,
            },
            textStyle: {
              normal: {
                fontFamily: "sans-serif",
                fontWeight: "bold",
                color: "#333", // 字体颜色
                color: function (params) {
                  // 字体颜色
                  return colorList[params.data.color];
                  // return 'rgb(' + [
                  //     Math.round(Math.random() * 160),
                  //     Math.round(Math.random() * 160),
                  //     Math.round(Math.random() * 160)
                  // ].join(',') + ')';
                },
              },
              emphasis: {
                // focus: 'self',
                textStyle: {
                  shadowBlur: 10,
                  shadowColor: "#333",
                },
              },
            },
            data: list,
          },
        ],
      };
      myChart.setOption(option,true);
 
    },
  },
};
</script>
  <style>
.cloud-wrap {
  width: 100%;
  height: 100%;
  background-position: center;
  background-image: url("../../../../public/img/star.png");
  background-repeat: no-repeat; 
  background-size:50%,
  /* background-image:'require(@/public/img/star .png)' ; */
}
.cloud-box {
  width: 100%;
  height: 100%;
  text-align: center;
}
</style>
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

Highcharts

安装
代码部分

<template>
  <div>
    <div
      ref="cloudEl"
      class="cloud-box"
      :id="title"
      style="height: 200px; width: 200px"
    ></div>
  </div>
</template>
  
  <script>
import Highcharts from "highcharts/highcharts";
import wordcloud from "highcharts/modules/wordcloud";

wordcloud(Highcharts);
export default {
  props: {
    title: "",
    chartData: {},
  },
  data() {
    return { };
  },
  watch: {},
  mounted() {
    this.drawCloud(this.title);
  },
  methods: {
    drawCloud(id) {
      let arr = this.chartData[this.title];
      let list=[]
      arr.map((item) => {
        let obj = {};
        obj.name = item.content_info;
        obj.weight = item.frequency;
        obj.label = item.label_info;
        list.push(obj);
      });
      list.sort(function (a, b) {
        // return a - b; // 升序的顺序排列
        return a.weight - b.weight; // 降序的顺序排列
      });
      let colorList = ["#999999", "#666666", "#333333", "#FF060B"];
      let length = list.length;
      list.map((item, index) => {
        if (item.label == "1") {
          item.color = colorList[3];
        } else {
          if (index < length / 3 || index == length / 3) {
            item.color = colorList[0];
          } else if (index < (length * 2) / 3 || index == (length * 2) / 3) {
            item.color = colorList[1];
          } else {
            item.color = colorList[2];
          }
        }
      });
       Highcharts.chart(id, {
        credits: { enabled: false },
        //导出
        exporting: { enabled: false },
        //提示关闭
        tooltip: { enabled: true },
        title: {
          text: this.title,
          floating: true,
          x: -50,
          style: {
            fontSize: 12,
            fontWeight: "600",
          },
        },
        //图形配置
        chart: {
          // spacingBottom: 15,
          spacingTop: 12,
          spacingLeft: 5,
          spacingRight: 5,
          backgroundColor: "rgba(255, 255, 255,0)",
        },

        series: [
          {
            type: "wordcloud", // 类型
            data: list,
            name: this.title,
            rotation: 90, //字体不旋转
            maxFontSize: 15,
            minFontSize: 8,
          },
        ],
      });
    },
  },
};
</script>
  
  

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