vue 使用 echarts 热词图

zsd_666

已于 2024-04-02 23:14:12 修改

阅读量226

点赞数

文章标签： vue.js echarts 前端

于 2024-02-02 12:01:23 首次发布

原文链接：www.baidu.com

版权

本文介绍了如何在Vue应用中安装并使用ECharts库创建一个可交互的热词图，包括初始化图表、配置选项和响应窗口大小调整。

摘要由CSDN通过智能技术生成

vue 使用 echarts 热词图

安装

npm install echarts@5.4.1 --save
npm install echarts-wordcloud@2.1.0 --save

main.js

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

import 'echarts-wordcloud'

使用

getChartData() {
        const myChart = echarts.init(this.$refs.wordChart);
        const option = {
            series: [
                {
                    type: 'wordCloud',
                    gridSize: 20,
                    sizeRange: [12, 50],
                    rotationRange: [-90, 90],
                    shape: 'pentagon',
                    textStyle: {
                        color: function () {
                            return (
                                'rgb(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ')'
                            );
                        },
                        /*
                        // 之前这样设置颜色不起作用
                         normal: {
                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: 'java', value: 10000 },
                        { name: 'javaScript', value: 6181 },
                        { name: 'c++', value: 4386 },
                        { name: 'php', value: 4055 },
                    ],
                },
            ],
        };
        myChart.setOption(option);
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    },