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. 简单方便统一封装的傻瓜式GET/POST库AliasNet正式公布~开源喽~

    在进行网页自动化时我们做得最多的工作就是不停的往某个URL GET/POST数据并得到相应的Response,通过分析Response的结果再进行下一步操作,通过网页自动化我们可以做很多工作,比如去某 ...

  2. Effective_java之二：慎用重载函数

    每周写一篇技术博客的愿望一直没实现, 从这周開始每周五晚10点是写博客的时间 OOP的一个重要特性就是多态,实现多态的目的有多种途径.比方:重载overload.重写overwite.面向接口编程等等 ...

  3. 使用@media实现IE hack的方法

    文章简介:众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的.比如说使用“\0”,“\”和“\9”来仅让IE某些版本识别,而对于现代浏览器来说,他会直 ...

  4. NServiceBus

    官方网站:http://docs.particular.net/nservicebus/      NServiceBus 是一个用于构建企业级 .NET系统的开源通讯框架.它在消息发布/订阅支持.工 ...

  5. hdu 1305 Immediate Decodability(字典树)

    Immediate Decodability Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/O ...

  6. 史上最全的 UIWebview 的 JS 与 OC 交互

    来源:伯乐在线 - 键盘风筝 链接:http://ios.jobbole.com/89330/ 点击 → 申请加入伯乐在线专栏作者 其实一直想给大家整理一下JS与OC的交互,但是没有合适的机会,今天借 ...

  7. 如何设计App登录模块?

    1.熟悉目前常见的手机APP登陆方式 ① 账号登陆(手机.邮箱) ② 第三方登陆(微信,QQ,微博) ③ 一键快捷登录(工具类,如不记单词) ④ 游客登陆(bbs) ⑤ demo测试登陆(如友盟等) ...

  8. A Simple Problem with Integers 多树状数组分割，区间修改，单点求职。 hdu 4267

    A Simple Problem with Integers Time Limit: 5000/1500 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  9. Ajax的工作原理

    Ajax的核心是JavaScript对象XmlHttpRequest.该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术.简而言之,XmlHttpRequest使您可 ...

  10. 2.1.4　扫描器X-Scan查本机隐患

    X-Scan是由安全焦点开发的一个功能强大的扫描工具.它采用多线程方式对指定IP地址段(或单机)进行安全漏洞检测,支持插件功能. 1.用X-Scan查看本机IP地址 利用X-Scan扫描器来查看本机的 ...