Echarts词云图

最新推荐文章于 2024-06-17 17:18:14 发布

还是那个同伟伟

最新推荐文章于 2024-06-17 17:18:14 发布

阅读量1k

点赞数

分类专栏： Echarts画图文章标签：数据可视化可视化 html echarts js

本文链接：https://blog.csdn.net/wei18791957243/article/details/118207941

版权

Echarts画图专栏收录该内容

8 篇文章 0 订阅

订阅专栏

水果店词云图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../echarts.js"></script>
	<!-- 引入echarts-wordcloud.js-->
	<script src="../echarts-wordcloud.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
var option = {
    tooltip: {
        show: true
    },
    series: [{
        type: "wordCloud",        //词云图
        gridSize:6,               //词的间距
        shape:'circle',           //词云形状
        sizeRange: [24, 60],      //词云大小范围
        width:1800,                //词云显示宽度
        height:1600,               //词云显示高度
        textStyle: {
            normal: {
                color: function() {     //词云的颜色随机
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                shadowBlur: 50,         //阴影的模糊等级
                shadowColor: '#333'     //鼠标悬停在词云上的阴影颜色
            }
        },
        data: [{
                name: " 新鲜水果",
                value: 32
            },
            {
                name: " 美味",
                value: 30
            },
            {
                name: " 健康",
                value: 30
            },
            {
                name: " 维生素",
                value: 28
            },
            {
                name: " 西瓜",
                value: 26
            },
            {
                name: " 樱桃",
                value: 24
            },
            {
                name: " 桃子",
                value: 24
            },
            {
                name: " 甜瓜",
                value: 22
            },
            {
                name: " 香蕉",
                value: 22
            },
            {
                name: " 苹果",
                value: 22
            },
            {
                name: " 梨子",
                value: 22
            },
            {
                name: " 荔枝",
                value: 20
            },
            {
                name: " 葡萄",
                value: 20
            },
            {
                name: " 杨梅",
                value: 20
            },
            
        ],
    }]
};

       // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>