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. SSH整合所需的jar包

    Spring3.1+Hibernate3+Struts2的最新整合所需要的jar包 Spring的基本jar包: 1.org.springframework.web-3.1.4.RELEASE.jar ...

  2. iOS-TextField知多少

    iOS-TextField知多少 //初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRect ...

  3. ajax利用json进行服务器与客户端的通信

    1.JQuery中$.ajax()方法参数详解 http://blog.sina.com.cn/s/blog_4f925fc30100la36.html 2.服务器端获取String que=requ ...

  4. Java判断一个时间是否在另一个时间段内

    需求:当时间在凌晨0点至0点5分之间程序不执行. 也就是实现判断当前时间点是否在00:00:00至00:05:00之间 方法: Java代码 : /** * 判断时间是否在时间段内 * * @para ...

  5. NBUT 1010 魔法少女（DP）

    [1010] 魔法少女 时间限制: 1000 ms 内存限制: 65535 K 问题描述 前些时间虚渊玄的巨献小圆着实火了一把. 在黑长直(小炎)往上爬楼去对抗魔女之夜时,她遇到了一个问题想请你帮忙. ...

  6. JS采用正则表达式简单获取URL地址栏参数

    GetUrlParam:function GetUrlParam(param){ var reg = new RegExp("(^|&)"+ param +"=( ...

  7. Nginx模块fastcgi_cache的几个注意点

    fastcgi响应http请求的结果中，响应头包括Expires、Cache-Control、Set-Cookie三个，都会可能不被cache. thinkphp3.0禁止session自动启动 co ...

  8. 医生加号页改版,就一个Bug, 看医生工作台一期需求

    8/8日报 分级埋点:     [MobClick event:UmengPagePlusDoctor attributes:@{@"page":@"plusPage&q ...

  9. IN()

    High Performance My SQL, Third Edition Consider the followingWHERE clause: WHERE eye_color IN('brown ...

  10. SQL_NO_CACHE

    http://dev.mysql.com/doc/refman/5.7/en/query-cache-in-select.html MySQL 5.7 Reference Manual  /  ... ...