<!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. 手机站测试工具（node服务器）

    最近在工作中遇到手机站测试的问题,于是就写了一个node服务外加一个第三方的转二维码功能,欢迎拍砖~ 项目地址:https://github.com/finderL/webserver

  2. Pipeline组Beta版本发布说明

    项目名称 Pipeline 项目版本 Beta版本 负责人 北京航空航天大学计算机学院 IloveSE 小组 联系方式 http://www.cnblogs.com/IloveSE 要求发布日期 20 ...

  3. CodeForces - 792C Divide by Three (DP做法)

    C. Divide by Three time limit per test: 1 second memory limit per test: 256 megabytes input: standar ...

  4. a2

    Alpha 冲刺报告 队名: 组长:吴晓晖 今天完成了哪些任务: 代码量300+,完成了百度地图API的引入. 展示GitHub当日代码/文档签入记录: 明日计划: 整理下这两个功能,然后补些bug ...

  5. 深入理解Java之数据类型

    一.概述 我们通过编程解决一个具体问题时,首先要做的工作是用各种“数据结构”表示问题中的实体对象,而后才能着手研究描述具体业务逻辑的算法.这也正印证了”程序 = 数据结构 + 算法“.而这里的数据结构 ...

  6. c# 中base64字符串和图片的相互转换

    c#base64字符串转图片用到了bitmap类,封装 GDI+ 位图,此位图由图形图像及其特性的像素数据组成. Bitmap 是用于处理由像素数据定义的图像的对象. 具体bitmap类是什么可以自己 ...

  7. 3dContactPointAnnotationTool开发日志（十八）

      今天实现了tab效果,按tab键可以在status面板的各个输入框内来回切换,参考Unity3D - UGUI实现Tab键切换输入框.按钮(按Tab键切换高亮显示的UI)

  8. 【week2】 累计进度条、psp、饼图

    每周例行报告 本周PSP 类别 任务 开始时间 结束时间 被打断时间 总计工作时间 2016年9月9日 读书 构建之法-5.6章 19:00 20:00 0 60min 2016年9月10日 看博客 ...

  9. anaconda安装不存在的包

    Anaconda作为一个工具包集成管理工具,下载python工具包是很方便的,直接敲: conda install package_name 1 但是有时候安装一个工具包(如skimage)的时候,在 ...

  10. vue-cli项目里npm安装使用elementUI

    第一步:进入到项目目录里 npm i element-ui -S 第二步:在main.js中引入 import ElementUI from 'element-ui' import 'element- ...