<!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. Create A .NET Core Development Environment Using Visual Studio Code

    https://www.c-sharpcorner.com/article/create-a-net-core-development-environment-using-visual-studio- ...

  2. SEO SEM

    SEO:搜索引擎优化SEM:搜索引擎营销 SEO排名机制:搜索引擎蜘蛛 权重 算法 排名规则 搜索引擎提交入口: 1.百度搜索网站登入口 2.Google网站登入口 3.360搜索引擎登入入口 4.搜 ...

  3. matplotlib ----- 初步

    直接看几段代码即可: # 加载模块的方式 import matplotlib.pyplot as plt import numpy as np # 最简单的单线图 x = np.linspace(0, ...

  4. div,css常用技术

    1,<div></div>一张图作为背景的用法: 必须指定width,height,background属性 .smallCircle{ margin-top: 25px;   ...

  5. bzoj3258秘密任务

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3258 因为只走最短路,所以先正反两遍djkstra,新建边. 这里的边是单向边.所以要用原来 ...

  6. 自定义显示提示一段时间自动消失ShowMsgText控件

    public partial class ShowMsgText : Label { public string TextMsg { get { return Text; } set { timer1 ...

  7. Linux 文件名中包含特殊字符

    文件和文件夹的名称中有特殊字符,操作有两种方式( - 在文件名称最前面除外). 例如:文件名为 a&b.c 1.通过转移符 "\" $ touch   a\&b.c ...

  8. 队列模拟题——pat1026. Table Tennis

    题意自己理解了,主要是两个队列维护,一个VIP队列,一个普通队列 搜集了一些坑(有些坑转自别的网站用于广大同学的测试之用) 普通人也有VIP的权益!!! 屌丝逆袭有木有!!! 920:52:00 10 ...

  9. shell三剑客之find

    查找以ini结尾的文件[root@iZj6cbstl2n6r280a27eppZ app]# find / -name "*.ini"/app/myblog/config.ini ...

  10. c++ 双向链表操作总结

    第一.包含DoubleLinkNode 模板类和DoubleLinkList 模板类 #pragma once #include<iostream> using namespace std ...