Echarts字符云

最新推荐文章于 2024-05-14 14:56:05 发布

会写程序的胖子

最新推荐文章于 2024-05-14 14:56:05 发布

阅读量5.6k

点赞数

分类专栏：开发日志文章标签： echarts html JavaScript

本文链接：https://blog.csdn.net/yhq1988923/article/details/73335536

版权

开发日志专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</head>
<body>
    <div id="main" style="width:80%;height: 500px;border: 1px solid black"></div>
</body>
<script type="text/javascript">
require.config({
    paths: {
        echarts: 'http://echarts.baidu.com/build/dist'
    }
});

// 使用
require(
    [
        'echarts',
        //按需加载 (例如:使用柱状图就加载bar模块)
        //'echarts/chart/line',             //折线（面积）图
        //'echarts/chart/bar',             //柱状（条形）图
        //'echarts/chart/scatter',        //散点（气泡）图
        //'echarts/chart/k',             //K线图
        //'echarts/chart/pie',             //饼（圆环）图
        //'echarts/chart/radar',         //雷达（面积）图
        //'echarts/chart/chord',         //和弦图
        //'echarts/chart/force',         //力导向布局图
        //'echarts/chart/map',             //地图
        //'echarts/chart/gauge',         //仪表盘
        //'echarts/chart/funnel',         //漏斗图
        //'echarts/chart/eventRiver',    //事件河流图
        //'echarts/chart/venn',         //韦恩图
        //'echarts/chart/treemap',        //矩形树图
        //'echarts/chart/tree',         //树图
        'echarts/chart/wordCloud',    //字符云
        //'echarts/chart/mix',             //混搭
        //'echarts/chart/component',    //组件
        //'echarts/chart/other',         //其他
        //'echarts/chart/theme',         //主题
        //'echarts/chart/topic',         //专题
    ],
    function (ec) {
        // 基于准备好的dom，初始化echarts图表
        var myChart = ec.init(document.getElementById('main')); 

        function createRandomItemStyle() {
            return {
                normal: {
                    color: 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')'
                }
            };
        }

        option = {
            title: {
                text: 'Google Trends',
                link: 'http://www.google.com/trends/hottrends'
            },
            tooltip: {
                show: true
            },
            series: [{
                name: 'Google Trends',
                type: 'wordCloud',
                size: ['80%', '80%'],
                textRotation : [0, 45, 90, -45],
                textPadding: 0,
                autoSize: {
                    enable: true,
                    minSize: 14
                },
                data: [
                    {
                        name: "Sam S Club",
                        value: 10000,
                        itemStyle: {
                            normal: {
                                color: 'black'
                            }
                        }
                    },
                    {
                        name: "Macys",
                        value: 6181,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Amy Schumer",
                        value: 4386,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Jurassic World",
                        value: 4055,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Charter Communications",
                        value: 2467,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Chick Fil A",
                        value: 2244,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Planet Fitness",
                        value: 1898,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Pitch Perfect",
                        value: 1484,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Express",
                        value: 1112,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Home",
                        value: 965,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Johnny Depp",
                        value: 847,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Lena Dunham",
                        value: 582,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Lewis Hamilton",
                        value: 555,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "KXAN",
                        value: 550,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Mary Ellen Mark",
                        value: 462,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Farrah Abraham",
                        value: 366,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Rita Ora",
                        value: 360,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Serena Williams",
                        value: 282,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "NCAA baseball tournament",
                        value: 273,
                        itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Point Break",
                        value: 265,
                        itemStyle: createRandomItemStyle()
                    }
                ]
            }]
        };

        // 为echarts对象加载数据 
        myChart.setOption(option); 
    }
);

</script>
</html>

会写程序的胖子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Echarts字符云

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script></head><body> <div id="main" style="width:8
复制链接

扫一扫