<!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. Hash学习小结

    Hash 简要说明 \(OI\)中一般采用进制\(hash\).模数可以用\(unsigned \ long \ long\)自然溢出,也可以使用大质数.值得一提的是,\(unsigned\ long ...

  2. VC中键盘键的对应关系

    转载:VC中如何响应键盘和鼠标事件 VC 中用 KeyPress 表示键盘响应的所有事件,包括 OnKeyDown 事件(键按下). OnKeyUp 事件(键按下后弹起)和 OnKeyPress 事件 ...

  3. 《DSP using MATLAB》示例Example7.14

    代码: M = 20; alpha = (M-1)/2; l = 0:M-1; wl = (2*pi/M)*l; Hrs = [1, 1, 1, zeros(1, 15), 1, 1]; % Idea ...

  4. python字符串常用

    参考这一篇: http://www.runoob.com/python/python-strings.html

  5. iptables规则绑定在port而不是拦截在协议栈

    版权声明:本文为博主原创,无版权.未经博主同意能够任意转载,无需注明出处,任意改动或保持可作为原创! https://blog.csdn.net/dog250/article/details/2417 ...

  6. Android模糊图像

    在Android中.我们能够实现非常多非常酷的处理图片的效果. 在2014年某次会议的讲演<图像的魔力>中,我介绍了当中的一部分. 当中的一项技术是怎样模糊图像.演示样例代码是使用Rend ...

  7. 请求MWS报错401：Access Denied

    跑MWS接口,报错: Caught Exception: Access denied Response Status Code: Error Code: AccessDenied Error Type ...

  8. GOF23设计模式之装饰模式（decorator）

    一.装饰模式概述 (1)动态的为一个对象增加新的功能. (2)装饰模式是一种用于代替继承的技术,无需通过继承增加子类就能扩展对象的新功能.   使用对象的关联关系代替继承关系,更加灵活,同时避免类型体 ...

  9. nested exception is com.mysql.jdbc.PacketTooBigException: Packet for query is too large (1109 > 1024

    MySQL的一个系统参数:max_allowed_packet >mysql -u root -p //root登录 1. 查看系统参数:show VARIABLES like '%max_al ...

  10. Macbook Pro上C++编程

    Xcode新建一个c/c++程序语言工程_百度经验 http://jingyan.baidu.com/article/e2284b2b63bdede2e6118d2a.html