echarts标准饼图解读共分为四部分，

一、基本配置demo

二、标题（title）配置

三、提示框（tooltip）配置

四、图例（legend）配置

五、系列列表（series ）配置

下面是一个基本配置demo，复制下方代码，下载并引入正确路径的echarts.js即可得到echarts标准饼图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <!-- jquery cdn引入 -->

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

    <!-- echarts 引入 -->

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

    <style type="text/css">

    </style>

</head>

<body>

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

<script>

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

    //init初始化接口，返回ECharts实例，其中dom为图表所在节点

    var option = {
　　　　 //标题　　
　　　　 title : {
            text: '主标题',

            subtext: '副标题',

            x:'center'

        },
        //提示框，鼠标悬浮交互时的信息提示

        tooltip : {

            trigger: 'item',

            formatter: "{a} <br/>{b} : {c} ({d}%)"

        },
　　　　//图例，每个图表最多仅有一个图例

        legend: {

            orient: 'vertical',

            left: 'left',

            data: ['第一部分','第二部分','第三部分','第四部分']

        },
　　　　// 系列列表,每个系列通过 type 决定自己的图表类型

        series : [

            {

                name: '访问',

                type: 'pie',

                radius : '62%',

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

                minAngle:'15',

                data:[

                    {name:"第一部分",value:4},

                    {name:"第二部分",value:7},

                    {name:"第三部分",value:3},

                    {name:"第四部分",value:1},

                ],

                itemStyle: {

                    normal:{

                        label:{

                            show:true,

                            formatter: "{b} :\n  {c} \n ({d}%)",

                            position:"inner"

                        }

                    }

                }

            }

        ],

    };

    myChart.setOption(option);// 为echarts对象加载数据

</script>

</body>

</html>

结果显示：

为了更好得运用echarts插件，可以继续了解接下来饼状图的详细配置。

echarts标准饼图(一)——基本配置demo的更多相关文章

  1. echarts标准饼图解读(一)——提示框（tooltip）配置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. echarts标准饼图(二)——标题（title）配置

    标题(title)配置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. ECharts 环形饼图 动态获取json数据

    ECharts  环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...

  4. echarts中饼图显示百分比

    通过echarts制作饼图,需要通过鼠标移动到对应的扇形才能才看数值和百分比. 解决这个问题参考的是将鼠标移动到扇形上的显示方法:     tooltip : {         trigger: ' ...

  5. Maven - settings.xml简易配置Demo

    前言 这里贴一下settings.xml的一个简易配置demo,就是简单配置了:本地的仓库地址.阿里云镜像.指定使用jdk1.8进行编译. 这里使用的Maven是3.5.0版本的. 配置文件demo ...

  6. Qt+ECharts开发笔记（四）：ECharts的饼图介绍、基础使用和Qt封装百分比图Demo

    前言   前一篇介绍了横向柱图图.本篇将介绍基础饼图使用,并将其封装一层Qt.  本篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口.   Demo演示 ...

  7. echarts画饼环状饼图相关参数配置

    今天做页面的时候用到了环状饼图,大家都知道echarts的API文档看起来实在费劲,折腾了半天才画出来我想要的饼图,把我用到的参数配置分享给大家,希望能帮到和我一样的对echarts不是那么熟悉的童鞋 ...

  8. ECharts之饼图和柱形图demo

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. django1.7 配置demo教程（环境搭建）

    近期又用到django做个简单项目,1年多没用过了有些手生,按理说没啥问题吧 以下是一个简单的环境搭建demo过程: 前提条件:准备了python2.7已经安装 1.搭建django环境下载 http ...

随机推荐

  1. 字符集乱码问题:ISO-8859-1和GBK

    问题,引用百度知道的问题吧: http://zhidao.baidu.com/question/51342167.html?qbl=relate_question_0&word=%C3%84% ...

  2. dom4j生成、解析xml

    /** * 创建xml * @param obj 泛型对象 * @param entityPropertys 泛型对象的List集合 * @param Encode XML自定义编码类型 * @par ...

  3. 跟大家分享下今天所学到的PHP，虽然很基础，但是感觉也很重要

    PHP:Hypertext PreProcessor(超文本预处理语言) PHP是一种服务器端语言(server-side language),服务器只发送脚本的输出,通常是HTML,PHP也可以用于 ...

  4. ios上比较好用的Cydia插件

    1.iFile查看系统文件 2.KuaiDial归属地数据库 3.KuaiDial电话拨号助手 4.搜狗输入法 Photo Editor 房贷计算器

  5. History（历史）命令用法15例

    导读 如果你经常使用 Linux 命令行,那么使用 history(历史)命令可以有效地提升你的效率,本文将通过实例的方式向你介绍 history 命令的 15 个用法. 使用 HISTTIMEFOR ...

  6. WEB免费打印控件推荐

    在WEB系统中,打印的确是个烦人的问题. 要么自己开发打印控件,如果项目时间紧,肯定来不及. 要么购买成熟的打印控件,如果是大项目可以考虑,但如果项目只有几K到1.2W之间,这就麻烦了. 前段时间有机 ...

  7. Apple Tree(需要预处理的树状数组)

    Apple Tree Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 20335   Accepted: 6182 Descr ...

  8. mybaits 学习

    mybaits  学习(一) 注意:如果建的是web项目,run as java application 参考http://www.cnblogs.com/xdp-gacl/p/4261895.htm ...

  9. UISegmentedControl 分段器加载不同的viewcontroller

    #import <UIKit/UIKit.h> @interface MJSegmentViewController : UIViewController /** * @brief 设置切 ...

  10. C#中怎么在EXCEL中的单元格中画斜线啊 ？？

    Code Snippet 做法: 1,先添加引用COM,找 Excel 2,using Excel = Microsoft.Office.Interop.Excel; 3, 代码 private Ex ...