标题（title）配置

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <!-- jquery cdn引入 -->
  7.     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  8.     <!-- echarts 引入 -->
  9.     <script src="echarts.js"></script>
  10.     <style type="text/css">
  11.     </style>
  12. </head>
  13. <body>
  14. <div id="main" style="width:500px;height:500px;"></div>
  15.  
  16. <script>
  17.     var myChart=echarts.init(document.getElementById('main'));
  18.     //init初始化接口，返回ECharts实例，其中dom为图表所在节点
  19.  
  20.     var option = {
  21.         //标题
  22.         title : {
  23.             show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
  24.             text: '主标题',//主标题文本，'\n'指定换行
  25.             link:'',//主标题文本超链接,默认值true
  26.             target: null,//指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
  27.             subtext: '副标题',//副标题文本，'\n'指定换行
  28.             sublink: '',//副标题文本超链接
  29.             subtarget: null,//指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
  30.             x:'center'//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
  31.             y: 'top',//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
  32.             textAlign: null,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
  33.             backgroundColor: 'rgba(0,0,0,0)',//标题背景颜色，默认'rgba(0,0,0,0)'透明
  34.             borderColor: '#ccc',//标题边框颜色,默认'#ccc'
  35.             borderWidth: 0,//标题边框线宽，单位px，默认为0（无边框）
  36.             padding: 5,//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
  37.             itemGap: 10,//主副标题纵向间隔，单位px，默认为10
  38.             textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
  39.                 fontFamily: 'Arial, Verdana, sans...',
  40.                 fontSize: 12,
  41.                 fontStyle: 'normal',
  42.                 fontWeight: 'normal',
  43.             },
  44.             subtextStyle: {//副标题文本样式{"color": "#aaa"}
  45.                 fontFamily: 'Arial, Verdana, sans...',
  46.                 fontSize: 12,
  47.                 fontStyle: 'normal',
  48.                 fontWeight: 'normal',
  49.             },
  50.             zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
  51.             z: 6,//二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
  52.         },
  53.  
  54.         //提示框，鼠标悬浮交互时的信息提示
  55.         tooltip : {
  56.             trigger: 'item',
  57.             formatter: "{a} <br/>{b} : {c} ({d}%)"
  58.         },
  59.         //图例，每个图表最多仅有一个图例
  60.         legend: {
  61.             orient: 'vertical',
  62.             left: 'left',
  63.             data: ['第一部分','第二部分','第三部分','第四部分']
  64.         },
  65.         // 系列列表,每个系列通过 type 决定自己的图表类型
  66.         series : [
  67.             {
  68.                 name: '访问',
  69.                 type: 'pie',
  70.                 radius : '62%',
  71.                 center: ['50%', '65%'],/
  72.                 minAngle:'15',
  73.                 data:[
  74.                     {name:"第一部分",value:4},
  75.                     {name:"第二部分",value:7},
  76.                     {name:"第三部分",value:3},
  77.                     {name:"第四部分",value:1},
  78.                 ],
  79.                 itemStyle: {
  80.                     normal:{
  81.                         label:{
  82.                             show:true,
  83.                             formatter: "{b} :\n  {c} \n ({d}%)",
  84.                             position:"inner"
  85.                         }
  86.                     }
  87.                 }
  88.             }
  89.         ],
  90.     };
  91.     myChart.setOption(option);// 为echarts对象加载数据
  92. </script>
  93. </body>
  94. </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. 【M7】千万不要重载&&，||和,操作符

    1.C++对于真假值表达式采用“骤死式”评估方法,比如&&,||. if( p!=NULL && strlen(p)>10)   如果p为NULL,后面的strl ...

  2. CDOJ 1251 谕神的密码 贪心

    谕神的密码 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1251 Descr ...

  3. Codeforces Round #250 (Div. 1) B. The Child and Zoo 并查集

    B. The Child and Zoo Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/438/ ...

  4. Codeforces Gym 100637G G. #TheDress 暴力

    G. #TheDress Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100637/problem/G ...

  5. Codeforces Round #318 [RussianCodeCup Thanks-Round] (Div. 1) A. Bear and Poker 分解

    A. Bear and Poker Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/573/pro ...

  6. ResultSet转成java类对象

    在做web开发时遇到一个事情: 需要从mysql数据表中查询数据并遍历查询结果 这样最简单的方式是:查询到结果根据表中字段列表的顺序来一个个获取字段,但这样需要记住字段的顺序,操作起来不是那么方便.因 ...

  7. C# Process 类的思考

    在这里,我先给自己留个印象 下面我们用C#实现一个调用Dos命令的小程序,让大家对系统进程能有个直观的了解.要使用Process类,首先要引入System.Diagnostic命名空间,然后定义一个新 ...

  8. ios开发——面试篇C语言精华

    面试篇C语言精华    1.面向过程:分析解决问题所需要的步骤,然后用函数把这些步骤一步一步实 现. 面向对象:直接描述客观世界的对象及其相互关系.现实世界中任何实体都 可以看作是对象,对象之间通过消 ...

  9. 获取设备上全部系统app信息

    在获取android设备的全部程序信息一文中介绍了获取手机上全部app信息的方法,以下介绍过滤掉系统app的方法: MainActivity: package com.home.getsysapp; ...

  10. 实例源码--Android软件更新模块

    下载源码   技术要点: (1) 通过网络检测服务器版本与本地版本 (2) 通过服务器下载最新版本 (3) 自动覆盖安装本地版本 详细介绍: 主要源码实现如下: