vue3使用echarts词云
时间: 2023-11-15 19:05:42 浏览: 50
以下是使用Vue3和Echarts词云的步骤:
1.首先,安装Echarts和Echarts词云依赖:
```shell
npm install echarts
npm i echarts-wordcloud
```
2.在Vue组件中引入Echarts:
```javascript
import * as echarts from 'echarts';
import 'echarts-wordcloud';
```
3.在Vue组件中创建一个Echarts实例:
```javascript
<template>
<div ref="chart" style="width: 100%; height: 500px;"></div>
</template>
<script>
export default {
mounted() {
const chartDom = this.$refs.chart;
const myChart = echarts.init(chartDom);
const option = {
series: [{
type: 'wordCloud',
shape: 'circle',
left: 'center',
top: 'center',
width: '80%',
height: '80%',
right: null,
bottom: null,
sizeRange: [12, 60],
rotationRange: [-90, 90],
rotationStep: 45,
gridSize: 8,
drawOutOfBound: false,
textStyle: {
normal: {
fontFamily: 'sans-serif',
fontWeight: 'bold',
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: [{
name: 'Vue.js',
value: 10000,
}, {
name: 'React', value: 6181
}]
}]
};
myChart.setOption(option);
}
}
</script>
```
在这个例子中,我们创建了一个圆形的词云,包含了两个数据点:Vue.js和React。你可以根据自己的需求修改数据点和其他选项。