<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</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>

echarts 使用demo的更多相关文章

  1. AngularJS引入Echarts的Demo

    最近要用到图表展示,想了想,还是首选Echarts,HighCharts和D3.js备用吧, 而项目中也用到了AngularJS,所以需要把Echarts引入到AngularJs中一起使用, 试了试, ...

  2. 通过echarts的demo

    通过最近两天对echarts的了解,下面用echarts.js写了一个小效果: 效果的demo为: <!DOCTYPE html> <html lang="en" ...

  3. echarts柱状图Demo

    echarts链接:http://gallery.echartsjs.com/editor.html?c=xB1Sfo5JbX 代码: var xData = ['a', 'b', 'c', 'd', ...

  4. Vue+webpack+echarts+jQuery=demo

    需要的插件: "dependencies": { "bootstrap": "^3.3.7", "echarts": & ...

  5. echarts 实例demo 详细讲解

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     & ...

  6. 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应

    1.前言 百度Echarts会常用到我们的项目中做统计,api很详细,demo也非常之多,我们常用的是应有尽有了,做一些小项目的时候,百度echarts的demo已足够用了.今天呢.主要是跟小白讲一下 ...

  7. 百度地图、ECharts整合HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  8. ECharts+百度地图网络拓扑应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  9. ECharts+BaiduMap+HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

随机推荐

  1. Python3 Tkinter-Grid

    1.创建 from tkinter import * root=Tk() lb1=Label(root,text='Hello') lb2=Label(root,text='Grid') lb1.gr ...

  2. Sail

    DescriptionThe polar bears are going fishing. They plan to sail from (sx,?sy) to (ex,?ey). However, ...

  3. 编译android6.0错误recipe for target 'out/host/linux-x86/obj/lib/libart.so' failed

    转自:http://blog.csdn.net/ztguang/article/details/52856076 trip: libpagemap_32 (out/target/product/xx/ ...

  4. SQL SERVER技术内幕之10 事务并发

    1.事务 1.1事务的定义 事务是作为单个工作单元而执行的一系列操作.定义事务边界有显式和隐式两种.显式事务的定义以BEGIN TRAN作为开始,以COMMIT TRAN提交事务,以ROLLBACK ...

  5. matplotlib中什么是后端

    在很多网上文档和邮件列表中提到了"后端",并且很多初学者会对这个术语迷惑.matplotlib把不同使用情形和输出格式作为目标.一些人用matplotlib在python shel ...

  6. 【python】python字符串前面加u,r,b的含义

    1.字符串前加 u 例:u"我是含有中文字符组成的字符串." 作用:后面字符串以 Unicode 格式 进行编码,一般用在中文字符串前面,防止因为源码储存格式问题,导致再次使用时出 ...

  7. Qt快速入门学习笔记（基础篇）

    本文基于Qter开源社区论坛版主yafeilinux编写的<Qt快速入门系列教程目录>,网址:http://bbs.qter.org/forum.php?mod=viewthread&am ...

  8. BZOJ4864 BeiJing 2017 Wc神秘物质（splay）

    splay维护区间最大值.最小值.相邻两数差的绝对值的最小值即可. #include<iostream> #include<cstdio> #include<cmath& ...

  9. （八）Redis事务与连接操作

    事务: multi # 标记一个事务块的开始.事务块内的多条命令会按照先后顺序被放进一个队列当中,最后由EXEC命令原子性地执行 exec # 执行所有事务块内的命令 descard # 取消事务,放 ...

  10. Elasticsearch 中文分词器IK

    1.安装说明 https://github.com/medcl/elasticsearch-analysis-ik 2.release版本 https://github.com/medcl/elast ...