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------>delete

    delete只能删除属性,不能删除变量 var a = "roboce"; delete a; // false a; b = "haha"; delete b ...

  2. Javascript加载执行问题探索

    转自:http://www.cnblogs.com/huangxincheng/archive/2011/12/04/2275988.html 前言 最近研究MongoDB数据库,无意间发现的好博客, ...

  3. java生成汉字验证码

    java实现的汉字输入验证码,主要包含两个类,一个是生成验证码,一个是判断验证码输入是否正确,实现原理非常简单,将汉字和干扰线生成图片并将汉字保存到session,前台获取每次生成验证码图片并用文本框 ...

  4. 淘宝 印风 UDF

    http://blog.csdn.net/zhaiwx1987/article/details/6902623

  5. repeater复杂表格的显示

    首先简要的描述一下所要完成的事情:将某一个方言中的每一个声韵调组合,按照格式显示一个字 数据库中的信息:****,声母(Initial),韵母(Final),声调(Tone),一个汉字(Word),* ...

  6. Disable right click on the website

    Many developers/website owners like to keep their website images personal and don't want anyone to c ...

  7. SecureCRT 滚动条设置

    不久前在Debian下使用kermit时发现kermit有一些优点,比如当串口上不断有信息打印时,仍然可以通过拖动滚动条来查看以前打印的信息,并且滚动条不会滚动到最下面.当按下回车键时,滚动条会自动滚 ...

  8. Using ASP.Net WebAPI with Web Forms

    Asp.Net WebAPI is a framework for building RESTful HTTP services which can be used across a wide ran ...

  9. C. Mobile phones

    Suppose that the fourth generation mobile phone base stations in the Tampere area operate as follows ...

  10. 使用get方式提交数据

    get提交代码 import java.io.InputStream; import java.net.HttpURLConnection; import java.net.MalformedURLE ...