Echarts的基本用法

时间：2022-09-12 22:57:17

首先需要到导入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);

        }

);

详细代码如下：

Echarts的基本用法Echarts的基本用法Echarts的基本用法

<!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. &lbrack;struts2&rsqb;struts结合ECharts的用法

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

  5. echarts用法

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

  6. ECharts中color &colon; 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. 【Python⑥】python的缩进，条件判断和循环

    缩进 Python的最大特色是用缩进来标明成块的代码. 这点和其他语言区别很明显,比如大家熟悉的C语言里: ) { num+=; flag-=; } 而在python中: if flag>= 0 ...

  2. C&plus;&plus;中默认构造函数中数据成员的初始化

    构造函数的任务是初始化数据成员的,在类中,如果没有显示定义任何构造函数,编译器将为我们创建一个构造函数,称为合成的默认构造函数,合成的默认构造函数使用与变量初始化相同的规则来初始化成员.即当类中的数据 ...

  3. JQuery安全分析

    JQuery安全分析: JQuery的风险均来源于对输入的数据没有进行有效性检验.客户端的Javascript需要检验:来源于服务器的数据.来源于当前页面的用户输入,服务器端需要检验来源于用户端的数据 ...

  4. mvc 设置默认页技巧

    打开网址:http://xxxx.com自动跳转==>http://xxx.com/home/index 设置route入口: routes.MapRoute( name: "Main ...

  5. （转）如何在maven的pom&period;xml中添加本地jar包

    1 maven本地仓库认识 maven本地仓库中的jar目录一般分为三层:图中的1 2 3分别如下所示: 1 groupId 2 artifactId 3 version 4 jar包的依赖 如果要将 ...

  6. 小明历险记：规则引擎drools教程一

    小明是一家互联网公司的软件工程师,他们公司为了吸引新用户经常会搞活动,小明常常为了做活动加班加点很烦躁,这不今天呀又来了一个活动需求,我们大家一起帮他看看. 小明的烦恼 活动规则是根据用户购买订单的金 ...

  7. web前端-----jQuery

    web前端之jQuery篇 一 jQuery是什么? ［1］   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］   j ...

  8. 8&period;1 使用Python操作SQLite数据库

    SQLite是内嵌在Python中的轻量级.基于磁盘文件袋额数据库管理系统,不需要安装和配置服务,支持使用SQL语句来访问数据库.该数据库使用C语言开发,支持大多数SQL91标准,支持原子的.一致的. ...

  9. 用antd和webview打造一款大数据客户端程序

    要想提高工作效率,必须得有好的工具.大数据有很多组件,但是邪了门儿的就是,竟然没有一个好用的客户端程序. 没办法,我只好用antd+webview自己做了一款跨平台的桌面应用. 先看下效果. 这是gi ...

  10. C&num;基础——C&num;中问号的使用

    1. 可空类型修饰符(?): 引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空. 例如:string str=null; 是正确的,int i=null; 编译器就会报错. 为了使值 ...

相关文章