|
@@ -1,191 +0,0 @@
|
|
|
-<!--
|
|
|
- 描述: 产品热词
|
|
|
- 作者: Jack Chen
|
|
|
- 日期: 2020-05-09
|
|
|
--->
|
|
|
-
|
|
|
-<template>
|
|
|
- <div class="WordCloud-container">
|
|
|
- <div class="chart" id="chart_right1"></div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import '@/assets/js/echarts-wordcloud.min'
|
|
|
-
|
|
|
-export default {
|
|
|
- name: "WordCloud",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- timer: null
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getEchartRight1();
|
|
|
- this.timer = setInterval(() => {
|
|
|
- this.getEchartRight1();
|
|
|
- }, 5000)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getEchartRight1() {
|
|
|
- let myChart = echarts.init(document.getElementById('chart_right1'));
|
|
|
- let option = {
|
|
|
- // tooltip: {
|
|
|
- // show: false
|
|
|
- // },
|
|
|
- series: [{
|
|
|
- type: 'wordCloud',
|
|
|
- gridSize: 1,
|
|
|
- sizeRange: [12, 50],
|
|
|
- rotationRange: [-90, 90],
|
|
|
- rotationStep: 45,
|
|
|
- shape: 'diamond',
|
|
|
- width: '90%',
|
|
|
- textPadding: 0,
|
|
|
- autoSize: {
|
|
|
- enable: true,
|
|
|
- minSize: 6
|
|
|
- },
|
|
|
- textStyle: {
|
|
|
- normal: {
|
|
|
- textBorderColor: 'rgba(255,255,255,0.3)',
|
|
|
- textBorderWidth: 1,
|
|
|
- color: () => {
|
|
|
- return 'rgb(' + [
|
|
|
- Math.round(Math.random() * 160),
|
|
|
- Math.round(Math.random() * 160),
|
|
|
- Math.round(Math.random() * 160)
|
|
|
- ].join(',') + ')';
|
|
|
- }
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- fontSize: 20,
|
|
|
- // shadowBlur: 10,
|
|
|
- // shadowColor: 'rgba(255,255,255, .1)'
|
|
|
- }
|
|
|
- },
|
|
|
- data: [{
|
|
|
- name: '钟南山',
|
|
|
- value: 810
|
|
|
- }, {
|
|
|
- name: '武汉',
|
|
|
- value: 520
|
|
|
- },{
|
|
|
- name: "隔离",
|
|
|
- value: 928
|
|
|
- },{
|
|
|
- name: "白衣天使",
|
|
|
- value: 906
|
|
|
- },{
|
|
|
- name: "健康码",
|
|
|
- value: 825
|
|
|
- },{
|
|
|
- name: "口罩",
|
|
|
- value: 514
|
|
|
- },{
|
|
|
- name: "中国加油",
|
|
|
- value: 486
|
|
|
- },{
|
|
|
- name: "阳性",
|
|
|
- value: 53
|
|
|
- },{
|
|
|
- name: "驰援",
|
|
|
- value: 927
|
|
|
- },{
|
|
|
- name: "火神山",
|
|
|
- value: 1308
|
|
|
- },{
|
|
|
- name: "方舱医院",
|
|
|
- value: 693
|
|
|
- },{
|
|
|
- name: "一级响应",
|
|
|
- value: 611
|
|
|
- },{
|
|
|
- name: "零感染",
|
|
|
- value: 512
|
|
|
- },{
|
|
|
- name: "休舱",
|
|
|
- value: 382
|
|
|
- },{
|
|
|
- name: "数据共享",
|
|
|
- value: 312
|
|
|
- },{
|
|
|
- name: "武汉解封",
|
|
|
- value: 187
|
|
|
- },{
|
|
|
- name: "集中救治",
|
|
|
- value: 163
|
|
|
- },{
|
|
|
- name: "隔空喊话",
|
|
|
- value: 104
|
|
|
- },{
|
|
|
- name: "国家力量",
|
|
|
- value: 200
|
|
|
- },{
|
|
|
- name: "制造自信",
|
|
|
- value: 31
|
|
|
- },{
|
|
|
- name: "大国担当",
|
|
|
- value: 941
|
|
|
- },{
|
|
|
- name: "中国方案",
|
|
|
- value: 585
|
|
|
- },{
|
|
|
- name: "科学防治",
|
|
|
- value: 473
|
|
|
- },{
|
|
|
- name: "依法防控",
|
|
|
- value: 358
|
|
|
- },{
|
|
|
- name: "致敬",
|
|
|
- value: 246
|
|
|
- },{
|
|
|
- name: "逆行者",
|
|
|
- value: 207
|
|
|
- },{
|
|
|
- name: "志愿者",
|
|
|
- value: 194
|
|
|
- },{
|
|
|
- name: "会师武汉",
|
|
|
- value: 104
|
|
|
- },{
|
|
|
- name: "最美逆行",
|
|
|
- value: 87
|
|
|
- },{
|
|
|
- name: "共渡难关",
|
|
|
- value: 415
|
|
|
- },{
|
|
|
- name: "捐赠",
|
|
|
- value: 253
|
|
|
- },{
|
|
|
- name: "众志成城",
|
|
|
- value: 211
|
|
|
- },{
|
|
|
- name: "同心抗疫",
|
|
|
- value: 116
|
|
|
- },{
|
|
|
- name: "家国情怀",
|
|
|
- value: 1309
|
|
|
- }]
|
|
|
- }]
|
|
|
- }
|
|
|
-
|
|
|
- myChart.setOption(option, true);
|
|
|
- window.addEventListener('resize', () => {
|
|
|
- myChart.resize();
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- clearInterval(this.timer);
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.WordCloud-container {
|
|
|
- .chart {
|
|
|
- height: 3rem;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|