echarts词云

最新推荐文章于 2025-07-10 23:23:24 发布

原创最新推荐文章于 2025-07-10 23:23:24 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#词云的配置项 #解决词云重复渲染问题

个人小结专栏收录该内容

12 篇文章

订阅专栏

<script>
// import echarts from 'echarts';
var echarts = require('echarts');
require('echarts-wordcloud');//引入词云
import store from "../../../store/store.js";

import {
    mapMutations
} from 'vuex';

词云配置项

    KeywordOption: {
                series: [{
                    name: '词云',
                    type: 'wordCloud',
                    shape: 'circle',
                    top: 'center',
                    width: '100%',
                    height: '90%',
                    right: null,
                    bottom: null,
                    sizeRange: [12, 40],
                    rotationRange: [-90, 90],
                    rotationStep: 45,
                    drawOutOfBound: false,
                    textPadding: 0,
                    autoSize: {
                        enable: true,
                        minSize: 14
                    },
                    textStyle: {
                        normal: {
                            fontFamily: 'sans-serif',
                            fontWeight: 'bold',
                            // Color can be a callback function or a color string
                            color: function () {
                                // Random color
                                return 'rgb(' + [
                                    Math.round(Math.random() * 150),
                                    Math.round(Math.random() * 50 + 50),
                                    Math.round(Math.random() * 180 + 180)
                                ].join(',') + ')';
                            }
                        },
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    data: []
                }]

            },

methods里面写方法绘图

      drawKeyCloudChart(param) {
            let option = param || this.KeywordOption
            let mychart = echarts.init(document.getElementById('Keyword-chart'))
            mychart.clear();//这句很重要，避免了词云的重复渲染data
            mychart.setOption(option, true);
            window.addEventListener('resize', () => {
                mychart.resize();
            })
        },