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

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

一、echarts最简单的实例

　　1、折线图/柱状图

　　

<html>

    <head>

        <script src="resource/jquery-3.3.1.min.js"></script>

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

        <script type="text/javascript">

            $(document).ready(function(){

                //创建存放图表的echar

                var chart = echarts.init($('#echartsLineDemo')[]);

                //echars的参数配置项

                option = {

                    xAxis: {

                        //坐标轴类型，大致可分类目轴category，x轴；数值轴value，y轴；

                        type: 'category',

                        //坐标轴名称数组

                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

                    },

                    yAxis: {

                        type: 'value'

                    },

                    series: [{

                        //需要显示的数据

                        data: [, , , , , , ],

                        //图表类型：line是折线、bar是柱状图、pei是饼图。

                        type: 'line'

                    }]

                };

                //添加option

                chart.setOption(option);

            });

        </script>

    </head>

    <body>

        <div id="echartsLineDemo" style="height: 500px;width: 800px;" >

        </div>

    </body>

</html>

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

　　2、饼图

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

option = {

                    title : {

                        text: '某站点用户访问来源',

                        x:'center'

                    },

                    series : [

                        {

                            name: '访问来源',

                            type: 'pie',

                            radius : '55%',

                            center: ['50%', '60%'],

                            data:[

                                {value:335, name:'直接访问'},

                                {value:310, name:'邮件营销'},

                                {value:234, name:'联盟广告'},

                                {value:135, name:'视频广告'},

                                {value:1548, name:'搜索引擎'}

                            ],

                        }

                    ]

                };

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. CCS3怎么实现border边框渐变效果

    下图注册按钮的边框有渐变效果,如果让你来实现,你会怎么做呢 个人觉得,省事的做法,直接让UI给背景图片就可以了,如下图 不过这种做法感觉不太灵活,如果要修改border的渐变颜色,就需要UI重新做图. ...

  2. dubbo实用知识点总结（一）

    1. dubbo基础架构 架构 特性 服务提供者 服务消费者 配置可以用dubbo.properties来替换 2. 注解配置 提供方(注意:serivce注解是dubbo的service) 消费者 ...

  3. .NET图平台下的图像处理工具---强大的Emgucv

    图像一直与时代相伴,图形化的应用软件也重不可缺.对于MFC.Delphi.Lazarus.Qt大家可能已经耳熟能详.对于很多图像处理的开源库,很多都是用C\C++写的,而.Net下的开源库以前很少了解 ...

  4. Java垃圾回收（GC）机制详解

    一.为什么需要垃圾回收 如果不进行垃圾回收,内存迟早都会被消耗空,因为我们在不断的分配内存空间而不进行回收.除非内存无限大,我们可以任性的分配而不回收,但是事实并非如此.所以,垃圾回收是必须的. 二. ...

  5. 经典中的品味：第一章 C++的Hello，World！

    摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! "程序设计要通过编写程序的实践来学习"-Brian ...

  6. 发福利了！！超过100本的linux免费书籍

    New Books Kindle Fire App Development Essentials iPhone iOS 6 Development Essentials CentOS 6 Essent ...

  7. DWR第六篇之文件下载

    1. 在第五篇架构基础上进行修改 2. 修改jsp页面 <html> <head> <base href="<%=basePath%>"& ...

  8. Apache-httpd.conf详解

    ## Apache服务器主配置文件.  包括服务器指令的目录设置.# 详见 <URL:http://www.apache.org/docs/> ## 请在理解用途的基础上阅读各指令.## ...

  9. 完整例子-正则控制input的输入

    转 : https://www.cnblogs.com/ckf1988/p/5619337.html

  10. Perl列表相关函数

    内置的列表函数有: grep, join, map, qw//, reverse, sort, unpack join:将多个元素使用给定字符串联起来join grep:从列表中筛选符合条件的元素执行 ...