<!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. 使用jar包格式化Docker 容器日志

    前面使用JS格式化textarea中的日志内容,但局限于JS语言性能,在日志内容较多时效率无法接受,建议日志内容大于5000行时转投本java程序,文末提供jar包下载. LogsFormat.jav ...

  2. GitHub最基本使用总结

    GitHub最基本使用入门 入门必看博客:https://mp.weixin.qq.com/s/LbzSwl4dYwrSPze0w10l8w 一.Git Linux安装 Git Linux安装教程:h ...

  3. Magento2 Service contracts 服务合同

    服务合同 Magento是一个模块化系统,它使第三方开发人员能够定制和覆盖其框架的核心部分.然而,这种灵活性是有代价的. 业务逻辑倾向于泄漏Magento系统的各个层,这表现为重复且不一致的代码. 商 ...

  4. 【Spring】Spring bean的实例化

    Spring实现HelloWord 前提: 1.已经在工程中定义了Spring配置文件beans.xml 2.写好了一个测试类HelloWorld,里面有方法getMessage()用于输出" ...

  5. docker的基础命令

    详细命令参考http://www.runoob.com/docker/docker-command-manual.html

  6. python去除html标签的几种方法

    import re from bs4 import BeautifulSoup from lxml import etree html = '<p>你好</p><br/& ...

  7. 【SVN】svn 查看项目的 svn 服务器地址目录(脱机状态下)

    #事故现场: 在无法连接到svn服务器地址的情况下,查看本地项目的svn的服务器地址目录: #事故分析 因为无法连接svn服务器,所以只能通过svn在本地存储的信息来获取svn的地址路径信息: #解决 ...

  8. kubernetes云平台管理实战: 集群部署(一)

    一.环境规划 1.架构拓扑图 2.主机规划 3.软件版本 [root@k8s-master ~]# cat /etc/redhat-release CentOS Linux release 7.4.1 ...

  9. git for windows 本地仓库

    1.安装 先在网上安装好git for windows的程序 在gitbash中输入以下 $ git config --global user.name "Your Name" $ ...

  10. UE4 AR开发笔记

    1.基础使用 ArToolKit:生成图片特征,可以用彩图.(图片先灰化)    genTexData效准相机.由于有的相机照相有弧度.  calib_camera 2.使用UE4ARPlugins做 ...