ECharts数据可视化(图表)

最新推荐文章于 2024-08-23 20:55:13 发布

ZaKka.

最新推荐文章于 2024-08-23 20:55:13 发布

阅读量199

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_77281478/article/details/137603298

版权

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>词云图</title>
    <script src="js/echarts.js"></script>
    <script src="js/echarts-wordcloud.min.js"></script>
    <!-- <style>
        main {
            width: 700px;
            height: 500px;
            box-shadow: 0 0 15px 3px rgb(39, 128, 128);
            margin: 100px auto 50px;
            border-radius: 15px;
        }
    </style> 
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        option = {
            tooltip: {
                show: true
            },
            series: [{
                type: 'wordCloud', //词云图
                gridSize: 6, //词的间距
                // 可用的形状有(circle)圆形(默认)、(cardioid)心形，(diamond)菱形，(triangle-forward)三角形向前，(triangle)三角形，(pentagon)五边形和(star)星形。
                shape: 'cardioid', //词云形状，可选diamond，pentagon，circle，triangle，star等形状
                sizeRange: [25, 65], //词云大小范围
                width: 700, //词云显示宽度
                height: 600, //词云显示高度
                textStyle: {
                    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: ' 没有',
                    value: 30
                }, {
                    name: ' 屏幕',
                    value: 24
                }, {
                    name: ' 不错',
                    value: 21
                }, {
                    name: ' 可以',
                    value: 19
                }, {
                    name: ' 发货',
                    value: 18
                }, {
                    name: ' 这个',
                    value: 18
                }, {
                    name: ' 什么',
                    value: 17
                }, {
                    name: ' 一个',
                    value: 12
                }, {
                    name: ' 不好',
                    value: 12
                }, {
                    name: ' 质量',
                    value: 11
                }, {
                    name: ' 快递',
                    value: 11
                }, {
                    name: ' 问题',
                    value: 10
                }, {
                    name: ' 物流',
                    value: 9
                }, {
                    name: ' 几天',
                    value: 9
                }, {
                    name: ' 一般',
                    value: 9
                }, {
                    name: ' 就是',
                    value: 9
                }, {
                    name: ' 使用',
                    value: 8
                }, {
                    name: ' 怎么',
                    value: 8
                }, {
                    name: ' 电池',
                    value: 8
                }, {
                    name: ' 不能',
                    value: 8
                }, {
                    name: ' 速度',
                    value: 8
                }, {
                    name: ' 客服',
                    value: 8
                }, {
                    name: ' 一星',
                    value: 8
                }, {
                    name: ' 拍照',
                    value: 8
                }, {
                    name: ' 没zhe',
                    value: 30
                }, {
                    name: ' 屏mu',
                    value: 20
                }, {
                    name: ' ok',
                    value: 31
                }, {
                    name: ' 头',
                    value: 17
                }]
            }]
        };
 
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    </body>
 
</html>