• 字符云例子


    来源于官网例子.........官网自行百度(貌似不是官网忘了那个博客了楼主看见了给我说一下加一下链接(本人写完项目作业才总结的原谅我))

    因为是在线引用不用导入任何包

    <!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="100%;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: '大数据云字符信息展示',
                    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: createRandomItemStyle()
                           
                        },
                        {
    					 
                            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()
                         
                        }
                    ]
                }]
            };
    
            // 为echarts对象加载数据 
            myChart.setOption(option); 
        }
    );
    
    </script>
    </html>
    

      

  • 相关阅读:
    Oracle11以后的行列转换
    stream重复Key的处理
    EasyUI笔记(一)Base基础
    jQuery笔记(六)jQuery之Ajax
    【jQuery实例】Ajax登录页面
    jQuery笔记(五)jQuery表单验证
    jQuery笔记(四)jQuery中的动画
    jQuery笔记(三)jQuery中的事件
    jQuery笔记(二)jQuery中DOM操作
    jQuery笔记(一)jQuery选择器
  • 原文地址:https://www.cnblogs.com/xuexidememeda/p/10237986.html
Copyright © 2020-2023  润新知