<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Echarts图表</title>

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

 </head>

 <body>

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

 </body>

 </html>

 <script>

     var myChart=echarts.init(document.getElementById('main'))

     var option={

         legend:{

             padding:10,

             itemGap:10,//图例间隔

             data:['邓艳波','杨国娥']//legend的data值要和series的对象的每个name 值相对应，不然不出来lenend

         },

         tooltip:{//悬浮的时候提示框

             trigger:'item'//触发方式

         },

         xAxis:{

             type:'category',//什么类型的，比如数值？

             data:['周一','周二','周三','周四','周五','周六','周日']

         },

         yAxis:{

           type:'value',

             boundaryGap:[0.1,0.1],//类目起始和结束两端空白策略，见下图，默认为true留空，false则顶头

             splitNumber:4,//数值的分割段数，不指定的时候根据最大值最小值进行划分

         },

         series:[

             {

                 name:'邓艳波',//系列名如启用legend，该值将被legend.data索引相关

                 type:'line',//折线图

                 data:[112,23,45,56,233,343,454,89,343,123,45,76]

             },

             {

                 name:'杨国娥',//系列名

                 type:'line',//折线图

                 data:[54,543,23,322,33,63,111,222,23]

             }

         ]

     }

     myChart.setOption(option)

 </script>

Echart的基础开发模板的更多相关文章

  1. 奉上简单的.Net后端开发模板

    假定一个场景,开始做开发的你,领导走到你的面前说道:"小伙子,看了简历和最近的工作表现,很不错,现在交给一个任务,开发一个简单的CMS后端接口吧,前端有人配合你",当时你内心读白: ...

  2. Vue基础项目模板

    https://github.com/wanglong/vue-element-admin.git 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍 一站式开源运维平台,分享给大 ...

  3. 在Visual Studio 2015 中添加SharePoint 2016 开发模板

    前言 SharePoint 2016已经发布很久了,然而,默认安装VS2015以后,却没有SharePoint 2016的开发模板.其实问题很简单,和VS2012开发SharePoint 2013一样 ...

  4. Centos 基础开发环境搭建之Maven私服nexus

    hmaster 安装nexus及启动方式 /usr/local/nexus-2.6.3-01/bin ./nexus status Centos 基础开发环境搭建之Maven私服nexus . 软件  ...

  5. Web基础开发最核心要解决的问题

    Web基础开发要解决的问题,往往也就是那些框架出现的目的 - 要解决问题. 1. 便捷的Db操作: 2. 高效的表单处理: 3. 灵活的Url路由: 4. 合理的代码组织结构: 5. 架构延伸 缓存. ...

  6. [Android] 环境配置之基础开发环境（SDK/Android Studio）（转）

    [Android] 环境配置之基础开发环境(SDK/Android Studio)   博客: blog.csdn.net/qiujuer 网站: www.qiujuer.net 开源库: Geniu ...

  7. SharePoint2010沙盒解决方案基础开发——关于TreeView树形控件读取列表数据（树形导航）的webpart开发及问题

    转:http://blog.csdn.net/miragesky2049/article/details/7204882 SharePoint2010沙盒解决方案基础开发--关于TreeView树形控 ...

  8. Dynamics CRM 开发模板使用手册（插件开发）

    CRM开发手册 本手册介绍在Visual Studio 2015 + Dynamics CRM Developer Extensions模板开发环境下,插件和JS脚本的开发.部署与调试过程. 手册中提 ...

  9. 微信小程序开发模板消息的时候 出现 errcode: 41028, errmsg: "invalid form id hint:

    小程序开发模板消息的时候  出现 errcode: 41028, errmsg: "invalid form id hint: 我是使用的微信支付发送模板消息,提示的formid无效的 大家 ...

随机推荐

  1. java开发工具之myeclipse调优

    -vmargs -Xms512m //堆的最小值-Xmx512m //堆的最大值(两者设置相同,避免运行时的自动扩张)-XX:PermSize=256m //永久代的最小值 -XX:MaxPermSi ...

  2. 16、java包装类

    一.包装类的由来: JAVA是面向对象的编程语言,但它也包含了8种基本数据类型,这8个基本数据类型不支持面向对象的编程机制,基本数据类型的数据也不具备“对象”的特性:没有属性,方法可以被调用.JAVA ...

  3. (转)Content-Disposition的使用和注意事项

    最近不少Web技术圈内的朋友在讨论协议方面的事情,有的说web开发者应该熟悉web相关的协议,有的则说不用很了解.个人认为这要分层次来看待这个问 题,对于一个新手或者刚入门的web开发人员而言,研究协 ...

  4. java装箱拆箱

    基本数据类型的自动装箱(autoboxing).拆箱(unboxing)是自J2SE 5.0开始提供的功能. 一般我们要创建一个类的对象的时候,我们会这样: Class a = new Class(p ...

  5. linux上传下载文件rz，sz

    [一般用于SecureCRT ssh中使用] █ 法一:直接用yum安装lrzsz(推荐) yum install lrzsz -y 注意:rhel安装完系统后 直接可使用 rz sz █ 法二:源文 ...

  6. Web文件管理、私有云存储管理工具 DzzOffice

    DzzOffice-大桌子办公系统本身是一款图形化,简单易用的网盘管理软件.可以实现将企业的局域网服务器.企业私有云存储.企业租用的公有云存储(如阿里云OSS).企业员工的私有云存储(如百度网盘.Dr ...

  7. Ubuntu14.04 mount远程服务器上的目录

    备忘用. 一,远程服务器设置: 1,在/etc/exports中添加如下配置: /home/xxx *(insecure,rw,sync,no_root_squash,anonuid=123,anon ...

  8. 在sys用户下执行的sql脚本创建了摁多个表和序列, 怎么回退?

    一个个删除, 暂时不会别的方法...

  9. HDUOJ--Holding Bin-Laden Captive!

    Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Ja ...

  10. 学习JUnit

    一.为什么测试很重要? 塑造系统的设计.我们知道输入和输出应该是什么样的,但是我们需要创建什么对象来做到这一点呢?代码应该塑造成什么样的"形状"?编写测试可以让我们知道应该创建什么 ...