自定义饼图tooltip和legend

清疚 2021-07-26 22:05 614阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70]: /images/20210726/e930b7e545df4092996429c7744c5932.png