标题（title）配置

<!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 : {

            show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）

            text: '主标题',//主标题文本，'\n'指定换行

            link:'',//主标题文本超链接,默认值true

            target: null,//指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）

            subtext: '副标题',//副标题文本，'\n'指定换行

            sublink: '',//副标题文本超链接

            subtarget: null,//指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）

            x:'center'//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）

            y: 'top',//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）

            textAlign: null,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center

            backgroundColor: 'rgba(0,0,0,0)',//标题背景颜色，默认'rgba(0,0,0,0)'透明

            borderColor: '#ccc',//标题边框颜色,默认'#ccc'

            borderWidth: 0,//标题边框线宽，单位px，默认为0（无边框）

            padding: 5,//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距

            itemGap: 10,//主副标题纵向间隔，单位px，默认为10

            textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}

                fontFamily: 'Arial, Verdana, sans...',

                fontSize: 12,

                fontStyle: 'normal',

                fontWeight: 'normal',

            },

            subtextStyle: {//副标题文本样式{"color": "#aaa"}

                fontFamily: 'Arial, Verdana, sans...',

                fontSize: 12,

                fontStyle: 'normal',

                fontWeight: 'normal',

            },

            zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。

            z: 6,//二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。

        },

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

        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标准饼图(二)——标题（title）配置的更多相关文章

  1. echarts标准饼图(一)——基本配置demo

    echarts标准饼图解读共分为四部分, 一.基本配置demo 二.标题(title)配置 三.提示框(tooltip)配置 四.图例(legend)配置 五.系列列表(series )配置 下面是一 ...

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

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

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

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

  4. vue echarts 给饼图中间添加文字 ，并且添加多个样式

    最近根据设计要求写了一个统计图,以下是设计要求,要求中间文字分别是总数和汉字,样式分别不同 好吧具体的解决方案如下 方案一 series: [ { type:'pie', radius: ['50%' ...

  5. 深入浅出ECharts系列 （二） 折线图

    深入浅出ECharts系列(二) 目标 本次教程的目标是实现“折线图堆叠”折线,实现结果如图: 2. 准备工作 a)         首先下载ECharts插件,你可以根据自己的实际需求选择你想要下载 ...

  6. echarts解决一些大屏图形配置方案汇总

    本文主要记录使用echarts解决各种大屏图形配置方案. 1.说在前面 去年经常使用echarts解决一些可视化大屏项目,一直想记录下使用经验,便于日后快速实现.正好最近在整理文档,顺道一起记录在博客 ...

  7. 前端工程化（二）---webpack配置

    导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...

  8. 使用IntelliJ IDEA开发SpringMVC网站（二）框架配置

    原文:使用IntelliJ IDEA开发SpringMVC网站(二)框架配置 摘要 讲解如何配置SpringMVC框架xml,以及如何在Tomcat中运行 目录[-] 文章已针对IDEA 15做了一定 ...

  9. 微信小程序把玩（二）window配置

    原文:微信小程序把玩(二)window配置 window用于设置小程序的状态栏.导航条.标题.窗口背景色.注意在app.json中配置的属性会被子window属性覆盖 只需在app.json配置即可

随机推荐

  1. 搭建sentry(一个分布式日志聚合系统)

    简介: Sentry 是一个实时的事件日志和聚合平台,基于 Django 构建. Sentry 可以帮助你将 Python 程序的所有 exception 自动记录下来,然后在一个好用的 UI 上呈现 ...

  2. Gym 100637F F. The Pool for Lucky Ones 暴力

    F. The Pool for Lucky Ones Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/10 ...

  3. spring-mvc整合freemarker并在ftl模版中显示服务端校验的错误信息,JSR303或者JSR349

    写法有多种,应该可以任意组合,最重要的是要引入spring.ftl 1.Bean里面的就不再多写了,来个简单就可以了 @NotEmpty(message="用户密码码不可为空") ...

  4. TreeView1MouseMove

    procedure TForm1.TreeView1MouseMove(Sender: TObject; Shift: TShiftState; X,   Y: Integer); var   nod ...

  5. vector<int> v2 = 42; 为何非法

    C++ Primer 第四版,第十三章“复制控制” 习题13.2,为何vector<int> v2 = 42; 不能编译? 百度贴吧里的一位楼主给出了答案,本人认为正确,特此引用: 参考链 ...

  6. 内核映像的形成 —— KBuild体系

    1. http://blog.csdn.net/yunsongice/article/details/6046537 2. http://blog.csdn.net/yunsongice/articl ...

  7. ERROR 1227 (42000): Access denied; you need (at least one of) the PROCESS privilege(s) for this oper

    1  用以往的mysql登陆模式登陆 [mysql@eanintmydbc002db1 mysqllog]$ mysql Enter password:  Welcome to the MySQL m ...

  8. iOS开发——实用篇&提高iOS开发效率的方法和工具

    提高iOS开发效率的方法和工具 介绍 这篇文章主要是介绍一下我在iOS开发中使用到的一些可以提升开发效率的方法和工具. IDE 首先要说的肯定是IDE了,说到IDE,Xcode不能跑,当然你也可能同时 ...

  9. VBA Excel 引用 API，以实现“透明”

    1. 引用 API 函数 ' API函数Public Declare Function FindWindow Lib "user32" Alias "FindWindow ...

  10. 1081. Rational Sum (20)

    the problem is from PAT,which website is http://pat.zju.edu.cn/contests/pat-a-practise/1081 the code ...