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. HDU 4671 Partition(定理题)

    题目链接 这题,明显考察搜索能力...在中文版的维基百科中找到了公式. #include <cstdio> #include <cstring> #include <st ...

  2. 【C语言】09-字符串

    一.字符串简介 * 在Java中,一个字符串可以用String类型来存储 String s = "MJ"; C语言中没有String这种类型.其实字符串就是字符序列,由多个字符组成 ...

  3. for循环下九九乘法表

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  5. IOS第四天(4:下一题和选框的实现)

    #import "HMViewController.h" #import "HMQuestion.h" #define kButtonWidth 35 #def ...

  6. PowerShell - Read an Excel file using COM Interface

    http://www.lazywinadmin.com/2014/03/powershell-read-excel-file-using-com.html

  7. POJ 1573 Robot Motion（BFS）

    Robot Motion Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 12856   Accepted: 6240 Des ...

  8. IE6 BUG 汇总

    1.IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, 而左侧则呈现出20px,解决它的方 ...

  9. hdu 1116 并查集和欧拉路径

    ---恢复内容开始--- 把它看成是一个图 只是需要欧拉路径就可以了 首尾能连成一条线即可 如果要判断这个图是否连通 得用并查集 在hrbust oj里面看答案学到的方法 不用各种for循环套着判断能 ...

  10. 纯PHP实现定时器任务（Timer）

    纯PHP实现定时器任务(Timer)   定时器任务,在WEB应用比较常见,如何使用PHP实现定时器任务,大致有两种方案:1)使用Crontab命令,写一个shell脚本,在脚本中调用PHP文件,然后 ...