<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <!--为ECharts准备一个具备大小(宽高)的Dom-->

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

    <!--ECharts单文件引入-->

    <script src="echarts-all.js"></script>

    <script type="text/javascript">

    //基于准备好的dom,初始化echarts图表

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

    //图表使用

    var option = {

    tooltip : {//提示框,鼠标悬浮交互时的信息提示

        trigger: 'item',//触发类型,默认数据触发,可选为:'axis'

        formatter: "{a} <br/>{b} : {c} ({d}%)"//提示框的提示内容格式

    },

    legend: {//图例,每个图表最多仅有一个图例

        orient : 'vertical',//布局方式,默认为水平布局,可选为:'horizontal'|'vertical'

        x : 'left',//水平安放位置,默认为全图居中,可选为:'center'|'left'|'right'|{number}(x坐标,单位px)

        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']//图例内容数组,数组项通常为{string},每一项代表一个系列的name，默认布局到达边缘会自动分行(列),传入空字符串''可实现手动分行(列)

    },

    toolbox: {//工具箱,每个图表最多仅有一个工具箱

        show : true,//显示策略,默认只是false.可选为:true显示|false隐藏

        feature : {//启用功能,目前支持feature，工具箱自定义功能回调处理.

            mark : {show: true},//辅助线标志,此处启用.

            dataView : {//打开数据视图，可设置更多属性

                show: true,

                readOnly: false//readOnly默认数据视图为只读,可指定readOnly为false打开编辑功能

            },

            magicType : {//动态类型切换,支持直角系下的折线图,柱状图,堆积,平铺转换

                show: true,

                type: ['pie', 'funnel'],//饼图,漏斗图

                option: {//图表选项,包含图表实例任何可配置选项:公共选项,组件选项,数据选项

                    funnel: {//漏斗图配置

                        x: '25%',

                        width: '50%',

                        funnelAlign: 'center',

                        max: 1548

                    }

                }

            },

            restore : {show: true},//还原,复位原始图表

            saveAsImage : {show: true}//保存图片IE8-不支持,上图icon最右,可设置更多属性.

        }

    },

    calculable : true,//是否启用拖拽重计算特性,默认关闭

    series : [//驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据

        {

            name:'访问来源',//系列名称

            type:'pie',//图表类型,折线图line,散点图scatter,柱状图bar,饼图pie,雷达图radar

            radius : ['50%', '70%'],//半径,支持绝对值px和百分比,百分比计算比,min(width, height)/2*75%,传数组实现环形图,[内半径,外半径]

            itemStyle : {//图形样式,可设置图表内图形的默认样式和强调样式（悬浮时样式）

                normal : {//默认样式

                    label : {

                        show : false

                    },

                    labelLine : {

                        show : false

                    }

                },

                emphasis : {//强调样式

                    label : {

                        show : true,

                        position : 'center',//标签显示位置,地图标签不可指定位置

                        textStyle : {

                            fontSize : '30',

                            fontWeight : 'bold'

                        }

                    }

                }

            },

            data:[

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

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

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

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

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

            ]

        }

        ]

    };

    //为echats对象加载数据

    myChart.setOption(option);

    </script>

</body>

</html>

　　

Echart ---超详细介绍的更多相关文章

  1. Python 并行分布式框架：Celery 超详细介绍

    本博客摘自:http://blog.csdn.net/liuxiaochen123/article/details/47981111 先来一张图,这是在网上最多的一张Celery的图了,确实描述的非常 ...

  2. 【转】HBase 超详细介绍

    ---恢复内容开始--- http://blog.csdn.net/frankiewang008/article/details/41965543 1-HBase的安装 HBase是什么? HBase ...

  3. HBase 超详细介绍

    1-HBase的安装 HBase是什么? HBase是Apache Hadoop中的一个子项目,Hbase依托于Hadoop的HDFS作为最基本存储基础单元,通过使用hadoop的DFS工具就可以看到 ...

  4. mac自带功能超详细介绍

    mac自带的超实用的功能分享给大家,包含自带的Spotlight(聚焦) 计算器功能,预览的 PDF 压缩功能,切换同一应用的不同窗口等,让您的工作更加轻松. 1.Spotlight(聚焦) 计算器功 ...

  5. linux服务器安装svn超详细介绍

    #!/bin/sh REPOS="$1" REV="$2" export LANG=en_US.UTF-8 LOG_PATH=/tmp/svn.log echo ...

  6. 超详细，多图文介绍redis集群方式并搭建redis伪集群

    超详细,多图文介绍redis集群方式并搭建redis伪集群 超多图文,对新手友好度极好.敲命令的过程中,难免会敲错,但为了截好一张合适的图,一旦出现一点问题,为了好的演示效果,就要从头开始敲.且看且珍 ...

  7. 超详细，多图文使用galera cluster搭建mysql集群并介绍wsrep相关参数

    超详细,多图文使用galera cluster搭建mysql集群并介绍wsrep相关参数 介绍galera cluster原理的文章已经有一大堆了,百度几篇看一看就能有相关了解,这里就不赘述了.本文主 ...

  8. 原来你是这样的BERT，i了i了！ —— 超详细BERT介绍（一）BERT主模型的结构及其组件

    原来你是这样的BERT,i了i了! -- 超详细BERT介绍(一)BERT主模型的结构及其组件 BERT(Bidirectional Encoder Representations from Tran ...

  9. iOS-申请邓白氏编码的超详细流程介绍

    导读 11.22号要申请苹果公司开发者账号,所以当天下午申请了邓白氏编码,昨天邓白氏编码下来了,这里就做一下记录,分享给大家. 概览 11.22提交的邓白氏编码申请,11.28(礼拜一)华夏邓白氏发来 ...

随机推荐

  1. 关于ehcache缓存的使用（简单对比redis）

    前言 最近在做一个项目,某个接口查询数据到返回数据总计需要7000+毫秒,一直在考虑优化的问题,优化也有原来的一家一家查询到一次查询所有的,在查询不同天数.结果是1500+,虽然优化了不少,但是数据结 ...

  2. Python学习-类

    类是对象的模板或蓝图,类是对象的抽象化,对象是类的实例化 在python中,一个对象的特征也称为属性(attribute),它所具有的的行为也称为方法(method) 对象 = 属性(特征)+方法(行 ...

  3. 【DUBBO】zookeeper在dubbo中作为注册中心的原理结构

    [一]原理图 [二]原理图解释 流程:1.服务提供者启动时向/dubbo/com.foo.BarService/providers目录下写入URL2.服务消费者启动时订阅/dubbo/com.foo. ...

  4. FastAdmin 的 API 可以分级吗？

    FastAdmin 的 API 可以分级吗? 有小伙伴问 FastAdmin 的API 可以分别吗,使用 / 出现错误. Karson 的说明是: 完全支持的,默认是使用.进行分隔的,如果需要/,请开 ...

  5. 关于SQL的几道小题详解

    关于SQL的几道小题详解 当我们拿到题目的时候,并不是急于作答,那样会得不偿失的,而是分析思路,采用什么方法,达到什么目的,还要思考有没有简单的方法或者通用的方法等等,这样才会达到以一当十的效果,这样 ...

  6. 1.JMeter===添加响应断言

    断言即Lr中的检查点,我们在进行测试时,需要对每次请求测试的返回做检验 1.以百度做案例,添加线程组==添加HTTP请求==添加查看结果树 2.在HTTP请求下添加响应断言 注:模式匹配规则,比较常用 ...

  7. 关于WCF引用方式之WCF服务寄宿控制台

    1.创建解决方案WCFService 依次添加四个项目,如上图,Client和Hosting为控制台应用程序,Service和Service.Interface均为类库. 2.引用关系 Service ...

  8. IMAP简单研究

    IMAP的相关详细介绍: http://www.imapwiki.org/ClientImplementationhttp://tools.ietf.org/html/rfc3501 1.连接服务器 ...

  9. (转)SQL server 2005查询数据库表的数量和表的数据量

    本文转载自:http://hi.baidu.com/ajyajyajy/item/4e2a7f4dc83393d2c1a592c1 use DBNAMEgoselect * from sysobjec ...

  10. (转)Inno Setup入门（十九）——Inno Setup类参考（5）

    本文转载自:http://blog.csdn.net/yushanddddfenghailin/article/details/17251019 单选按钮 单选按钮在安装中也很常见,例如同一个程序可以 ...