echarts之rich小解_echarts rich-优快云博客

本文链接：https://blog.youkuaiyun.com/wangxinxin1992816/article/details/88895934

本文介绍使用ECharts 4.2.1-rc.1版本创建饼状图，并利用其新增的Rich Text特性来定制图例样式。通过具体示例代码展示了如何设置不同部分的样式，如颜色和对齐方式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好久没写echarts图形了，看到新增了rich特性，耐不住想小试一番，心心念念下载 4.2.1-rc.1版本的echarts
然后

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts之富文本小解</title>
	</head>

	<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
	<script type="text/javascript" src="js/echarts.js" ></script>
	
	<body>
		<div id="id-pie" style="width: 600px;height:400px;background: green;"></div>
	</body>
	<script>
	$(function(){
		var _data = [
			{value:335, name:'直达'},
	        {value:679, name:'营销广告'},
	        {value:1548, name:'搜索引擎'}
        ]
		videoProportionPie(_data) 
	});
	function videoProportionPie(data) {
	    // 基于准备好的dom，初始化echarts实例
	    var myChart = echarts.init(document.getElementById("id-pie"));
	    // 指定图表的配置项和数据
	    var option = {
	        color: ["#20AAB0", "#81E1AB", "#61EBF9", "#E2E466", "#01c8ff", "#0088e6", "#07faaa", "#5b5eeb", "#a0f2c4", "#01e9ff", "#00c7fe", "#0099ff", "#097cfd"],
	        tooltip: {
	            trigger: 'item',
	            formatter: "{b} <br/>{a} : {c} "
	        },
	        legend: {

	            orient: 'vertical',
	            right: 5,
	            top: 'middle',
	            data: ['直达','营销广告','搜索引擎'],
	            formatter: function (name) {
	                var arr = [];
	                var index = 0;
	                var total = 0;
	                for (var i = 0; i < data.length; i++) {
	                    total += data[i].value;
	                    if (data[i].name == name) {
	                        index = i;
	                    }
	                }

	                arr.push('{name|' + name + '}',
	                    '{pre|' + ((data[index].value / total) * 100).toFixed(1) + '%}',
	                    '{value|' + data[index].value + '}');
	                return arr.join('');
	            },
	            textStyle: {
	                color: '#FFFFFF',
	                rich: {
	                    name: {
	                        align: 'left',
	                        color: 'red',
	                        width: 80
	                    },
	                    pre: {
	                        align: 'left',
	                        color: 'blue',
	                        width: 55,
	                        padding: [0, 5, 0, 10]
	                    },
	                    value: {
	                        align: 'left',
	                        color: '#000',
	                        width: 60
	                    }
	                }
	            }
	        },
	        series: [{
	            name: '视频接入数',
	            type: 'pie',
	            radius: '60%',
	            center: ['23%', '50%'],
	            clockwise: false,
	            selectedMode: 'single',
	            startAngle: 180,
	            data: data,
	            label: {
	                normal: {
	                    show: false
	                }
	            },
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }]
	    };
	// 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	    $(window).resize(function () {
	        myChart.resize();
	    });
	}
	</script>
</html>

然后图例的总是重叠在一起，检查一下用法，并未发现异样。

下载 3.8.5版本echarts

在这里插入图片描述
出来了