echarts标准饼图解读(一)——提示框（tooltip）配置
<!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 : {
show: true,//默认值true，可选为：true（显示） | false（隐藏）
zlevel: 1,//默认值1，一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
z: 8,//默认值8，二级层叠控制，同一个canvas（相同zlevel）上z越高约靠顶层。
showContent: true,//默认值true，tooltip主体内容显示策略，只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false，
trigger: 'item',//默认值'item'，触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
position: null,//默认值null，位置指定，传入{Array}，如[x, y]， 固定位置[x, y]；传入{Function}，如function([x, y]) {return [newX,newY]}，默认显示坐标为输入参数，用户指定的新坐标为输出返回。
formatter: '{a} < br/>{b} : {c}',//默认值null，内容格式器
//折线（区域）图、柱状（条形）图、K线图 : a（系列名称），b（类目值），c（数值）, d（无）
//散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）
//地图 : a（系列名称），b（区域名称），c（合并数值）, d（无）
//饼图、雷达图、仪表盘、漏斗图: a（系列名称），b（数据项名称），c（数值）, d（饼图：百分比 | 雷达图：指标名称）
islandFormatter: '{a} < br/>{b} : {c}',//默认值'{a} < br/>{b} : {c}'，拖拽重计算独有，数据孤岛内容格式器
showDelay: 20,//默认值20，显示延迟，添加显示延迟可以避免频繁切换，特别是在详情内容需要异步获取的场景，单位ms
hideDelay: 100,//默认值100，隐藏延迟，单位ms
transitionDuration: 0.4,//默认值0.4，动画变换时长，单位s，如果你希望tooltip的跟随实时响应，showDelay设置为0是关键，同时transitionDuration设0也会有交互体验上的差别。
enterable: false,//默认值false，鼠标是否可进入详情气泡中，默认为false，如需详情内交互，如添加链接，按钮，可设置为true。
backgroundColor: 'rgba(0,0,0,0.7)',//默认值，提示背景颜色，默认为透明度为0.7的黑色
borderColor: '#333',//默认值，提示边框颜色
borderRadius: 4,//默认值，提示边框圆角，单位px，默认为4
borderWidth: 0,//默认值，提示边框线宽，单位px，默认为0（无边框）
padding: 5,//默认值，提示内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
axisPointer: {//默认值，坐标轴指示器，默认type为line，可选为：'line' | 'cross' | 'shadow' | 'none'(无)，指定type后对应style生效，见下
//lineStyle设置直线指示器（详见lineStyle）,
//crossStyle设置十字准星指示器（详见lineStyle）,
//shadowStyle设置阴影指示器（详见shadowStyle），areaStyle.size默认为'auto'自动计算，可指定具体宽度
type: 'none',//默认值，可选值：'line' | 'cross' | 'shadow' | 'none'(无)，指定type后对应style生效（如下）
lineStyle: {//默认值各异，
color: 'rgba(0,0,0,0.7)',//默认值各异，颜色rgba
type: 'solid',//默认值，
width: 0,//默认值，
shadowColor: 'rgba(0,0,0,0)',//默认值，折线主线(IE8+)有效，阴影色彩，支持rgba
shadowBlur: 5,//默认值，折线主线(IE8+)有效，阴影模糊度，大于0有效
shadowOffsetX: 3,//默认值，折线主线(IE8+)有效，阴影横向偏移，正值往右，负值往左
shadowOffsetY: 3,//默认值，折线主线(IE8+)有效，阴影纵向偏移，正值往下，负值往上
},
crossStyle: {//默认值，
color: 'rgba(0,0,0,0.7)',//默认值，
type: 'solid',//默认值，
width: 0,//默认值，
shadowColor: 'rgba(0,0,0,0)',//默认值，
shadowBlur: 5,//默认值，
shadowOffsetX: 3,//默认值，
shadowOffsetY: 3,//默认值，
},
shadowStyle: {//默认值，
color: 'rgba(0,0,0,0.7)',//默认值，
type: 'default',//默认值，
},
textStyle: {//默认值，
fontFamily: 'Arial, Verdana, sans...',//默认值，
fontSize: 12,//默认值，
fontStyle: 'normal',//默认值，
fontWeight: 'normal',//默认值，
},
},
textStyle: {//默认值，
color: 'rgba(0,0,0,0.7)',//默认值各异，
decoration: 'none',//默认值，
align: 'rgba(0,0,0,0.7)',//默认值，
baseline: 'rgba(0,0,0,0.7)',//默认值，
fontFamily: 'Arial, Verdana, sans...',//默认值，
fontSize: 12,//默认值，
fontStyle: 'normal',//默认值，样式，可选为：'normal' | 'italic' | 'oblique'
fontWeight: 'normal',//默认值，粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
},
}, //图例，每个图表最多仅有一个图例
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标准饼图解读(一)——提示框（tooltip）配置的更多相关文章
- echarts标准饼图(二)——标题（title）配置
标题(title)配置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- echarts标准饼图(一)——基本配置demo
echarts标准饼图解读共分为四部分, 一.基本配置demo 二.标题(title)配置 三.提示框(tooltip)配置 四.图例(legend)配置 五.系列列表(series )配置 下面是一 ...
- echarts饼图调整悬浮提示框的位置
默认是跟随鼠标的位置 通过数组表示提示框浮层的位置,数字设置绝对位置,百分比设置相对位置. position: [10,10] //绝对位置,相对于容器左侧10px,上侧10px position: ...
- echarts —— tooltip 鼠标悬浮显示提示框属性
最近一直在使用echarts,当然也被其中的各种属性整的头大,记录一下其中遇到的问题. tooltip:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...
- CSS：CSS 提示工具(Tooltip)
ylbtech-CSS:CSS 提示工具(Tooltip) 1.返回顶部 1. CSS 提示工具(Tooltip) 本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具. 提示工具在鼠标移 ...
- Ubuntu12.04下eclipse提示框黑色背景色的修改方法
eclipse提示框的背景颜色使用的是系统的提示框颜色配置,在windows下为黄色,但在Ubuntu12.04(gnome)下却是黑色,造成提示内容很难看清. 在eclipse中我们是无法修改这个颜 ...
- Angular toastr提示框
1. 安装ngx-toastr包 npm install ngx-toastr --save 2. package.json中引入toastr样式文件 "styles": [&qu ...
- Echarts数据可视化tooltip提示框，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- echarts自定义tooltip提示框内容
1.echarts自定义tooltip提示框内容 https://blog.csdn.net/dreamsup/article/details/56667330 2.关于Echarts的formatt ...
随机推荐
- ZOJ 3633 Alice's present 倍增 区间查询最大值
Alice's present Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/vi ...
- hdu 5279 Reflect phi 欧拉函数
Reflect Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://bestcoder.hdu.edu.cn/contests/contest_chi ...
- Codeforces Gym 100002 B Bricks 枚举角度
Problem B Bricks" Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100002 ...
- Codeforces Gym 100114 H. Milestones 离线树状数组
H. Milestones Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100114 Descripti ...
- BZOJ 2208: [Jsoi2010]连通数 tarjan bitset
2208: [Jsoi2010]连通数 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/pr ...
- C++的XML编程经验――LIBXML2库使用指南[转]
C++的XML编程经验――LIBXML2库使用指南 写这篇文章的原因有如下几点:1)C++标准库中没有操作XML的方法,用C++操作XML文件必须熟悉一种函数库,LIBXML2是其中一种很优秀的XML ...
- AES加密算法(C++实现,附源代码)
先搞定AES算法,基本变换包含SubBytes(字节替代).ShiftRows(行移位).MixColumns(列混淆).AddRoundKey(轮密钥加) 其算法一般描写叙述为 明文及密钥的组织排列 ...
- Android开发学习之 定制界面风格
统一的用户界面是可以使得应用程序更友好.要做到用户界面的统一,我们就必须用到风格(style)和主题(theme).OPhone系统提供了很多系统默认的风格和主题,但是很多情况下,这些不能满足我们的需 ...
- 使用phpExcel向mysql数据库导入excel
使用phpExcel向mysql数据库导入excel from:http://blog.163.com/dustye_l/blog/static/172439513201242491016834/ 使 ...
- C#_自动化测试 (四) 自动卸载软件
在平常的测试工作中,经常要安装软件,卸载软件, 即繁琐又累. 安装和卸载完全可以做成自动化. 安装软件我们可以通过自动化框架,自动点击Next,来自动安装. 卸载软件我们可以通过msiexec命 ...