Echarts字符云

来源：互联网发布：数据库读写分离实现编辑：程序博客网时间：2024/06/17 03:06
<!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 0