效果图
1、安装插件 -- vue项目中
npm install echarts
npm install echarts-wordcloud
2、vue页面中引入组件
<rate-tags-cloud id="rateTagsCloud" :cloud-data="rateTagsCloudData" :title="titles"/>
在该页面设置rateTagsCloud，titles等数据
rateTagsCloud：[ { name: '十九大精神', value: 15000, }, { name: '两学一做', value: 10081, }, { name: '中华民族', value: 9386, }, { name: '马克思主义', value: 7500, }, { name: '民族复兴', value: 7500, }, { name: '社会主义制度', value: 6500, }, { name: '领土完整', value: 2300, }, { name: '安全', value: 2000, }, { name: '从严治党', value: 1900, }, { name: '现代化经济体系', value: 1800, }, { name: '国防动员', value: 1700, }, { name: '信息化战争', value: 1600, }, { name: '局部战争', value: 1500, }, { name: '教育', value: 1200, }, { name: '职业教育', value: 1100, }, { name: '兵法', value: 900, }, { name: '一国两制', value: 800, }, { name: '民族复兴', value: 7500, }, { name: '国防白皮书', value: 6500, }, { name: '创新', value: 6000, }, { name: '民主革命', value: 4500, }, { name: '文化强国', value: 3800, }, { name: '国家主权', value: 3000, }, { name: '信息化战争a', value: 1600, }, { name: '局部战争a', value: 1500, }, { name: '教育a', value: 1200, }, ],
3、创建组件--RateTagsCloud.vue
<template>
<div :id="id" class="cloud" :style="{ height:height,width:width }" />
</template>
<script>
import echarts from 'echarts';
import resize from '@/views/data-center/components/mixins/resize';
import 'echarts-wordcloud/dist/echarts-wordcloud';
import 'echarts-wordcloud/dist/echarts-wordcloud.min';
export default { name: 'RateTagsCloud', mixins: [resize], props: { cloudData: { type: Array, default() { return []; }, }, id: { type: String, default: 'cloud-chart', },
titles: {
type: String,
default: '访客提问高频词云',
}
width: {
type: String, default: '100%', }, height: { type: String, default: '400px', }, }, data() { return { chart: null, }; }, mounted() { this.initChart(); }, beforeDestroy() { if (!this.chart) { return; } this.chart.dispose(); this.chart = null; }, methods: { initChart() { this.chart = echarts.init(document.getElementById(this.id)); this.chart.setOption({ // title: { // text: this.titles, // x: 'center', // }, backgroundColor: '#fff', // 划过显示内容 tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>', }, series: [ { type: 'wordCloud', // 用来调整词之间的距离 gridSize: 10, // 用来调整字的大小范围 sizeRange: [14, 60], // 用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容 rotationRange: [-90, 0], textStyle: { normal: { color() { return ( `rgb(${ Math.round(Math.random() * 255) }, ${ Math.round(Math.random() * 255) }, ${ Math.round(Math.random() * 255) })` ); }, }, }, // 位置相关设置 left: 'center', top: 'center', right: null, bottom: null, width: '200%', height: '200%', // 数据 data: this.cloudData, }, ], }); }, },};</script>
