<!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. margin赋值为负值的几种效果（负值像素，负值百分数）

    1.margin-top为负值像素 margin-top为负值像素,偏移值相对于自身,其后元素受影响,见如下代码: <!DOCTYPE html> <html lang=" ...

  2. wso2esb安装及helloworld

    1.系统环境 Ubuntu12.04    192.168.0.97    root/password找管理员 Ubuntu12.04    192.168.0.99    root/password ...

  3. C#编写Windows服务程序 (服务端),client使用 消息队列 实现淘宝 订单全链路效果

    需求: 针对 淘宝提出的 订单全链路 产品接入 .http://open.taobao.com/doc/detail.htm?id=102423&qq-pf-to=pcqq.group oms ...

  4. 使用JDK自带的Stax操作XML

    操作的books.xml <?xml version="1.0" encoding="UTF-8"?> <bookstore> < ...

  5. linux limits.conf 配置

    转自:http://kerry.blog.51cto.com/172631/300784 limits.conf 文件实际是 Linux PAM(插入式认证模块,Pluggable Authentic ...

  6. MySQL Desc指令相关

    MySQL Desc指令相关   2011-08-09 11:25:50|  分类: my基本命令 |举报 |字号 订阅 1.desc tablename; 例如 :mysql> desc jo ...

  7. 腾讯云-Linux 基础入门

    Linux 基础入门 目录操作 任务时间:5min ~ 10min 创建目录 使用 mkdir 命令创建目录 mkdir $HOME/testFolder # $HOME 当前用户的家目录  root ...

  8. eclipse中英文版转换（前提：有中文包）

    均为命令行启动(一次就可以) 中文版启动:eclipse.exe -nl zh 英文版启动:eclipse.exe -nl en

  9. Linux安装Nginx1.7.4、php5.5.15和配置

    Nginx是一个轻量级的高性能Webserver.反向代理server.邮件(IMAP/POP3/SMTP)server,是Igor Sysoev为俄罗斯訪问量第二的Rambler.ru网站开发,第一 ...

  10. dokuwiki语法

    dokuwiki是一个php写的维基系统,它的插件中包含markdown插件.但是markdown语法跟dokuwiki语法混着用会出现一些bug.所以还是学一下dokuwiki的语法吧. dokuw ...