自定义饼图tooltip和legend

最新推荐文章于 2024-08-22 14:30:27 发布

江湖行骗老中医

最新推荐文章于 2024-08-22 14:30:27 发布

阅读量516

点赞数 1

分类专栏： # echart

本文链接：https://blog.csdn.net/liming1016/article/details/103058536

版权

echart 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

tooltip中可以使用html标签自定义样式比较简单。

但是legend中不能使用html标签，所有只能使用echart的富文本标签对样式进行修改。

option.push(
	{
	    tooltip: {
	        trigger: 'item',
	        backgroundColor:'rgba(64,93,183,0.5)',//通过设置rgba调节背景颜色与透明度
            borderWidth: '5',
            textStyle:{
                align:'left'
            },
            borderColor: "#5D8DD0",
	        formatter: function(params) {
	        	//return "{a} <br/>{b}: {c} -{d}%"
	        	return `${params.seriesName}<br/>
            	${params.marker}
        		${params.name} ：
                ${params.value} — ${params.percent}%<br>`
			}
	    },
	    legend: {
	        orient: 'vertical',
	        padding: [80, 0, 20,0],
	        pageTextStyle: {
	        	color: '#fff'
	        },
	        animation: 'true',
	        animationDurationUpdate : '1000',
	        top: 'middle',
	        right: '40',
	        type: 'scroll',
	        icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
	        itemWidth: 15,  // 设置宽度
	        itemHeight: 15, // 设置高度
	        itemGap: 15, // 设置间距
	        textStyle:{
	            rich:{
	                a:{
	                    fontSize:14,
	                    width: 80,
	                    color: '#B5BCF6',
	                    align: 'left'
	                },
	                b:{
	                    fontSize:14,
	                    color: '#B5BCF6',
	                    align:'center'
	                },
	                c:{
	                    fontSize:14,
	                    width: 20,
	                    color: '#B5BCF6',
	                    align:'center'
	                }
	            }
	        },
	        data:legend,
	        formatter: function (name) {
                var index = 0;
	        	bannerData[i].value.forEach(function(value,i){
                    if(value.name == name){
                        index = i;
                    }
                });
	        	
	        	return ['{a|'+name+'}{c|'+bannerData[i].value[index].value+ "}{b| — " +Math.round(bannerData[i].value[index].value/bannerData[i].total*100*100)/100+"%"+'}']
	        }
	    },
	    grid: {
	    	left: '150',
		      	right: '4%',
		      	bottom: '4%',
		      	top: '20%',
		      	containLabel: true
		    },
	    series: [
	        {
	            name:bannerData[i].warehouse,
	            type:'pie',
	            center: ['180px', '45%'],
	            radius: ['50%', '60%'],
	            avoidLabelOverlap: false,
	            label: {
	                normal: {
	                    show: false,
	                    position: 'center'
	                },
	                emphasis: {
	                    show: true,
	                    textStyle: {
	                        fontSize: '30',
	                        fontWeight: 'bold'
	                    }
	                }
	            },
	            labelLine: {
	                normal: {
	                    show: false
	                }
	            },
	            data:bannerData[i].value
	        }
	    ]
	}		
 
)