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

echart 标题配置的更多相关文章

  1. echart 常用配置

    mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 font ...

  2. 初尝微信小程序2-Swiper组件、导航栏标题配置

    swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...

  3. EChart 标题 title 样式，x轴、y轴坐标显示，调整图表位置等

    示例里工作一般情况是够用了,更复杂的可以查询教程: title 官方解说:http://echarts.baidu.com/option.html#title 坐标相关: X轴:http://echa ...

  4. Vue使用Echarts以及Echarts配置分享

    一.本篇文章将给大家分享如何在vue中使用echart以及echart各项配置,这些配置都是工作中比较常见以及常用到的,所以给大家分享下,希望对大家有用. 二.vue中使用echart. 1.首先下载 ...

  5. 【Hello CC.NET】巧用模板简化配置

    从 <[Hello CC.NET]CC.NET 实现自动化集成> 到 <[Hello CC.NET]自动化发布时 Web.config 文件维护> ,大神在评论里提到的方案还没 ...

  6. CC.NET模板简化配置

    [Hello CC.NET]巧用模板简化配置 从 <[Hello CC.NET]CC.NET 实现自动化集成> 到 <[Hello CC.NET]自动化发布时 Web.config ...

  7. Echarts图表常用功能配置，Demo示例

    先看下效果图: 就如上图所示,都是些常用的基本配置. Legend分页,X轴设置,Y轴设置,底部缩放条设置, 数值显示样式设置,工具箱设置,自定义工具按钮, 绑定点击事件等等.这些配置代码中都做了简单 ...

  8. 路由器开源系统openwrt配置页面定制

    1. 新建虚拟机,百度文库有一篇<使用VMware安装OpenWrt>,地址:http://wenku.baidu.com/link?url=NkvaQpTf2dR8FpYn7JD9A7- ...

  9. 关于Echarts的填坑之旅

    正如标题所说,这是Echarts的一遍填坑,如果你是一些echart的配置的话可以阅读http://echarts.baidu.com/opti...的官网配置信息.今天我想给大家分享的是一些我前段时 ...

随机推荐

  1. Java多线程9：中断机制

    一.概述 之前讲解Thread类中方法的时候,interrupt().interrupted().isInterrupted()三个方法没有讲得很清楚,只是提了一下.现在把这三个方法同一放到这里来讲, ...

  2. LODOP设置打印设计返回JS代码是变量

    前面有一篇博文是介绍JS模版的加载和赋值,赋值有两种,详细可查看本博客的那篇博文:LodopJS代码模版的加载和赋值简单来说,就是打印项的值是变量,在添加打印项前进行赋值:打印项的值是字符串,给打印项 ...

  3. JS判断浏览器是否支持触屏事件

    var hasTouch=function(){ var touchObj={}; touchObj.isSupportTouch = "ontouchend" in docume ...

  4. 下载图片没有关闭http输入流导致下载超时

    在某次接入第三方厂商数据时,需要根据对方提供的URL地址下载图片,当数据量大时会遇到很多的下载图片超时问题,开始以为是第三方厂商的问题,对方排查了很久之后,说是我这边下载数据全部留在缓存区,导致缓存区 ...

  5. vue2.0实现过滤

    vue1.0和vue2.0差别还是挺多的,之前的vue1.0还有过滤器功能,到了2.0过滤器只能通过自己编写.以下是写的一个小demo: HTML <div id="app" ...

  6. AWS设置允许root登陆

    Refer to the following to set root login: sudo -s (to become root) vi /root/.ssh/authorized_keys Del ...

  7. 欧拉筛法模板and 洛谷 P3383 【模板】线性筛素数（包括清北的一些方法）

    题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入格式 第一行包含两个正整数N.M,分别表示查询的范围和查询的个数. 接下来M行每行包含一个不小于1 ...

  8. Oracle Database 快捷版 安装 连接

    Oracle Database 快捷版 11g 第 2 版 下载地址:http://www.oracle.com/technetwork/cn/database/database-technologi ...

  9. iView页面Modal中内嵌Tabs，重新显示Modal时默认选中Tabs的第一项

    文档中说激活面板的name用value,页面第一次加载的时候可以,放在modal里就不好使了,每次打开的时候总显示上一次离开时的界面. 真正能用的是 this.$refs.tabs.activeKey ...

  10. Suffix Automaton

    后缀自动机 先上SAM builder,备用链接.之前的垃圾博客,洛谷的某篇教程,饕餮传奇的题单. 后缀自动机,点数是2n! 首先对着代码讲一遍三种插入. inline void insert(cha ...