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

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

    首先看效果图：

     2. 代码实现：

    1. html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <title>饼图title>
    6.     <script src="echarts.js">script>
    7. 	<script src="jquery-1.8.2.min.js">script>
    8.   head>
    9.   <body>
    10.     <div id="main" style="width: 600px;height:400px;">div>    
    11.     <script type="text/javascript">
    12. 		$(function(){
    13. 			//data需要放里面，因为data的值可能发生变化，这时就可以拿到最新数据
    14. 			var data = [{value: 124, name: '满仓'}, {value: 79, name: '半仓'}, {value: 88, name: '空仓'}];
    15. 			var dom = document.getElementById("main");
    16. 			var myChart = echarts.init(dom);
    17. 			var option = {
    18. 				color:['#1032ff', '#6d94f7', '#5ce561'], //注释后将使用默认颜色
    19. 				title: {text: '仓位饼图', subtext: '实时更新', left: 'right'}, /*标题显示在图标的右方*/			
    20. 				tooltip: {trigger: 'item', formatter: '{a} 
      {b} : {c} ({d}%)'      }, //鼠标滑过显示项
    21. 				legend: {data: ['满仓','半仓','空仓'] }, 
    22. 				series: [{
    23. 					name: '仓位比例',
    24. 					type: 'pie', 
    25. 					data: data,
    26. 					label:{ /*如不设置lable，默认是在饼图外四周显示*/
    27. 						formatter: '{b} : {c} ({d}%)', //标签显示格式  
    28. 						position: 'inside' // 指定标签的位置，inside表示在饼图内部    
    29. 					}  
    30. 				}]
    31. 			};
    32. 			if (option && typeof option === "object") {
    33. 				myChart.setOption(option, true);
    34. 			}
    35. 		}); 		
    36.     script>
    37.   body>
    38. html>

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

    1. legend: {orient: 'vertical', left: 'left', data: ['满仓','半仓','空仓'] }, /*图表中左侧显示各种标签颜色,希望显示在下方就使用 bottom：‘bottom’ ， 删除orient与left默认是在图标上方中间显示*/
    2.  
    3. legend: {
    4. 	orient: 'vertical', /*'vertical'意味着图例列表将垂直显示*/
    5. 	left: 'left', /*设定了图例列表的左侧距离，这可以让你在图表中为图例留出空间，使其显示在特定位置*/
    6. 	data: ['满仓','半仓','空仓']
    7. },
    8.  
    9.  
    10. label中的position 属性可以接受以下值：
    11. 'top'：标签在柱形的顶部。
    12. 'left'：标签在柱形的左侧。
    13. 'right'：标签在柱形的右侧。
    14. 'bottom'：标签在柱形的底部。
    15. 'inside'：标签在柱形内部，根据 formatter 设置展示。
    16. 'outside'：标签在柱形外部。
    17.  
    18. //如果需要使用emphasis，需要放到lable的上面
    19. //series.emphasis对象用于定义当鼠标悬停在图表元素上时的样式。它可以改变鼠标悬停时图表的颜色、边界等视觉效果，注释后会使用我设置的color颜色，如果color也没有那就使用默认颜色
    20. emphasis: { 
    21. 	itemStyle: {
    22. 		shadowBlur: 10,  //设置阴影的模糊大小，值越大阴影边缘越模糊
    23. 		shadowOffsetX: 0,  //设置阴影的水平偏移量，正值表示向右偏移，负值表示向左偏移。
    24. 		shadowColor: 'rgba(0, 0, 0, 0.5)' //设置阴影的颜色，可以是常见的颜色名或者 RGB 格式的颜色代码。
    25. 	}
    26. },

  • 相关阅读:
    ESP32网络开发实例-自定义主机名称
    详解本轮 GameFi 发展路径及未来趋势
    从理论到实践：如何用 TDengine 打造完美数据模型​
    第二章 进程与线程 十二、进程同步与进程互斥
    【软件测试】linux命令-引用符号（反斜杠\、单引号‘‘、双引号““）
    Python异常
    捷报又至！牛辅材斩获“2022年度最佳影响力品牌”大奖！
    钉钉企业应用网关接入(保姆级教程)
    使用Xshell连接Ubuntu
    java基于SpringBoot的病房信息管理系统
  • 原文地址：https://blog.csdn.net/qq3892997/article/details/133768622