Scripts/OtherJs/eCharts/zrender-master/doc/example/www/index.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ZRender</title>
    <!--Step:1 Import a module loader, such as esl.js or require.js-->
    <!--Step:1 引入一个模块加载器，如esl.js或者require.js-->
    <script src="js/esl.js"></script>
</head>

<body>
    <!--Step:2 Prepare a dom for ZRender which (must) has size (width & hight)-->
    <!--Step:2 为ZRender准备一个具备大小（宽高）的Dom-->
    <div id="main" style="width:100%;height:500px;border:1px solid #ccc"></div>
    
    <script type="text/javascript">
    // Step:3 conifg ZRender's path, link to zrender.js from current page.
    // Step:3 为模块加载器配置zrender的路径，从当前页面链接到zrender.js
    require.config({
        paths:{ 
            zrender:'./js/zrender',
            'zrender/shape/Circle' : './js/zrender'
        }
    });
    
    // Step:4 require zrender and use it in the callback.
    // Step:4 动态加载zrender然后在回调函数中开始使用
    require(
        ['zrender','zrender/shape/Circle'],
        function(zrender) {
            var zr = zrender.init(document.getElementById('main'));
            var color = require('zrender/tool/color');
            var colorIdx = 0;
            var width = Math.ceil(zr.getWidth());
            var height = Math.ceil(zr.getHeight());

            var i;
            var n = document.createElement('canvas').getContext ? 150 : 50;
            var shapeList = [];
            // 动画元素
            var CircleShape = require('zrender/shape/Circle');
            var guid = require('zrender/tool/guid');
            for(i = 0; i < n; i++) {
                shapeList[i] = new CircleShape({
                    id : guid(),
                    style : {
                        x : Math.ceil(Math.random() * width),
                        y : Math.ceil(Math.random() * height),
                        r : Math.ceil(Math.random() * 40),
                        brushType : Math.ceil(Math.random() * 100) % 3 >= 1 ? 'both' : 'stroke',
                        color : 'rgba('
                                + Math.round(Math.random() * 256) + ','
                                + Math.round(Math.random() * 256) + ','
                                + Math.round(Math.random() * 256) + ', 0.5)',
                        strokeColor : 'rgba('
                                + Math.round(Math.random() * 256) + ','
                                + Math.round(Math.random() * 256) + ','
                                + Math.round(Math.random() * 256) + ', 0.3)',
                        lineWidth : 3
                    },