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. 0c-34-自动释放池

    #import <Foundation/Foundation.h> #import "Person.h" Person * creatPerson() { Person ...

  2. mysqldump dump-slave

    http://blog.itpub.net/29254281/viewspace-1392757/ 查看从库的状态,发现从库的sql_thread进程会自动停止,停止之后 又会自动开启,没有人操作这个 ...

  3. IO 延迟与Queue Depth

     IO 延迟:存储设备的IO延迟 Queue Depth:磁盘控制器所发出的批量指令的最大条数 IOPS:磁盘设备每秒的IO 三者之间的关系:IOPS=(Queue Depth)/(IO latenc ...

  4. 基于jQuery实现苹果Dock样式的菜单

    爱编程小编之前我们分享过相当数量的jQuery菜单了,今天要给大家带来一款Dock样式的jQuery菜单,用过苹果的朋友都知道,它的Dock菜单非常酷,配合漂亮的图标就更加绚丽了.效果图如下: 在线预 ...

  5. hql & mysql 札记

    最近在某D实习,刚去就开始各种写HQL,碰壁很多次. 几个知识点记录一下,逐个攻破. sql 中的case when, 选择循环的写法.(http://www.cnblogs.com/zengen/a ...

  6. redis 简介

    Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,而且支持的数据类型很丰富.有字符串,链表,集 合和有序集合.支持在服务器端计算集合的并,交和补集(diff ...

  7. C#获取进程的主窗口句柄的实现方法

    通过调用Win32 API实现. public class User32API { private static Hashtable processWnd = null; public delegat ...

  8. C语言第七节流程控制

    流程控制 顺序结构:默认的流程结构.按照书写顺序执行每一条语句. 选择结构:对给定的条件进行判断,再根据判断结果来决定执行哪一段代码. 循环结构:在给定条件成立的情况下,反复执行某一段代码.     ...

  9. [JavaEE] SSH框架笔记_S.S.H框架各自的优缺点

    Struts的原理和优点.Struts工作原理MVC即Model-View-Controller的缩写,是一种常用的设计模式.MVC 减弱了业务逻辑接口和数据接口之间的耦合,以及让视图层更富于变化.M ...

  10. 沈逸老师PHP魔鬼特训笔记（5）

    接上一节课,我们专门新建了一个godconfig类,设置了两个属性prj_name(项目名),prj_author(作者),然后我们获取标准输入(stdin)把结果保存在了类里面. 好吧,这节课的名字 ...