---恢复内容开始---

echarts中的柱状图和折线图的参数配置可以共用，一般只需要修改图表类型这一个参数即可。

一、echarts最简单的实例

　　1、折线图/柱状图

　　

  1. <html>
  2.     <head>
  3.         <script src="resource/jquery-3.3.1.min.js"></script>
  4.         <script src="resource/echarts.js"></script>
  5.         <script type="text/javascript">
  6.             $(document).ready(function(){
  7.                 //创建存放图表的echar
  8.                 var chart = echarts.init($('#echartsLineDemo')[]);
  9.                 //echars的参数配置项
  10.                 option = {
  11.                     xAxis: {
  12.                         //坐标轴类型，大致可分类目轴category，x轴；数值轴value，y轴；
  13.                         type: 'category',
  14.                         //坐标轴名称数组
  15.                         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  16.                     },
  17.                     yAxis: {
  18.                         type: 'value'
  19.                     },
  20.                     series: [{
  21.                         //需要显示的数据
  22.                         data: [, , , , , , ],
  23.                         //图表类型：line是折线、bar是柱状图、pei是饼图。
  24.                         type: 'line'
  25.                     }]
  26.                 };
  27.                 //添加option
  28.                 chart.setOption(option);
  29.             });
  30.  
  31.         </script>
  32.     </head>
  33.     <body>
  34.         <div id="echartsLineDemo" style="height: 500px;width: 800px;" >
  35.  
  36.         </div>
  37.  
  38.     </body>
  39. </html>

补充：折线图和柱图图的配置类似，只需把图表类型修改成bar即可。

　　2、饼图

　　　　只需要更改option的配置即可。

  1. option = {
  2.                     title : {
  3.                         text: '某站点用户访问来源',
  4.  
  5.                         x:'center'
  6.                     },
  7.  
  8.                     series : [
  9.                         {
  10.                             name: '访问来源',
  11.                             type: 'pie',
  12.                             radius : '55%',
  13.                             center: ['50%', '60%'],
  14.                             data:[
  15.                                 {value:335, name:'直接访问'},
  16.                                 {value:310, name:'邮件营销'},
  17.                                 {value:234, name:'联盟广告'},
  18.                                 {value:135, name:'视频广告'},
  19.                                 {value:1548, name:'搜索引擎'}
  20.                             ],
  21.  
  22.                         }
  23.                     ]
  24.                 };

echarts功能配置实例----柱/折线、饼图的更多相关文章

  1. Keepalived 配置实例

    Keepalived 是一款轻量级HA集群应用,它的设计初衷是为了做LVS集群的HA,即探测LVS健康情况,从而进行主备切换,不仅如此,还能够探测LVS代理的后端主机的健康状况,动态修改LVS转发规则 ...

  2. linux邮件服务器postfix配置实例

    linux邮件服务器postfix配置实例(超级详细!!!) 2013-03-13 13:30:21 标签:邮件服务器 linux 1. 系统安装:1)centos4.3 选上MAIL组件里的全部.2 ...

  3. OGG学习笔记02-单向复制配置实例

    OGG学习笔记02-单向复制配置实例 实验环境: 源端:192.168.1.30,Oracle 10.2.0.5 单实例 目标端:192.168.1.31,Oracle 10.2.0.5 单实例 1. ...

  4. IPSEC VPN配置实例

    TL-R400VPN应用——IPSEC VPN配置实例 TL-ER6120是TP-LINK专为企业应用而开发的VPN路由器,具备强大的数据处理能力,并且支持丰富的软件功能,包括VPN.IP/MAC 地 ...

  5. Nginx常用配置实例（4）

    Nginx作为一个HTTP服务器,在功能实现方面和性能方面都表现得非常卓越,完全可以与Apache相媲美,几乎可以实现Apache的所有功能,下面就介绍一些Nginx常用的配置实例,具体包含虚拟主机配 ...

  6. springMVC注解方式+easyUI+MYSQL配置实例

    刚接触springMVC,使用的注解方式,也在学习阶段,所以把自己学习到的记下来.本文利用springMVC从数据库读取用户信息为例,分享一下. 1.准备相关架包及资源.因为使用springMVC+e ...

  7. Tomcat配置实例

    转自:https://www.cnblogs.com/kismetv/p/7228274.html 目录 一.一个server.xml配置实例 二.server.xml文档的元素分类和整体结构 1.整 ...

  8. Keepalived详解（三）：Keepalived基础功能应用实例【转】

    Keepalived基础功能应用实例: 1.Keepalived基础HA功能演示: 在默认情况下,Keepalived可以实现对系统死机.网络异常及Keepalived本身进行监控,也就是说当系统出现 ...

  9. MySQL主从备份配置实例

    转载自:https://www.cnblogs.com/ahaii/p/6307648.html MySQL主从备份配置实例 场景: 1.主服务器192.168.0.225.从服务器192.168.0 ...

随机推荐

  1. 第51节：Java当中的集合框架Map

    简书作者:达叔小生 Java当中的集合框架Map 01 Map提供了三个集合视图: 键集 值集 键-值 映射集 public String getWeek(int num){ if(num<0 ...

  2. Ubuntu 16.04安装Notepadqq编辑器替代Notepad++

    Notepad++只有Windows平台产品,对于Linux下有其替代的产品Notepadqq. 安装: sudo add-apt-repository ppa:notepadqq-team/note ...

  3. 来，带你鸟瞰 Java 中4款常用的并发框架！

    1. 为什么要写这篇文章 几年前 NoSQL 开始流行的时候,像其他团队一样,我们的团队也热衷于令人兴奋的新东西,并且计划替换一个应用程序的数据库. 但是,当深入实现细节时,我们想起了一位智者曾经说过 ...

  4. 利用max-height适应多尺寸屏幕的下拉动画

    移动设备的特点之一便是屏幕尺寸多种多样,所以我们在制作针对移动设备的动画时必须不同尺寸屏幕的兼容性.比如我们要制作以下动画:红框2为详细内容,默认收起:红框1处为事件响应热区,点击后展开或收起红框2的 ...

  5. 有关 Azure 机器学习的 Net# 神经网络规范语言的指南

    Net# 是由 Microsoft 开发的一种用于定义神经网络体系结构的语言. 使用 Net# 定义神经网络的结构使定义复杂结构(如深层神经网络或任意维度的卷积)变得可能,这些复杂结构被认为可提高对数 ...

  6. mysql 开发进阶篇系列 54 权限与安全(账号管理的各种权限操作 下)

    1. 查看权限 -- 如果host值不是%, 就要加上host值,下面查看bkpuser用户权限(6个权限, 限本地连接) SHOW GRANTS FOR bkpuser@localhost; -- ...

  7. mysql 开发进阶篇系列 51 权限与安全(权限表user,db详细介绍 )

    一.概述 mysql 的权限系统主要用来对连接到数据库的用户进行权限验证,以此来判断此用户是否属于合法用户,以及合法用户给予的相应数据库权限.下面将介绍权限系统的工作原理,以及将要熟练掌握账号的管理和 ...

  8. Android--Menus

    前言 本篇博客讲解一下菜单Menu的使用.菜单在windows应用中使用十分广泛,几乎所有的windows应用都有菜单,Android中也加入了菜单的支持.从官方文档了解到,从Android3.0(A ...

  9. 使用Expression进行动态排序分页

    Expression动态查询.分页 Expression,表达式树,以lamda表达式创建,就以表达式目录树的形式将强类型的lambda表达式标识为数据结构. 排序 /// <summary&g ...

  10. [NewLife.XCode]实体类详解

    NewLife.XCode是一个有10多年历史的开源数据中间件,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和运行日志来进行深入分析,蕴含 ...