echarts 自定义配置带单位的 tooltip 提示框方法 和 圆环数据 tooltip 过长超出屏幕
-------tip1--------
在 tooltip 里边配置：拼接字符串；
tooltip : {
trigger: 'axis',
formatter:function(params)
{
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
i === 2 ? relVal += '<br/>' +params[i].marker+ params[i].seriesName + params[i].value +"%" : relVal += '<br/>' +params[i].marker+ params[i].seriesName + params[i].value;
}
return relVal;
}
},
-------tip2-------- 2019-3-14 追加
添加负号（负增长率显示）
tooltip配置，data传值时要注意呼应
tooltip : {
trigger: 'axis',
formatter:function(params)
{
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
i === 2 ? relVal += '<br/>' +params[i].marker+ params[i].seriesName + params[i].name +"%" : relVal += '<br/>' +params[i].marker+ params[i].seriesName + params[i].value;
}
return relVal;
}
},
传值的时候要格式化下数据,和tooltip 里边的name相呼应
后台数据获得的数据处理一
["-9.09","-36.00","25.00","70.00"]
charts要传入的数组（value决定折线走势，name 是tooltip显示要显示的值）
后台数据获得的数据处理二
[{"value":9.09,"name":"-9.09"},{"value":36,"name":"-36.00"},{"value":25,"name":"25.00"},{"value":70,"name":"70.00"}]
note：配置增长率数据的时候要重新格式化下数据（添加一个 名字（此处采用name）/ 或者 echarts 中tooltip formatter函数参数params 里边的其他指定名字）：
参数 params 是 formatter 需要的数据集。格式如下：
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名，类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
// 饼图的百分比
percent: number,
}
-------tip3--------
小插曲：table切换时两个echarts怎样正常显示？
将echarts初始化写在函数中，tab切换时候 调用下echarts初始化函数
-------tip4-------- echarts 圆环数据 tooltip 过长超出屏幕处理方法:
extraCssText:'width:100px;white-space:pre-wrap;'
处理后：
<div ng-show="tabAct == 0" id="plan-pdt-charts-td" style="width: 80vw;height: 320px;"></div>
<div ng-show="tabAct == 1" id="plan-pdt-charts-cb" style="width: 80vw;height: 320px;"></div>
var formatRateArrFun = function(initArr,Arr){
for(var i = 0,len = initArr.length; i < len; i++){
Arr.push({value:Math.abs(initArr[i]),name:initArr[i]});
}
}
// 获取数组最大值
var getMaxVal = function(arr){
var maxVal = 0;
for (var i = 0; i < arr.length; i++){
if(maxVal < arr[i]){
maxVal = arr[i];
}
}
return maxVal + 5000;
};
var initChartFun = function(){
if($scope.tabAct == 0){
increaseRate =[];
echartActArr = initGpAchievePremiumActArr;
echartPlanArr = initGpAchievePremiumArr;
formatRateArrFun(initGpPremiumRateArr,increaseRate);
}else if($scope.tabAct == 1){
increaseRate =[];
echartActArr = initGpAchieveNumActArr;
echartPlanArr = initGpAchieveNumArr;
formatRateArrFun(initGpAchieveNumRateArr,increaseRate);
};
console.log(JSON.stringify(initGpAchieveNumRateArr));
console.log(JSON.stringify(increaseRate));
// 承保echarts配置option
if($scope.doubleChart){
$scope.optionTd = {
tooltip : {
trigger: 'axis',
textStyle:{
align:'left'
},
formatter:function(params)
{
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
if(i === 2){
relVal += '<br/>' +params[i].marker+ params[i].seriesName + params[i].name+"%";
}else{
if (params[i].value >= 10000 && params[i].value < 10000000) {
params[i].value = params[i].value / 10000 + "万";
} else if (params[i].value >= 10000000) {
params[i].value = params[i].value / 10000000 + "千万";
}
relVal += '<br/>' +params[i].marker+ params[i].seriesName + params[i].value;
}
}
return relVal;
}
},
grid: {
top:'15%',
right : '13%',
bottom:'10%',
left:'15%'
},
toolbox : {
feature : {
dataView : {
show : false,
readOnly : false
},
restore : {
show : false
},
saveAsImage : {
show : false
}
}
},
xAxis : [ {
type : 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: ['#f2f2f2']
}
},
axisLabel: {
verticalAlign: "top",
color: "#000",
fontSize:9,
},
data : echartdateArr
} ],
yAxis : [ {
type : 'value',
name : '保费',
nameTextStyle:{
color:"#999",
fontSize:9,
paddingBottom:5,
},
min : 0,
max : getMaxVal(echartActArr),
interval:Math.ceil(getMaxVal(echartActArr)/5),
position : 'left',
axisTick: {
show: false
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: ['#f2f2f2']
}
},
axisLabel: {
verticalAlign: "bottom",
color: "#999",
fontSize:9,
formatter: function(value){
if (value >= 10000 && value < 10000000) {
value = value / 10000 + "万";
} else if (value >= 10000000) {
value = value / 10000000 + "千万";
}
return value;
}
},
}, {
type : 'value',
// name : '计划保费',
min : 0,
max : getMaxVal(echartPlanArr),
interval:Math.ceil(getMaxVal(echartPlanArr)/5),
position : 'right',
offset : 10000,
splitLine: {
show: false,
},
}, {
type : 'value',
name : '增长率',
nameTextStyle:{
color:"#999",
fontSize:9,
paddingBottom:5,
},
min : 0,
max : 100,
position : 'right',
axisTick: {
show: false
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: ['#f2f2f2']
}
},
axisLabel: {
verticalAlign: "bottom",
color: "#999",
fontSize:9,
formatter: function(value){
return value/100*100 + '%'
}
}
} ],
series : [
{
name : '达成保费',
type : 'bar',
barWidth : 10,
/*设置柱状图颜色*/
itemStyle: {
normal: {
color: '#0670ba',
barBorderRadius: [10, 10, 10, 10],
}
},
data : echartActArr,
},
{
name : '计划保费',
type : 'bar',
yAxisIndex : 1,
barWidth : 10,
/*设置柱状图颜色*/
itemStyle: {
normal: {
color: '#f0f3f6',
barBorderRadius: [10, 10, 10, 10],
}
},
data : echartPlanArr,
},
{
name : '增长率',
type : 'line',
yAxisIndex : 2,
itemStyle : {
normal : {
color:'#54bdf6'
}
},
smooth:true,
data : increaseRate,
}]
};
}else{
$scope.optionTd = {
tooltip : {
trigger: 'axis',
textStyle:{
align:'left'
},
formatter:function(params)
{
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
if(i === 2){
relVal += '<br/>' +params[i].marker+ params[i].seriesName + params[i].name+"%";
}else{
if (params[i].value >= 10000 && params[i].value < 10000000) {
params[i].value = params[i].value / 10000 + "万";
} else if (params[i].value >= 10000000) {
params[i].value = params[i].value / 10000000 + "千万";
}
relVal += '<br/>' +params[i].marker+ params[i].seriesName + params[i].value;
}
}
return relVal;
}
},
grid: {
top:'15%',
right : '13%',
bottom:'10%',
left:'15%'
},
toolbox : {
feature : {
dataView : {
show : false,
readOnly : false
},
restore : {
show : false
},
saveAsImage : {
show : false
}
}
},
xAxis : [ {
type : 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: ['#f2f2f2']
}
},
axisLabel: {
verticalAlign: "top",
color: "#000",
fontSize:9,
},
data : echartdateArr
} ],
yAxis : [ {
type : 'value',
name : '保费',
nameTextStyle:{
color:"#999",
fontSize:9,
paddingBottom:5,
},
min : 0,
max : getMaxVal(echartActArr),
interval:Math.ceil(getMaxVal(echartActArr)/5),
position : 'left',
axisTick: {
show: false
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: ['#f2f2f2']
}
},
axisLabel: {
verticalAlign: "bottom",
color: "#999",
fontSize:9,
formatter: function(value){
if (value >= 10000 && value < 10000000) {
value = value / 10000 + "万";
} else if (value >= 10000000) {
value = value / 10000000 + "千万";
}
return value;
}
},
},{
type : 'value',
name : '增长率',
nameTextStyle:{
color:"#999",
fontSize:9,
paddingBottom:5,
},
min : 0,
max : 100,
position : 'right',
axisTick: {
show: false
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: ['#f2f2f2']
}
},
axisLabel: {
verticalAlign: "bottom",
color: "#999",
fontSize:9,
formatter: function(value){
return value/100*100 + '%'
}
}
} ],
series : [
{
name : '达成保费',
type : 'bar',
barWidth : 10,
/*设置柱状图颜色*/
itemStyle: {
normal: {
color: '#0670ba',
barBorderRadius: [10, 10, 10, 10],
}
},
data : echartActArr,
},
{
name : '增长率',
type : 'line',
yAxisIndex : 1,
itemStyle : {
normal : {
color:'#54bdf6'
}
},
smooth:true,
data : increaseRate,
}]
};
}
if($scope.tabAct == 0){
var tdChart = echarts.init(document.getElementById('plan-pdt-charts-td'));
tdChart.setOption($scope.optionTd);
}else if($scope.tabAct == 1){
var cbChart = echarts.init(document.getElementById('plan-pdt-charts-cb'));
cbChart.setOption($scope.optionTd);
}
}
initChartFun();
$scope.changeTabAct = function(tabAct) {
$scope.tabAct = tabAct;
if($scope.tabAct == 0){
initChartFun(); //初始化echarts
}else if($scope.tabAct == 1){
initChartFun(); //初始化echarts
}
}
echarts 自定义配置带单位的 tooltip 提示框方法 和 圆环数据 tooltip 过长超出屏幕的更多相关文章
- css兼容tooltip提示框方法
最终效果图: 基本原理 先设定一个背景色的普通div盒子,然后使用上篇post得到的三角型图标,把div盒子设置为相对定位模式,三角型图标设置为绝对定位,位置相对于div盒子,调整到合适的位置.这样就 ...
- echarts自定义tooltip提示框内容
1.echarts自定义tooltip提示框内容 https://blog.csdn.net/dreamsup/article/details/56667330 2.关于Echarts的formatt ...
- Echarts数据可视化tooltip提示框，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- echarts中tooltip提示框位置控制
关键代码: position: function(point, params, dom, rect, size) { //其中point为当前鼠标的位置,size中有两个属性:viewSize和con ...
- 使用css实现全兼容tooltip提示框
在上一篇文章中,使用css实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标.多级菜单等,这篇文章我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框. 最终 ...
- tooltip提示框组件
Tooltip 提示框组件 可独立于其他组件通过$.fn.tooltip.defaults重写默认的defaults.当用户移动鼠标指针在某个元素上时,出现提示信息窗口来显示额外信息.提示内容可以包含 ...
- 原生js实现tooltip提示框的效果
在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我,只是随机一瞟,便看到了这个tooltip的 ...
- 纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- CSS3实现Tooltip提示框飞入飞出动画
原文:CSS3实现Tooltip提示框飞入飞出动画 我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片.还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观 ...
随机推荐
- HTML&CSS_基础03
一.Meta标签: 1.可以设置网页的关键字 2.用来指定网页描述 3.可以用来网页重定向 具体参数参见:http://www.w3school.com.cn/html5/tag_meta.asp 二 ...
- [十二省联考2019]异或粽子（堆+可持久化Trie）
前置芝士:可持久化Trie & 堆 类似于超级钢琴,我们用堆维护一个四元组\((st, l, r, pos)\)表示以\(st\)为起点,终点在\([l, r]\)内,里面的最大值的位置为\( ...
- 20165223《网络对抗技术》Exp2 后门原理与实践
目录 -- 后门原理与实践 后门原理与实践说明 实验任务 基础知识问答 常用后门工具 实验内容 任务一:使用netcat获取主机操作Shell,cron启动 任务二:使用socat获取主机操作Shel ...
- 老男孩Python全栈学习 S9 日常作业 009
1.写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素,并将其作为新列表返回给调用者. def func1(List): List2 = [] for num in range(len(Li ...
- go语言的开始入门（一）
前言:作为Web开发人员掌握多种后台是必须的,趁自己有C语言的基础,所以尝试入门Golang (一).基本数据类型的认识 小结:int大小默认与系统相关,byte只能够存单字节, (二).Gola ...
- Leetcode经典试题：Longest Substring Without Repeating Characters解析
题目如下: Given a string, find the length of the longest substring without repeating characters. Example ...
- Oracle ORA-08104报错处理方法及注意事项
[环境介绍] 系统环境:IBM P740 8205-E6C (AIX) + 11.2.0.3.0 Oracle RAC [背景介绍] 故障描述:数据库表空间超过90%,无法进行扩容表空间,需要业务侧清 ...
- JAVA开发环境搭建(Mac)
1. 打开Terminal, 执行命令: java -version 即可查看到我们所安装的jdk版本. 2.安装jdk成功之后,我们还需要配置jdk环境变量. 使用命令: /usr/libexec/ ...
- Linux基础 - 系统优化及常用命令
目录 Linux基础系统优化及常用命令 Linux基础系统优化 网卡配置文件详解 ifup,ifdown命令 ifconfig命令 ifup,ifdown命令 ip命令 用户管理与文件权限篇 创建普通 ...
- PAT-B-1020 月饼 (25)（25 分）
题目描述: 月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量.总售价.以及市场的最大需求量,请你计算可以获得的最大收益是多少. 注意:销售时允许取出一 ...