想要使用该图表,只需要复制以下代码，再下载 echarts.js 在页面文件中引入即可。

echarts.js 下载链接: http://echarts.baidu.com/download.html

注：本文重点是圆环图各项的数值与占比的显示

// 提示框
	    tooltip: {
	        show: true,                 // 是否显示提示框
	        formatter: \'{b} </br> 销量{c}件 </br> 占比{d}%\'      // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
	    },

图表效果如下：

\"在这里插入图片描述\"
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<  charset=\"UTF-8\">
		< >圆环图案例</ >
		<!-- 引入 ECharts 文件 -->
		<  src=\"js/echarts4.0.js\" type=\"text/ \" charset=\"utf-8\"></ >
	</head>
	<body>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 容器 -->
		<div id=\"chart1\" style=\"width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #000;\"></div>
	</body>
</html>
<  type=\"text/ \">
	// 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
	var chart1 = echarts.init(document.getElementById(\"chart1\"));
	
	// 圆环图各环节的颜色
	var color = [\'#0000FF\', \'#00ffff\', \'#00ff00\', \'#ffff00\'];
	
	// 圆环图各环节的名称和值(系列中各数据项的名称和值)
	var data =[{  
	                name: \'其它\',
	                value: 320
	            },{
	                name: \'休闲裤\',
	                value: 586
	            },{
	                name: \'女士衬衫\',
	                value: 874
	            },{
	                name: \'运动服\',
	                value: 725
	            }];
	  
	// 指定图表的配置项和数据
	var option = {
		
		//背景色
		backgroundColor: {			// 背景颜色
		    type: \'linear\',
		    x: 0,
		    y: 0,
		    x2: 0,
		    y2: 1,
		    colorStops: [{
		        offset: 0, color: \'rgba(0,0,0,0.4)\' // 0% 处的颜色
		    }, {
		        offset: 0.5, color: \'rgba(0,0,0,0.4)\' 	// 50% 处的颜色
		    }, {
		        offset: 1, color: \'rgba(0,0,0,0.4)\' // 100% 处的颜色
		    }],
		    globalCoord: false // 缺省为 false
		},
		
	    // 标题
	     : [{
	        text: \'商城各服装销量对比\',
	        top:\'5%\',
	        left:\'3%\',
	        textStyle:{
	            color: \'#000\',
	            fontSize:18,
	        }
	    }],
	    
	    // 图例
	    legend: [{
	        selectedMode:true,             // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
	        top: \'10%\',
	        left: \'center\',
	        textStyle: {                      // 图例的公用文本样式。
	            fontSize: 14,
	            color: \'#fff\'
       		},
	        data: [\'其它\',\'休闲裤\',\'女士衬衫\',\'运动服\']
	    }],
	    
	    // 提示框
	    tooltip: {
	        show: true,                 // 是否显示提示框
	        formatter: \'{b} </br> 销量{c}件 </br> 占比{d}%\'      // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
	    },
	    
	    // graphic 是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
	    graphic: {
	        type: \'text\',               // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
	        top: \'center\',              // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
	        left: \'center\',             // 同上
	        style: {
	            text: \'各服装销量对比\',       // 文本块文字。可以使用 \\n 来换行。[ default: \'\' ]
	            fill: \'#fff\',           // 填充色。
	            fontSize: 16,           // 字体大小
	            fontWeight: \'bold\'		// 文字字体的粗细，可选\'normal\'，\'bold\'，\'bolder\'，\'lighter\'
	        }
	    },
	    
	    // 系列列表
	    series: [{
	        name: \'圆环图系列名称\',         // 系列名称
	        type: \'pie\',                    // 系列类型 
	        center:[\'50%\',\'50%\'],           // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: [\'50%\', \'50%\'] ]
	        radius: [\'30%\', \'45%\'],         // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, \'75%\'] ]
	        hoverAnimation: true,           // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
	        color: color,                   // 圆环图的颜色
	        label: {                        // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
	            normal: {
	                show: true,             // 是否显示标签[ default: false ]
	                position: \'outside\',    // 标签的位置。\'outside\'饼图扇区外侧，通过视觉引导线连到相应的扇区。\'inside\',\'inner\' 同 \'inside\',饼图扇区内部。\'center\'在饼图中心位置。
	                formatter: \'{b} : {c}件\'  // 标签内容
	            }
	        },
	        labelLine: {                    // 标签的视觉引导线样式,在 label 位置 设置为\'outside\'的时候会显示视觉引导线。
	            normal: {
	                show: true,             // 是否显示视觉引导线。
	                length: 15,             // 在 label 位置 设置为\'outside\'的时候会显示视觉引导线。
	                length2: 10,            // 视觉引导项第二段的长度。
	                lineStyle: {            // 视觉引导线的样式
	                    //color: \'#000\',
	                    //width: 1
	                }
	            }
	        },
	        data: data                      // 系列中的数据内容数组。
	    }]
	};
	
	// 使用刚指定的配置项和数据显示图表
	chart1.setOption(option)
</ >

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章