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. Dijkstra堆优化与SPFA模板

    Dijkstra+优先队列 #include<cstdio> #include<cctype> #include<queue> #include<cstrin ...

  2. Linux压力测试工具

    1 http_load:http://www.oschina.net/p/http_load 命令行输入man http_load 或者 http_load -h可以看到工具的使用方式: 参数说明: ...

  3. 全面解析Linux数字文件权限

    全面解析Linux数字文件权限 来源:   时间:2013-09-04 20:35:13   阅读数:11433 分享到:0 [导读] 在刚开始接触Linux时对于文件权限的理解并不是很透彻,这里详细 ...

  4. 常用正则表达式(?i)忽略字母的大小写！

    1.^/d+$ //匹配非负整数(正整数 + 0) 2.^[0-9]*[1-9][0-9]*$ //匹配正整数 3.^((-/d+)|(0+))$ //匹配非正整数(负整数 + 0) 4.^-[0-9 ...

  5. shell中的函数、数组

    函数定义: 数组:

  6. JavaScript - prototype 和 call 的理解

    prototype: 其实对象直接通过 [object.属性/方法]  来定义方法和属性也是可以的,但是会变成静态属性和静态方法,也就是调用的时候也是通过“.”来调用的.但如果通过prototype来 ...

  7. jQuery 判断表单中多个 input text 中至少有一个不为空

    html: 名称1:<input class="seasoning_name" type="text" name="seasoning_name ...

  8. ThinkPHP 学习笔记 ( 五 ) 数据验证

    根据官网的教程 ( http://www.thinkphp.cn/info/171.html ),数据验证的使用静态定义方式 ( 以 regex 为例 ) 无法验证数据: 而采用动态验证则正常: 控制 ...

  9. http响应报文和http请求报文 详细信息

    tomcat项目本身的jar包

  10. mysql语句优化认识