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. 【JavaScript】HTML5存储方案

    1.Web SQL 2.IndexedDB 3.Local Storage 4.Session Storage 5.Cookies 6.Application Cache

  2. alue of type java.lang.String cannot be converted to JSONObject

    /** * 4.0以下系统处理掉返回json的BOM头 * * @param jsonStr * @return */ public static String getJson(String json ...

  3. Lucene的Vint类型详解

    Lucene Vint压缩策略是,用每个字节的最高位做标志位,后7位为有效算术位,如果标志位为1,则说明后一个字节和当前字节是同一个数字,为0说明后一个字节是一个新的数字 Lucene源代码中进行存储 ...

  4. 条件判断语句if

    一.简单if语句的格式 if 条件表达式 then 语句1 语句2 ...... fi 二.if else语句的格式 if 条件测试 then 语句块1 else 语句块2 fi 三.if elif ...

  5. 解决vim中鼠标右键无法复制的问题

    转:http://www.cnblogs.com/jianyungsun/archive/2011/03/19/1988855.html 这是我的vim配置文件:jeffy-vim-v2.4.tar ...

  6. WPF 之 style文件的引用

    总结一下WPF中Style样式的引用方法. 一.内联样式: 直接设置控件的Height.Width.Foreground.HorizontalAlignment.VerticalAlignment等属 ...

  7. python3.x 学习心得

    今天晚上怎么这么不顺利呢,进家灯泡坏了,唉,房东也来收房租了,但是还是要坚持今晚给大家更新一番,笔者接触python也有一段时间了.虽然说现在可以看懂别人的代码.但是一到自己写写代码就感觉很懵逼了,本 ...

  8. ImageSource使用心得(转)

    很多时候,我们会使用图片来装饰UI,比如作为控件背景等. 而这些图片可以分为两种形式,即存在于本地文件系统中的图片和存在于内存中的图片 对于这两种形式的图片,在WPF中,使用方法不同,下面主要说明针对 ...

  9. 关于URLEncoder的编码和URLDecode解码

    在我们开发中,很多时候会遇见各种编码乱码的问题,其实这都是编码不一致的问题,如果你懂得了关于URLEncoder的编码和URLDecode解码,那么问题就会随之消失! 下面我们看看关于编码的代码: [ ...

  10. iOS 真机测试的一些报错

    1.连了手机热点 fix Issue后出现提示框:No Devices Registered:Creating a provisioning profile requires one or more ...