1.效果图

2. code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <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 : [ //x轴的 标记

                            {

                                type : 'category',

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

                            }

                        ],

                        yAxis : [

                            {

                                type : 'value' // y轴的数值是根据series数组中的data数组的最大值来定的

                            }

                        ],

                        series : [

                            {

                                "name":"销量",

                                "type":"bar",

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

                            }

                        ]

                    };

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

                }

        );

    </script>

</head>

<body>

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

</body>

</html>

echarts -01 入门的更多相关文章

  1. Python学习--01入门

    Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...

  2. [译]Vulkan教程(01)入门

    [译]Vulkan教程(01)入门 接下来我将翻译(https://vulkan-tutorial.com)上的Vulkan教程.这可能是我学习Vulkan的最好方式,但不是最理想的方式. 我会用“d ...

  3. Echarts和Highcharts学习笔记01——入门了解

      Echarts是国内百度团队开发的(开源),基于Canvas,适合数据量较大的情况: Highcharts是国外的(商用需授权),基于SVG,方便自己定制,但能使用的图表类型有限: Echarts ...

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

    ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...

  5. ECharts简单入门

    图1和图2是手机上显示的效果, 图3是电脑浏览器显示的效果. 如何使用ECharts? 1.下载echarts.js 2.引入echarts.js <script type="text ...

  6. ECharts快速入门

    一.简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Saf ...

  7. ECharts简单入门demo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. Echarts轻松入门，内附踩坑秘籍

    首先介绍一下我们的主角ECharts ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fir ...

  9. Echarts快速入门---------v客学院技术分享

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...

随机推荐

  1. 【BZOJ】2820: YY的GCD（莫比乌斯）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2820 此题非常神! 下文中均默认n<m 首先根据bzoj1101的推理,我们易得对于一个数d使 ...

  2. jQuery 跨域访问问题解决方法（转）

    转自:http://www.jb51.net/article/21213.htm 浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记 ...

  3. List 中对象属性排序

    有几个方法可以实现:让 Student 实现Comparable接口,或是实例化一 个比较器, 现在用 Comparator 比较器实例来做一个:ComparableTest.java import  ...

  4. FileStorage Read String Start With Number Need Quotation Mark 读取数字开头的字符串需要加引号

    // Write data FileStorage fs("test.yml", FileStorage::WRITE); fs << "MyString&q ...

  5. Html - 浮动的云朵

    http://www.17sucai.com/download/9006.html @-webkit-keyframes animate-cloud { from { background-posit ...

  6. C++的ORM 开源框架

    C++的ORM 开源框架 介绍一个C++的ORM工具ODB SOCI.LiteSQL.POCO数据库访问类库对比

  7. PHP 错误与异常 笔记与总结（10）错误处理器测试

    关联文件:myErrorHandler.php (上一篇) 先测试通知级别的错误的自定义处理: testErrorHandler.php <?php require_once 'myErrorH ...

  8. MySQL 使用explain查看执行计划

    使用explain查看执行计划, 下面是针对这两条语句进行分析,其查询结果是一样的. EXPLAIN select n.id,n.title from info n inner join info_t ...

  9. 【翻译】口袋妖怪X/Y 制作技法

    口袋妖怪X/Y [口袋妖怪]系列最终的全3D化     再现图像风格的制作技法   完成系列最初的全3D化的本作,在手掌游戏机的性能和容量的限制中,把杉森建氏的公式设定图风格用Toon Shading ...

  10. nginx gzip 模块配置

    #gzip模块设置 gzip on; #开启gzip压缩输出 gzip_min_length 1k; #最小压缩文件大小 gzip_buffers 4 16k; #压缩缓冲区 gzip_http_ve ...