echarts 自定义配置带单位的 tooltip 提示框方法 和 圆环数据 tooltip 过长超出屏幕...

最新推荐文章于 2024-05-03 11:08:18 发布
最新推荐文章于 2024-05-03 11:08:18 发布
阅读量817 收藏 1
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/xiaomaotao/p/10522047.html
版权

 

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


 
 
　　
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

转载于:https://www.cnblogs.com/xiaomaotao/p/10522047.html

                

        

        




    




    

      

        

            

              
                
                  weixin_33889245
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
纯CSS3实现自定义Tooltip边框.rar_纯CSS3实现自定义Tooltip边框

				
			

			

				

					09-24
				

			

		

		

			
				
一款用纯CSS3打造的自定义Tooltip边框的应用，之前我们讨论过如何用CSS3来实现不同样式的Tooltip，今天的这款Tooltip却可以用CSS3来自定义边框，边框呈涂鸦风格。用CSS3实现自定义边框的好处是可以自适应边框内部的...

			
		

	



                

              
                



	

		

			

				
					
echarts绘制自定义提示的环形图、折线图及y轴柱状图

				
			

			

				

					qq_42248955的博客
				

				

					08-15
					
					1943
					
				

			

		

		

			
				
1、自定义提示的环形图



      this.ring_dom = this.$refs.ring
      const myRing = this.$echarts.init(this.ring_dom)
      let total
      this.total < 10 ? (total = ' ' + this.total) : (total = this.total)
      const option = {
        //显示在环形内的文字
        titl

			
		

	



                


  
              

                


	

		

			

				
					
Echart Gallery中3/4环形图数据超出75%溢出的问题

				
			

			

				

					qq_42313028的博客
				

				

					11-19
					
					890
					
				

			

		

		

			
				
Echart Gallery中3/4环形图数据超出75%溢出的问题
前言
在做数据可视化的时候,我觉得echart是首选的第三方插件,但是echart中提供的各种图标用就了会觉得风格和样式有点陈旧,最近找到了一个由各种社区贡献者提供的一个更加丰富,绚丽的网站Echart Gallery;里面有各种你想要的图表,而且看上去也更美观.
问题
最近在做h5报告的时候使用到了里面的3/4环形图,看上去是这样的
看上去没毛病,但是当你的某一条数据占的比重超过75%,进度条将会溢出3/4的区域.如下图
这样就会覆盖文字

			
		

	





	

		

			

				
					
Echarts中tooltip添加单位

				
			

			

				

					m0_46348803的博客
				

				

					03-01
					
					609
					
				

			

		

		

			
				
【代码】Echarts中tooltip添加单位。

			
		

	



		

			
		



	

		

			

				
					
Echarts 环形图文字超出 canvas区域问题解决

				
			

			

				

					ii窝窝头的博客
				

				

					01-30
					
					2215
					
				

			

		

		

			
				
文字过长会超出区域

 

处理过后








			
		

	





	

		

			

				
					
echart自定义tooltip样式

					
热门推荐

				
			

			

				

					bear_lam的博客
				

				

					02-27
					
					1万+
					
				

			

		

		

			
				
echart地图,hover到markPoint后,异步加载信息,展示一个table代码如下:myChart.setOption(option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params)...

			
		

	





	

		

			

				
					
echart在随页面的大小进行缩放时，解决有时会溢出的问题

				
			

			

				

					时光淡然
				

				

					10-26
					
					1519
					
				

			

		

		

			
				
echart有时在页面缩放的时候，会发生溢出情况，给它的父元素添加上overflow:hidden，可能就会解决问题，如果还有的话，可以对自身添加上overflow:hidden，或许能解决；我的是通过给父元素和本身都进行了设置，解决了页面缩放，排版不会变。

没给父元素添加overflow:hidden，有的时候就是这样的

添加之后

还有一种是，如果只给父元素添加，问题不能解决，需要给本身也添加上。
这个是页面结构

这个是设置的样式

效果图

如果只给父元素添加的话，会出现，下面这种情况。





			
		

	





	

		

			

				
					
echarts4.x版本radar图tooltip实现显示单轴数据

				
			

			

				

					09-26
				

			

		

		

			
				
使用echarts.js最新版版本实现雷达图提示框显示单“极”数据，已修改经测试并无Bug

			
		

	





	

		

			

				
					
37.（leaflet篇）leaflet叠加自定义tooltip展示.zip

				
			

			

				

					09-27
				

			

		

		

			
				
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/120502129

			
		

	





	

		

			

				
					
echarts-tooltip-carousel.js

				
			

			

				

					03-11
				

			

		

		

			
				
echarts动画制作

			
		

	





	

		

			

				
					
echarts-auto-tooltip.js

				
			

			

				

					05-21
				

			

		

		

			
				
echarts 实现数据(tooltip)自动轮播插件，假如需要这方面的报表轮播的话，可以尝试使用，请在下载之前确认是否符合业务需求，谢谢！

			
		

	





	

		

			

				
					
echart环形图

				
			

			

				

					jieweiwujie的博客
				

				

					09-20
					
					736
					
				

			

		

		

			
				
echart饼图






 this.categoryOptions = {
          title: [{
            text: `${this.radioSelect}分布`,
            textStyle: {
              fontSize: 14,
              color: '#666'
            },
            left: 20,
            top: 20
          }, .

			
		

	





	

		

			

				
					
Echarts基础圆环图

				
			

			

				

					weixin_43790703的博客
				

				

					02-01
					
					1075
					
				

			

		

		

			
				
Echarts基础圆环图

			
		

	





	

		

			

				
					
Echarts图表之带提示框的饼图

				
			

			

				

					gly_technology的博客
				

				

					01-21
					
					864
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Echarts图表</title>
  <!-- 引入echarts.min.js -->
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min....

			
		

	





	

		

			

				
					
echarts 环形图鼠标悬停

				
			

			

				

					梦寻汝的博客
				

				

					01-24
					
					865
					
				

			

		

		

			
				
var m2R2Data = [{
        value: 335,
        value1: 234,
        legendname: 'Ⅰ类',
        name: "Ⅰ类",
        itemStyle: {
            color: "#8d7fec"
        }
    },
    {
        value: 310,
        value1: 314,
        legendname: 'Ⅱ类',
        ...

			
		

	





	

		

			

				
					
echarts中tooltip前面的小圆点

				
			

			

				

					zhuhongyang_的博客
				

				

					06-30
					
					910
					
				

			

		

		

			
				
如果发现小圆点不见了，可以用到echarts中的mark





if (o.new_detail && o.new_detail.length) {
    str2 = `${element.marker + element.seriesName}：<br />${element.name}:`;
    o.new_detail.map(p => {
      str2 += `<br /> ${p.name}  ：${p.value.toFixed.

			
		

	





	

		

			

				
					
echart 圆饼图 显示单位_echarts环形饼图中间显示总数

				
			

			

				

					weixin_31907553的博客
				

				

					12-23
					
					2548
					
				

			

		

		

			
				
function setEchartsPie(id, data) {let $el = document.getElementById(id);let myChart = this.echarts.init($el, '', {width: 450,height: 300,});let dataName = [];let total = 0;data.forEach((res) => {da...

			
		

	





	

		

			

				
					
vue快速入门（五十）重定向

					
最新发布

				
			

			

				

					不起眼小菜菜的博客
				

				

					05-03
					
					372
					
				

			

		

		

			
				
注释很详细，直接上代码……

			
		

	





	

		

			

				
					
bpmn-js推荐几款常用的插件

				
			

			

				

					飞云先生
				

				

					04-30
					
					158
					
				

			

		

		

			
				
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。

			
		

	





	

		

			

				
					
最新版echarts圆环 的 legend设置了宽度但是里边自定义的内容过长就会影藏,想让他超出就...,然后有tooltip提示 例子

				
			

			

				

					06-10
				

			

		

		

			
				
同样可以使用 `formatter` 属性来自定义 legend 的显示内容，并且使用 CSS 样式来控制宽度和超出部分的显示效果。...这样，圆环图的 legend 中的内容就可以超出部分显示，并且在鼠标悬浮时会有 tooltip 提示。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值