<!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. Linux 如何判断自己的服务器是否被入侵

    如何判断自己的服务器是否被入侵了呢?仅仅靠两只手是不够的,但两只手也能起到一些作用,我们先来看看UNIX系统上一些入侵检测方法,以LINUX和solaris为例. 1.检查系统密码文件 首先从明显的入 ...

  2. jquery选中以什么开头的元素

    $("[id^=percent]").size() ^=:表示以什么开头 $=:表示以什么结尾 ~=:表示包含什么 id:表示按id选择

  3. [Python]网络爬虫（七）：Python中的正则表达式教程

    转自:http://blog.csdn.net/pleasecallmewhy/article/details/8929576#t4 接下来准备用糗百做一个爬虫的小例子. 但是在这之前,先详细的整理一 ...

  4. sp_trace_setevent sqlserver跟踪事件及列

    常用几个事件 10 RPC:Completed12 SQL:BatchCompleted43 SP:Completed sp_trace_setevent sp_trace_setevent [ @t ...

  5. LoadRunner 检查点函数总结

    今天我来总结一下Loadrunner中的检查点函数,主要介绍两个函数:web_find()和web_reg_find() 这两个函数均用于内容的查找,但两者也有本质的区别,具体介绍如下: 一.web_ ...

  6. Spring mvc中@RequestMapping 6个基本用法小结

    Spring mvc中@RequestMapping 6个基本用法小结 小结下spring mvc中的@RequestMapping的用法. 1)最基本的,方法级别上应用,例如: @RequestMa ...

  7. JavaScript的技巧和最佳实践

    JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发 (Node.js和Wakanda)等等.JavaScript还 ...

  8. ［ubuntu］为ubuntu设立“任务管理器”的组合键

    在windows下面,我们可以方便的使用ctrl+alt+delete调出任务管理器,那么在ubuntu下面如何实现呢?这里我们介绍两种方法:1.在终端下运行: 代码:gconf-editor 找到: ...

  9. ArchLinux新版本(pacstrap安装)及国内较优源推荐

    下载安装镜像和配置虚拟机都略过. 进入安装模式以后第一件事是要进行分区,分区很重要,怎么分区是由后面的grub的模式来决定的.grub有3种模式,分别对应grub-bios-gpt,grub-bios ...

  10. vi/vim 查找替换使用方法

    http://wzgyantai.blogbus.com/logs/28117977.html vi/vim 中可以使用 :s 命令来替换字符串.该命令有很多种不同细节使用方法,可以实现复杂的功能,记 ...