首先需要到导入echatrs.js文件

    <script src="dist/echarts.js"></script>

　　路径配置

 require.config({

         paths: {

 //            当前文件下的文件名（放有echarts.js文件）

            echarts: 'echarts'

         }

     });

使用

require(

            [

//            必须为echarts

                'echarts',

//                    当前文件下的chart下的bar.js模块

                'echarts/chart/bar' // 在echarts的基础上加载柱状图bar模块，按需加载

            ],

function (ec) {

//        基于准备好的dom，初始化echarts图表

    var myChart = ec.init(document.getElementById('main'),'macarons');

    var option = {

              加载的内容.........

        };

//          为echarts对象加载数据

            myChart.setOption(option);

        }

);

详细代码如下：

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

</head>

<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id="main" style="height:400px;"></div>

<!-- ECharts单文件引入 -->

<script src="echarts/echarts.js"></script>

<script type="text/javascript">

    // 路径配置

    require.config({

        paths: {

//            当前文件下的文件名（放有echarts.js文件）

            echarts: 'echarts'

        }

    });

    // 使用

    require(

            [

                'echarts/echarts',

//                    当前文件下的chart下的bar.js模块

                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

            ],

            function (ec) {

                // 基于准备好的dom，初始化echarts图表

                var myChart = ec.init(document.getElementById('main'),'macarons');

                var option = {

//                    气泡提示框，常用于展现更详细的数据

                    tooltip: {

                        show: true

                    },

//                    图例，表述数据和图形的关联

                    legend: {

                        data:['销量', '降水量']

                    },

                    calculable: true,

//                    辅助工具箱，辅助功能，如添加标线，框选缩放等

                    toolbox: {

                        show : true,

                        feature : {

                            mark : {show: true},

                            dataView : {show: true, readOnly: false},

                            restore : {show: true},

                            saveAsImage : {show: true}

                        }

                    },

//                    直角坐标系中的横轴，通常并默认为类目型

                    xAxis : [

                        {

                            type : 'category',

                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

                        }

                    ],

//                   直角坐标系中的纵轴，通常并默认为数值型

                    yAxis : [

                        {

                            type : 'value'

                        }

                    ],

//                    series（直角系）

                    series : [

                        {

                            "name":"销量",

                            "type":"bar",

                            "data":[5, 20, 40, 10, 10, 20]

                        }

                    ]

                };

                // 为echarts对象加载数据

                myChart.setOption(option);

            }

    );

</script>

</body>

Echarts的基本用法的更多相关文章

  1. echarts 的 formatter用法

    前言:formatter格式化方法.使用formatter调用自定义的数据,把内容通过处理让变成我们想要的样子. 比如,echarts数据显示是这样的(bug:部分内容被隐藏掉了,显示太长,不美观) ...

  2. Vue中echarts的基本用法

    前言:同大多数的前端框架一样,先读官网的使用方法.学会基本使用后,在实例中找到自己想要demo.拿过来改一改,一个echarts图表就形成,毕竟人家做就是为了方便使用. 我是在vue中下面直接使用的e ...

  3. ECharts 的用法

    1. ECharts的获得 官网: https://echarts.baidu.com/ 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求 ...

  4. [struts2]struts结合ECharts的用法

    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script> < ...

  5. echarts用法

    参考文档: https://github.com/xlsdg/vue-echarts-v3 1.下载echarts插件 $ npm install --save vue-echarts-v3 2.引入 ...

  6. ECharts中color : function的用法（转）

    ECharts图表实战经验1:如何设置图表同序列不同数据点的独立颜色值   最近有不少朋友在追问这样一个问题:我单序列的柱状图,我想让每一个根柱子的颜色都不一样,应该如何做? 针对这个问题,其实我只想 ...

  7. 浅谈 echarts 用法

    对于服务型的公司来说,需要了解用户的使用趋势,来帮助分析市场的走向,所以说统计在一个管理后台中是必不可少的. 会用到echarts插件 ,其官网网址 http://echarts.baidu.com/ ...

  8. echarts简单用法快速上手

    1.html结构 简单说就是一个标签一个图表:2.初始化:var myEcharts = echarts.init(document.getElementById("xxx")): ...

  9. echarts实践用法

    在折线图中,当点击某个节点,出现提示浮框,并且可以进行点击操作 echarts 配置 tooltip: { show: true, formatter: function(e) { return 'a ...

随机推荐

  1. centos 下 安装zookpeer

    tar xvf zookeeper-3.4.6.tar.gz cd /usr/local/zookpeer/ mkdir /var/zookpeer mkdir /var/zookpeer/data ...

  2. jQuery源代码阅读之三——jQuery实例方法和属性

    jQuery实例方法及属性相关的代码结构如下 jQuery.fn=jQuery.prototype={ jQuery:core_version, constructor:jQuery, selecto ...

  3. RDIFramework.NET ━ 9.6 模块（菜单）管理 ━ Web部分

    RDIFramework.NET ━ .NET快速信息化系统开发框架 9.6  模块(菜单)管理 -Web部分  模块(菜单)管理是整个框架的核心,主要面向系统管理人员与开发人员,对普通用户建议不要授 ...

  4. 获取乌云补天指定关键字的漏洞并输出URL和标题

    #coding=utf-8 import urllib2 import re import time def timestamp():         return str(time.strftime ...

  5. [转载] 使用MySQL Proxy解决MySQL主从同步延迟

    原文地址:http://koda.iteye.com/blog/682547 MySQL的主从同步机制非常方便的解决了高并发读的应用需求,给Web方面开发带来了极大的便利.但这种方式有个比较大的缺陷在 ...

  6. iOS 杂记

    一,demo 1,视图跳转 MaryPopin:  https://github.com/Backelite/MaryPopin 2,Nimbus是一个开源的iOS框架,比起Three20,Nimbu ...

  7. Azure sdk for python

    http://www.oschina.net/translate/python-windows-azure Len  6:17:54 PM __author__ = 'len.li' from azu ...

  8. Eclipse下Tomcat插件的安装

    在Eclipse下安装Tomcat插件使开发,编译,发布变的相当的简单,下面就说一下安装的过程,很简单的: 1.先下载一个tomcat插件 地址:http://www.eclipsetotale.co ...

  9. Java 可变参数列表

    1．可变参数列表的简单实现 当调用方法时,方法的参数个数或类型未知时,称其为可变参数列表.在以前的Java代码中,可以使用Object数组来实现这样的功能.因为,所有的类都是直接或间接继承于Objec ...

  10. js !!条件判断或运算的作用

    今天看到一个判断语句非常奇怪: if(!!selected){} //为什么是双'!'号呢? 自己查了下资料终于明白了这其中的原理: 原来'!!'会将表达式转为Boolean类型的数据. 如果'!un ...