百度Echarts实现饼图，较官网示例更多项显示

往事不堪回首..

已于 2023-10-11 14:24:58 修改

阅读量458

点赞数

文章标签： echarts 前端 javascript

于 2023-10-11 13:56:19 首次发布

本文链接：https://blog.csdn.net/qq3892997/article/details/133768622

版权

本来是想直接使用官网示例修改几个地方就用起来，但是用户希望一眼就看到百分占比，但是官网示例没有使用lable的，找了半天都没找到，后来通过对比其他饼图发现lable这个项，再次记录一下

首先看效果图：

2. 代码实现：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>饼图</title>
    <script src="echarts.js"></script>
	<script src="jquery-1.8.2.min.js"></script>
  </head>
  <body>
    <div id="main" style="width: 600px;height:400px;"></div>    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <script type="text/javascript">
		$(function(){
			//data需要放里面，因为data的值可能发生变化，这时就可以拿到最新数据
			var data = [{value: 124, name: '满仓'}, {value: 79, name: '半仓'}, {value: 88, name: '空仓'}];
			var dom = document.getElementById("main");
			var myChart = echarts.init(dom);
			var option = {
				color:['#1032ff', '#6d94f7', '#5ce561'], //注释后将使用默认颜色
				title: {text: '仓位饼图', subtext: '实时更新', left: 'right'}, /*标题显示在图标的右方*/			
				tooltip: {trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)'}, //鼠标滑过显示项
				legend: {data: ['满仓','半仓','空仓'] }, 
				series: [{
					name: '仓位比例',
					type: 'pie', 
					data: data,
					label:{ /*如不设置lable，默认是在饼图外四周显示*/
						formatter: '{b} : {c} ({d}%)', //标签显示格式  
						position: 'inside' // 指定标签的位置，inside表示在饼图内部    
					}  
				}]
			};
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		}); 		
    </script>
  </body>
</html>

3. 以下是饼图的一些参数的使用描述（我上面的代码精简了，需要设置更多参考以下）

legend: {orient: 'vertical', left: 'left', data: ['满仓','半仓','空仓'] }, /*图表中左侧显示各种标签颜色,希望显示在下方就使用 bottom：‘bottom’ ， 删除orient与left默认是在图标上方中间显示*/

legend: {
	orient: 'vertical', /*'vertical'意味着图例列表将垂直显示*/
	left: 'left', /*设定了图例列表的左侧距离，这可以让你在图表中为图例留出空间，使其显示在特定位置*/
	data: ['满仓','半仓','空仓']
},


label中的position 属性可以接受以下值：
'top'：标签在柱形的顶部。
'left'：标签在柱形的左侧。
'right'：标签在柱形的右侧。
'bottom'：标签在柱形的底部。
'inside'：标签在柱形内部，根据 formatter 设置展示。
'outside'：标签在柱形外部。

//如果需要使用emphasis，需要放到lable的上面
//series.emphasis对象用于定义当鼠标悬停在图表元素上时的样式。它可以改变鼠标悬停时图表的颜色、边界等视觉效果，注释后会使用我设置的color颜色，如果color也没有那就使用默认颜色
emphasis: { 
	itemStyle: {
		shadowBlur: 10,  //设置阴影的模糊大小，值越大阴影边缘越模糊
		shadowOffsetX: 0,  //设置阴影的水平偏移量，正值表示向右偏移，负值表示向左偏移。
		shadowColor: 'rgba(0, 0, 0, 0.5)' //设置阴影的颜色，可以是常见的颜色名或者 RGB 格式的颜色代码。
	}
},