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的叠加实现,但是效果比较生硬,外观 ...
随机推荐
- mysql-SELECT子句的顺序
- 【LUOGU???】WD与地图 整体二分 线段树合并
题目大意 有一个简单有向图.每个点有点权. 有三种操作: 修改点权 删除一条边 询问和某个点在同一个强连通分量中的点的前 \(k\) 大点权和. \(n\leq 100000,m,q\leq 2000 ...
- DRF 商城项目 - 购物( 购物车, 订单, 支付 )逻辑梳理
购物车 购物车模型 购物车中的数据不应该重复. 即对相同商品的增加应该是对购买数量的处理而不是增加一条记录 因此对此进行联合唯一索引, 但是也因此存在一些问题 class ShoppingCart(m ...
- Mac anaconda安装 “conda command not found” 解决方法
官网下载包直接安装的时候可能会产生这种问题,这主要还是环境变量配置的问题 一般我们添加环境变量的方法是编辑.bash_profile或.bashrc,在文件里插入下面这段代码 export PATH= ...
- 【洛谷P1659】啦啦队排练
题目大意:给定一个长度为 N 的字符串,求前 K 个长度为奇数的回文子串的长度的乘积是多少. 题解:利用回文自动机,将所有长度的回文串和个数求出来,按照长度排序进行模拟即可. 代码如下 // luog ...
- 关于AI
自己看着办吧 http://tieba.baidu.com/p/6008409988?fr=ala0&pstaala=1&tpl=5&fid=93764&isgod=0
- (二) V4L2引入(含浅析UVC)
title: V4L2引入(含浅析UVC) date: 2019/4/23 19:00:00 toc: true --- V4L2引入(含浅析UVC) 基本框架 V4L2全名是video for li ...
- Hadoop-2.7.3-src 源码编译
Hadoop-2.7.3 编译 1.需要环境梳理 BUILDING JDK1.7+ maven 3.0 or later findbugs 1.3.9 protocolBuffer 2.5.0 cma ...
- MD5算法 —— C语言实现（字符串的加密）
转 https://blog.csdn.net/weixin_42167759/article/details/81209320 网上找到的实现md5函数代码,包括一个头文件md5.h和一个源文件md ...
- DirectX11--教程项目无法编译、运行的解决方法
综述 对于Win10系统的大多数用户来说,可以直接编译本教程对应的项目并运行.但也有部分用户由于某些原因可能会出现无法编译的情况. DirectX11 With Windows SDK完整目录 欢迎加 ...