首先需要到导入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. windows下MySQL更改数据库文件目录及1045,1067错误

    MySQL安装时不能选择数据库文件的安装位置, 也没有可用的直接更改数据库目录的工具,要想更改数据目录,方法如下: MySQL安装并配置完毕,默认的数据哭安装目录为 C:/ProgramData/My ...

  2. LeetCode Power of Three

    原题链接在这里:https://leetcode.com/problems/power-of-three/ 与Power of Two类似.检查能否被3整除,然后整除,再重复检查结果. Time Co ...

  3. 无法识别的属性“targetFramework”的解决方法

    本文导读:网站发布后,在IIS中浏览的时候出现以下异常:无法识别的属性“targetFramework”,请注意属性名称区分大小写.出现这个问题是由IIS配置该站点的.NET Framework 版本 ...

  4. ELK+kafka构建日志收集系统

    ELK+kafka构建日志收集系统   原文  http://lx.wxqrcode.com/index.php/post/101.html   背景: 最近线上上了ELK,但是只用了一台Redis在 ...

  5. js web实现移动端触控

    // 触摸事件 $(".m_l_i_l a").on("touchstart", function(){ $(this).css("color&quo ...

  6. Apache和IIS服务器共存问题--来自网上内容

    1.apache 主要支持PHP   IIS 主要支持asp  静态的网页他们都支持入htm,端口冲突的话你可以更改其中一个服务器的端口来实现端口的避让,IIS在右击“我的电脑”“管理”“服务和应用程 ...

  7. Matlab的XTickLabel中数值带下标

    %axis为'x'或'y',分别表示更改x或y刻度 %ticks是字符cell function settick(axis,ticks) n=length(ticks); tkx=get(gca,'X ...

  8. Dijkstar算法的数学原理

    Dijkstar算法是荷兰数学家迪克斯屈拉(or迪杰斯特拉?)在1959年发现的一个算法.是现有的几个求带权图中两个顶点之间最短通路的算法之一.算是一个相当经典的算法了. 迪克斯屈拉算法应用于无向连通 ...

  9. 构建高性能的ASP.NET应用程序

    看见大标题的时候,也许各位看官会自然而然的联想到如何在设计阶段考虑系统性能问题,如何编写高性能的程序代码.关于这一点,大家可以在MSDN和相关网站上找到非常多的介绍,不过大多是防患于未难,提供的是在设 ...

  10. 开始跟踪Redis啦，开帖

    随着NoSql的流行,对这方面的产品开始关注起来,之前一直只是看看.从昨天开始决定把Redis的实现机制啃下来,毕竟代码量也就2W行. 每天花时间看看,记录下成果. here we go.