首先需要到导入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. IEnumerable 使用foreach 详解

    自己实现迭代器 yield的使用 怎样高性能的随机取IEnumerable中的值 我们先思考几个问题: 为什么在foreach中不能修改item的值? 要实现foreach需要满足什么条件? 为什么L ...

  2. distribution数据库过大问题

    从事件探查器中监控到如下语句执行时间查过 1分钟: EXEC dbo .sp_MSdistribution_cleanup @min_distretention = 0, @max_distreten ...

  3. webservice的简单示例的实现步骤

    前段时间在webservice的问题上纠结了很长时间,本来想写在thinkphp的框架里面,可是怎么也实现不了,目前为止也仅仅是学会的没有框架的接口的开发. 在此资源共享一下步骤: 首先我创建的文件有 ...

  4. linux 下查看系统资源和负载，以及性能监控

    1,查看磁盘   df -h   2,查看内存大小   free   free [-m|g]按MB,GB显示内存   vmstat   3,查看cpu   cat /proc/cpuinfo   只看 ...

  5. 翻译：Lisp Style Tips for the Beginner - Heinrich Taube

    原文:Lisp Style Tips for the Beginner 本篇文章是一篇非正式的摘要,旨在帮助新手写出高效.易读的Lisp代码. 1 赋值   1.1 避免使用eval.赋值是Lisp内 ...

  6. Web3D编程总结——3D碰撞检测初探

    自己动手写一个方法比分析他人的写的方法困难很多,由此而来的对程序的进一步理解也是分析别人的代码很难得到的. 一.先来几张效果图: 1.场景中有两个半径为1的球体,蓝色线段从球心出发指向球体的“正向” ...

  7. JAVA经典算法40题（1-20）

    [程序1]   题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第四个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少?   1.程序分析:   兔子的规律 ...

  8. CentOS 命令模式下设置静态IP

    ASP.NET程序猿第一次修改IP,之前没有接触过Linux,有点伤不起... # cd /etc/sysconfig/network-scripts/ # ls  会看到 ifcfg-eth0 if ...

  9. AJAX-----07XMLHttpRequest对象的处理返回的JSON类型数据

    要玩json首先就需要知道一般都数据是怎么处理的: <!DOCTYPE html> <html lang="en"> <head> <me ...

  10. MyEclipse启动慢的办法

    禁用myeclipse updating indexes MyEclipse 总是不停的在 Update index,研究发现Update index...是Maven在下载更新,但很是影响myecl ...