ECharts数据图表系统？ 5分钟上手！

【ECharts简介】

ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

***ECharts图表入门和最佳实践

好了，咱们重点不是介绍哈，后面我会详细讲解这个报表系统的使用，这里就不做过多的描述了，下面开始进入正题：“5分钟上手写ECharts的第一个图表”。

【方法一：模块化单文件引入(推荐)】

1. 新建一个echarts.html文件，为ECharts准备一个具备大小(宽高)的Dom：

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts - 孤影'Blog</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

</body>

2. 新建<script>标签引入模块化单文件echarts.js：

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts - 孤影'Blog</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

</body>

3. 新建<script>标签中为模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js)：

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts - 孤影'Blog</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

    <script type="text/javascript">

        // 路径配置

        require.config({

            paths: {

                echarts: 'http://echarts.baidu.com/build/dist'

            }

        });

    </script>

</body>

4. <script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成：

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts - 孤影'Blog</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

    <script type="text/javascript">

        // 路径配置

        require.config({

            paths: {

                echarts: 'http://echarts.baidu.com/build/dist'

            }

        });

        // 使用

        require(

            [

                'echarts',

                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

            ],

            function (ec) {

                // 基于准备好的dom，初始化echarts图表

                var myChart = ec.init(document.getElementById('main')); 

                var option = {

                    tooltip: {

                        show: true

                    },

                    legend: {

                        data:['销量']

                    },

                    xAxis : [

                        {

                            type : 'category',

                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

                        }

                    ],

                    yAxis : [

                        {

                            type : 'value'

                        }

                    ],

                    series : [

                        {

                            "name":"销量",

                            "type":"bar",

                            "data":[5, 20, 40, 10, 10, 20]

                        }

                    ]

                };

                // 为echarts对象加载数据

                myChart.setOption(option);

            }

        );

    </script>

</body>

5. 浏览器中打开ecarts.html，就可以看到以下效果：

***ECharts图表入门和最佳实践

【方法二：标签式单文件引入】

1. 新建一个echarts.html文件，为ECharts准备一个具备大小(宽高)的Dom。

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts - 孤影Blog</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

</body>

2. 新建<script>标签引入echart-all.js。

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts - 孤影'Blog</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

</body>

3. 新建<script>，使用全局变量echarts初始化图表并驱动图表的生成。

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts - 孤影'Blog</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts图表

        var myChart = echarts.init(document.getElementById('main')); 

        var option = {

            tooltip: {

                show: true

            },

            legend: {

                data:['销量']

            },

            xAxis : [

                {

                    type : 'category',

                    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

                }

            ],

            yAxis : [

                {

                    type : 'value'

                }

            ],

            series : [

                {

                    "name":"销量",

                    "type":"bar",

                    "data":[5, 20, 40, 10, 10, 20]

                }

            ]

        };

        // 为echarts对象加载数据

        myChart.setOption(option);

    </script>

</body>

4. 浏览器中打开echarts.html，可以看到如下效果：

***ECharts图表入门和最佳实践

via: http://www.cnblogs.com/LonelyShadow/p/4175071.html

ECharts简介

http://www.phperz.com/article/14/1017/29557.html

Echarts 首页：http://echarts.baidu.com/index.html

特性：http://echarts.baidu.com/doc/feature.html

ECharts 底层依赖于 Html5 的轻量级的Canvas类库ZRender ，这也是它的效果这么绚丽的原因。它与 js charts类似，不依赖其他 js 类库，相比之下 Highcharts还要依赖JQuery等类库。不过，ECharts也不是什么缺点都没有的，在线演示平台、文档，

初学者可能会被ECharts那个带你入门的那2个示例弄晕，这里来一个个解释：

1、AMD规范的加载器——esl.js，这是什么？

简单来说，AMD规范就是异步方式加载模块的一种方式，避免因为模块加载过慢而导致浏览器“假死”。

2、我们先来看一下echart的大概的包：　

echarts.js : 经过压缩，包含除地图外的全部图表
echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表
echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据

看得出，这种分类非常有意义。

3、echarts更规范的一点，那就是模块化加载，需要哪个部分就是用哪个部分。

关于Echarts的那个入门图表，我想很多新手跟我一样的迷惑，require和require.config这个两个公共方法到底什么来的？

答：AMD规范的加载器——esl.js的公共方法。（如有错误，请指正。）

4、require.config的作用是什么？

答：为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径。一切尽在echarts-2.0.4文件夹下的src文件夹中。

5、解释一下require方法？

答：require方法有2个参数。

第一个参数为一个数组，数组元素是需要加载的echarts模块，需要哪个就加载哪个。（经本人测试，这个数组传入一个空数组都是可以的 !- -）莫非，传入不正确，会加载全部文件到内存，传入正确就加载部分模块到内存？求大神解答！

第二个参数为一个带一个参数的方法：function (ec){}, 这个ec对象就是echarts对象了。

OK，基本解释完了。可能初学者看了Eharts入门实例还是不太理解那Echarts3种导入方式的用法。（入门示例只有2种——标签式单文件引入和模块化单文件引入）

因为入门实例里，js文件指向的是百度服务器上的资源，而我们一般开发，js资源都是放在本地的。

6、来看一下，本地创建3种Echarts导入的例子，下面是那3个示例文件的源码（官网Demo粗略修改而成）：

（1）、标签式单文件引入.html

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script src="js/echarts.js"></script>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts图表

        var myChart = echarts.init(document.getElementById('main')); 

        var option = {

            tooltip: {

                show: true

            },

            legend: {

                data:['销量']

            },

            xAxis : [

                {

                    type : 'category',

                    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

                }

            ],

            yAxis : [

                {

                    type : 'value'

                }

            ],

            series : [

                {

                    "name":"销量",

                    "type":"bar",

                    "data":[5, 20, 40, 10, 10, 20]

                }

            ]

        };

        // 为echarts对象加载数据

        myChart.setOption(option);

    </script>

</body>

（2）、模块化包引入.html，这个就需要用到2个src文件。

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!--从当前页面，引入模块加载器esl.js-->

    <script src="js/esl.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <script type="text/javascript">

        // 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径

        require.config({

            packages: [

                {

                    name: 'echarts',

                    location: 'js/src',

                    main: 'echarts'

                },

                {

                    name: 'zrender',

                    location: 'js/zrender/src',

                    main: 'zrender'

                }

            ]

        });

        // 使用

        require(

            [

            ],

            function (ec) {

                // 基于准备好的dom，初始化echarts图表

                var myChart = ec.init(document.getElementById('main')); 

                var option = {

                    tooltip: {

                        show: true

                    },

                    legend: {

                        data:['销量']

                    },

                    xAxis : [

                        {

                            type : 'category',

                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

                        }

                    ],

                    yAxis : [

                        {

                            type : 'value'

                        }

                    ],

                    series : [

                        {

                            "name":"销量",

                            "type":"bar",

                            "data":[5, 20, 40, 10, 10, 20]

                        }

                    ]

                };

                // 为echarts对象加载数据

                myChart.setOption(option);

            }

        );

    </script>

</body>

（3）、模块化单文件引入.html

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!--从当前页面，引入模块加载器esl.js-->

    <script src="js/esl.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <script type="text/javascript">

        // 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径

        require.config({

            paths:{

                'echarts' : './js/echarts',

                'echarts/chart/bar' : './js/echarts'

            }

        });

        // 使用

        require(

            [

                'echarts',

                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

            ],

            function (ec) {

                // 基于准备好的dom，初始化echarts图表

                var myChart = ec.init(document.getElementById('main')); 

                var option = {

                    tooltip: {

                        show: true

                    },

                    legend: {

                        data:['销量']

                    },

                    xAxis : [

                        {

                            type : 'category',

                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

                        }

                    ],

                    yAxis : [

                        {

                            type : 'value'

                        }

                    ],

                    series : [

                        {

                            "name":"销量",

                            "type":"bar",

                            "data":[5, 20, 40, 10, 10, 20]

                        }

                    ]

                };

                // 为echarts对象加载数据

                myChart.setOption(option);

            }

        );

    </script>

</body>

2、如果上面的还有不明白的，参考一下我的本地目录：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMMAAABqCAIAAACODnLbAAAJKUlEQVR4nO2dzW/bRhqHdcu/kmOBvYTH3Gqgh80t7qFIAwyQCjlstAbayimKTQVtYSiE2whZoKBzECo7ByutTSjQyvFmizQOmgJJGxSu1ga2G8BtdrcB/CFZ1Adl90CKnBkONXI6lCX599xEcqgR5/HMkPO+ZswGQAWx464AGBNgElADTAJqgElADXKTnv+wXq/X6S3fff/Dg0ffVDY2IqsVGD3kJm3+a/355vebm5sbGxvPt3658OfpM+cTmfnCN1s71Wp1d3d3ALUEw4/cpP//779PH/7NqlpW1Uroxqk/TJz+Yzx1q7BetV60D7/6em0AtQTDj9ykhfmF7MzF7Rf/3v51++xU5uzlZP7uanF5tfDgSbb8JK4bz549G0BFwZAjMaler7/19lsXL0yulY21B2vxm4VkrpDN5Yt3ixevps5cSLz2xuTC7QVByYquxTS9EkmlwRAiMWl9fT0xlUheTWZmUtlPs9mbhnHLMD4zsjezqXQqeTWVmEp++JcPB1NXMMzIR7c3J9+ceGNi8vxk/FI8+V4ylU6l0qnke8n4pfjk+cmJ1ydmZmYGUFEw5MhNujJ1JfGnRCqdMm4ZhW/XM09fpB6tFx+sGbeM1LVU/FLcmDNE5Uzijm4VXYs5EFNx7cHwIDfpo2sfJaYSmZlM9u7axU0rtX2Y/PVw8ul2/k4hM5OJX44vLIjmSZ5JJoFBJwG5SR//9WPHpLO54rkXVsI6TFqHp3+04jfzjklfLn0pKtc1qaJrMcy9xx+5Se++/65j0pkZ4+ymda56eK56+NrT7fi1jGPS/Py8qJw3utl2d4RD3zTGyE1KXEk4JmU+zZ6+8+TUt9unHm2fu7NmfGY4JhmGISrHmGTbdkXX0DONMXKTkleTjkn5XD6fy2fnC8V/rBbvFvM5d3S7ffu2qBw1T8KE+wQgN+n69euX45enP5i+8cmN3Oe55S+Wl79Yzn2eu/HJjekPpt+59M7KvRVROcy0TxZyk16+fLm1tbUZwtbWVq1WExTjBzcw5kQVn4TbtZMGIt2AGmASUANMAmqASUANMAmoQW7SP3vSaDQGUEsw/PRlkt1u23a707E7HfvgoHNw0LHt9sFB5/Hjx+VyeXcPSQGgD5Pu37/fbreCMh0cdB4+fFiv11dWVnZ2dgZQVzDMyE1aXV1ttZpCmcrlcqlUKpVK5XJZVNQk7uNJf+2ti/fckn8WLl9kcc5qEn4hL1Ay/FQVXQv/Fq/WwrMEfop/MFdQ8jXjhtyke/futZqNVqvZbrXsdouT6Zeff/7PTz/JTArFj6d0WoUQTdxKorOK1PG2yFZrQvdTp+8jUo/+iaKf20cExO9fVxqKlSm5SeVyudmwhDJ5PpVKJa4UbUjor3T+ZqkG6HY3dI8lg5h2wMjAAb32M7X0W75bi99nUh8uCT04khwjYlKpVGpY9WbDajYbrSYlk93LJNuWX0Pvyld04o5X3gYtvPVEO+ltzNeyHgiKss3vj0cih/0YUGG/KTbJJLHeATUnxqRisWjV65xMbVamYrEYLFgxiaZpWmDICrRAt9mISdsUSohJvTutsLJs63utTtnI90nsZ2mfZJIY0Xv+SZkkpumm+wO4kK4YMbkDiOn/WKqKo2CSaZr1/X2rvs/K1OzK1O50bNMM/s2ZhBDCDl7iOSnX3O4mv3cKCChosT77JL6fDH4iRHPayivFnaFHRyuuV1eGHjN87+f6Ez1aDu6A7g7xwceG3KSlpaV6rebJ1GhYzQYjk223l5aWuFIVndBN7l5Jk2h6xfvdXgfEjyTdezPq6tOtJOiU+u2TbHYmxN026noleG7ZvVuMco5vT/8begoouJMVbuzn4GNDblKhUNivVvdrtfp+zZXJYmVqtwuFAlfK1Kmps3cZnQ2vcnPMtFLvSbD8dsm1IWR+7A6yIkTzmfAel31QEVrpE2PS4uJibW+PkanuydRwHjUtLi6Kigbuo6n7Ib+3EkxIglc9MJ9x9ld0TUsm+7wvo4uLeiv3hL37pMDhYSYFm5fd0luacTRpbm6uurfHyLS/b7Eyzc3NiYqyg5lNXWu6BbzGczcKm46bhFZ0LRYjprD76T2Q0AY5H5mDj2gSs9M3ya1e4HD6325IpKGqOi4mzc7OVnd3q3u7XZmqrExWq9mYnZ0VFeUubaAbkD0t0vS/C8tRhQVXUGSS+/1CJZgpfj8m0ZMythfqo2HH9n+4yE1Kp9N7OzueTDWRTOl0egB1BcOM3KT3+2MAdQXDDCLdgBpgElADTAJqgElADTAJqAEZAUANyAgAakBGAFBDlBkBwuVNbi2D+xi6yOWvYoQHh8tWyMJWdU92JL8qoswIcC0JiR0SihUmAxMnIDbpaM2PSH7VRJURYNtH7JN69Bnh7c4GooQtA4vaCpH8qokqI4DuhwgJtrIbLcF8tik1uBhJJq7HU9Jf3A/rkKi2QiR/tESZEeDFT/BNRYVuBEY3LzyHMYA3ic0cMElM04SehEbPIZJfNdFlBFCxWoKRp1+TKroWI4QLveU6C9ctUSfm64NI/oiJKiPAruiapmmabuoaa4It6JPCAvqJaRJi0n6Fznw4WwMmIZI/YiLLCKAHh959kt/yFV3TNCIaadxRwstP6e4JpswyhHuASH7VRJUR4Gb88E3EfObmtF4Yd+Dqcokl7FAnMsnv4zRBNeyQ20r+lOIt4xbJr4ooMwL8CH8RzDUM3IhxyoWYRN2yHe2BJSL5lRNlRgB/9x7TdFMXDl7B5mPaVJByHfQxPL1A9BxANM0/mZH8qogyI8AxiUsuE2eZgJEHGQFADYh0A2qASUANMAmoASYBNcAkoAZkBAA1ICMAqAEZAUANY5QRECgbHlyEdwSoZ3wyAmx2AU+2Ohq6H+8IeDXGJCMA7wgYAZNGJSMA7wg4XsYiIwDvCBgJk4Y/I8DGOwJGwqSRyAjAOwJGwKQRyQjwwTsCjoUxyAjAOwJGxKQRyQgIfK0IKlzf/8hXBO8IeCXGJyMg5Gup0+EdAVGCjACgBmQEADUg0g2oASYBNcAkoAaYBNQAk4AaYBJQA0wCaoBJQA0wCagBJgE1wCSgBpgE1ACTgBpgElADTAJqgElADTAJqAEmATXAJKAGmATUAJOAGmASUMNvNGtc7v8B1PUAAAAASUVORK5CYII=" alt="" />

js中有如下的文件：

aaarticlea/png;base64,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" alt="" />

其中，src是echarts-2.0.4文件夹下的src文件夹，zrender里面也有一个src文件夹，是zrender-2.0.4文件夹下面的src文件夹。

***ECharts图表入门和最佳实践的更多相关文章

Consul 快速入门 - Kong最佳实践
Consul是什么 Consul是一个服务网格(微服务间的 TCP/IP,负责服务之间的网络调用.限流.熔断和监控)解决方案,它是一个一个分布式的,高度可用的系统,而且开发使用都很简便.它提供了一个功 ...
Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集
http://web.jobbole.com/89188/ 2016 – 对于未来五年内Web发展的7个预测 2015 – 我的前端之路:从命令式到响应式,以及组件化与工程化的变革怎么成为一名优秀的 ...
【转载】Linux小白最佳实践：《超容易的Linux系统管理入门书》（连载六）Linux的网络配置
本篇是Linux小白最佳实践第6篇,目的就是让白菜们了解Linux网络是如何配置的.Linux系统在服务器市场占有很大的份额,尤其在互连网时代,要使用计算机就离不开网络. 想每天能听到小妞的语音播报, ...
Linux小白最佳实践：《超容易的Linux系统管理入门书》（连载五）Linux系统的对话方式
本篇是Linux小白最佳实践第5篇,目的就是让白菜们了解Linux进程之间是如何对话的.之前连载的几篇,在微信上引起了很多的反响,有人也反映图多文字少,感觉没有干货.本篇选了大部分是实战讲解的&quo ...
RocketMQ入门（2）最佳实践
转自:http://www.changeself.net/archives/rocketmq入门(2)最佳实践.html RocketMQ入门(2)最佳实践一.服务端安装部署我是在虚拟机中的Cen ...
OPEN(SAP) UI5 学习入门系列之二：最佳实践练习（上）
这篇博文难产了很久,原来是打算一周更新一篇的,上周原计划写MVC,但是写了一半,发现带入了太多的细节,不太符合这个入门系列的主题. 当我们学习一个新的技能的时候,如果一开始就面对大量的细节,很容易陷入 ...
ECharts图表中级入门之formatter：夜谈关于ECharts图表内的数据格式化方法
来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...
转：ECharts图表组件入门教程之Theme：ECharts图表的皮肤是什么？如何给图表换主题（皮肤）Theme？
一.什么是ECharts图表的皮肤(主题)? 针对这个问题我只能这样回答,ECharts图表的主题(皮肤)就犹如人的衣服一样,是用来衬托和渲染主体,使其变得更加美观好看的目的.你去过ECharts图表 ...
OPEN(SAP) UI5 学习入门系列之二：最佳实践练习（下）
上期我们完成了一个简单的主从页面,但是页面是静态的,不能交互,功能也很简单,只有一个销售订单的列表. 我们今天就一鼓作气把代码全都写完,由于本次的代码量较大,所以只对重点代码部分进行讲解. 具体每个文 ...

随机推荐

学习zepto&period;js(对象方法)[3]
继续说zepto里attributes的相关操作. attr,removeAttr,prop这三个方法. attr(): 三种用途 get: 返回值为一个string字符串 $("<s ...
Bootstrap &lt&semi;基础二十五&gt&semi;警告（Alerts）
警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...
Ubuntu+Nginx+PHP的最简搭建方法
先安装: sudo apt-get install nginx php5-fpm -y 然后编辑配置文件: /etc/nginx/site-available/default 找到"loca ...
java jdbc----mysql的select、insert、update、delete
//-----------------------------------select---------------------------------- import java.sql.Connec ...
JavaScript中childNodes、children、nodeValue、nodeType、parentNode、nextSibling详细讲解
其中属性.元素(标签).文本都属于节点 <title></title> <scripttype="text/javascript"> windo ...
Asp&period;net Mvc 请求是如何到达 MvcHandler的——UrlRoutingModule、MvcRouteHandler分析，并造个*
这个是转载自:http://www.cnblogs.com/keyindex/archive/2012/08/11/2634005.html(那个比较容易忘记,希望博主不要生气的) 前言本文假定读者 ...
PICT安装及使用
一:PICT安装 1.下载pict33.msi:http://vdisk.weibo.com/s/d6k2tcgXDa7Eq 2.安装: 二:PICT的使用 1.在F:\PICT 目录下,新建一个tx ...
Inhouse interview(websense)
1.Tell me about yourself? My name is xxx,i 'm from xxx. now , I am a postgratuation and my major sub ...
JQuery插件的写法和规范
首先,在具体说明编写插件之前,我们先假定一个使用场景:有一个HTML页面(或.aspx页面),页面上放置了一个5行3列的表格,即:<table></table>标记,具体代码如 ...
牛客黑龙江大学程序设计竞赛重现 19-4-25 D
题意: n项工作 1~n 工时s[i] ~e[i], 工时有覆盖的工作不能被同一台机器同时操作, 问完成所有工作的最少机器数思路:前缀差分和 e.g. a 2 3 4 ...