<!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. Windows 10 自带那么多图标，去哪里找呢？

    无意间发现我的 D 盘根目录中大部分的文件夹都是系统专用文件夹,有自己的独特图标,偶有一两个开发用的文件夹是默认图标.于是想把它们改成独特样式,而且是 Windows 10 那些新图标样式! 这是我的 ...

  2. 为什么委托的减法（- 或 -=）可能出现非预期的结果？（Delegate Subtraction Has Unpredictable Result）

    当我们为一个委托写 -= 的时候,ReSharper 会提示“Delegate Subtraction Has Unpredictable Result”,即“委托的减法可能出现非预期的结果”.然而在 ...

  3. springboot 填坑一 springboot java.sql.SQLException: Access denied for user ''@'localhost' (using password: NO)

    这里有个很不明显的错误  初次搭建很容易犯这个错

  4. 《DSP using MATLAB》示例Example7.8

    窗函数的设计思想就是选择一个理想的频率选择滤波器(通常其脉冲响应函数是 非因果.无限长的),然后截断(取窗)这个无限长脉冲响应,得到一个线性相位.因果的 FIR滤波器.频率域示意图如下: 我们的目的: ...

  5. Google Chrome 调试JS简单教程[更新]

    题外话,刚开始我写这篇内容只是将自己了解的一些知识放上来,不巧的是我分析了我的来访日志,很多朋友都有这个需求,为了大家没有白来,我决定充实下这篇文章.最近更新时间2014-02-14 chrome版本 ...

  6. oracle之 v$sql_monitor 监视正在运行的SQL语句的统计信息

    11g中引入了新的动态性能视图V$SQL_MONITOR,该视图用以显示Oracle监视的SQL语句信息.SQL监视会对那些并行执行或者消耗5秒以上cpu时间或I/O时间的SQL语句自动启动,同时在V ...

  7. Error unmarshalling file:/opt/test/jboss/server/defalt/conf/bootstrap.xml

    启动命令:#/usr/local/jboss/bin/run.sh -b 0.0.0.0 -c defalt 启动的defalt写错了,应该写default.

  8. Shell脚本一键安装LNMP环境

    https://sourceforge.net/projects/opensourcefile/files/ Nginx是一款高性能的HTTP和反向代理服务器.Nginx在反向代理,Rewrite规则 ...

  9. MVC自定义错误页面

    MVC异常处理主要有三种方案:1.基于HandleErrorAttribute重写OnException方法:2.基于Global.apsx添加Application_Error方法:3.直接在Web ...

  10. JAVA课程设计（坦克大战）

    2019-01-16 坦克大战游戏背景: 1. 需求分析 1.1环境要求 操作系统:Windows 7(SP1)以上 JAVA虚拟机:JDK1.8以上 开发环境:Eclipse(4.5以上) 1.2角 ...