首先需要到导入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. LeetCode Range Sum Query 2D - Mutable

    原题链接在这里:https://leetcode.com/problems/range-sum-query-2d-mutable/ 题目: Given a 2D matrix matrix, find ...

  2. rndc控制远程dns服务器配置方法

    1- 如果不存在/etc/rndc.conf touch /etc/rndc.conf chown named:named /etc/rndc.conf 2- rndc-confgen > /e ...

  3. Advanced REST client

    好用的测试工具,老是忘记名字chrome插件 Advanced REST client

  4. Python之路-python（set集合、文本操作、字符编码 ）

    一.集合操作(set)                                                                                          ...

  5. C++之路进阶——bzoj1934（善意的投票）

    F.A.Qs Home Discuss ProblemSet Status Ranklist Contest ModifyUser  hyxzc Logout 捐赠本站 Notice:由于本OJ建立在 ...

  6. windows系统调用 调度优先级

    #include "iostream" #include "windows.h" using namespace std; class CWorkerThrea ...

  7. C语言通用双向循环链表操作函数集

    说明 相比Linux内核链表宿主结构可有多个链表结构的优点,本函数集侧重封装性和易用性,而灵活性和效率有所降低.     可基于该函数集方便地构造栈或队列集.     本函数集暂未考虑并发保护. 一  ...

  8. AJAX-----01远古时期的ajax

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 使用boost的asio，io_service无法初始化

    今天用vs编一个用asio写的程序,发现在tcp::acceptor::open()失败,查了好久,发现是acceptor绑定的io_service没有正确的初始化,又查了半天,发现是需要加一个预编译 ...

  10. Extract Stylish styles and save as JSON format

    Introduction Stylish is a easy browser extension/plugin for users to customizing the web page stylin ...