饼状图引导线加长

已于 2023-08-14 09:23:55 修改
阅读量394 收藏
点赞数
文章标签： javascript 前端 开发语言
于 2023-08-11 13:43:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014645827/article/details/132229345
版权

 series: datas.map(function (data, idx) {
    var top = idx * 33.3;
    return {
      type: 'pie',
      radius: [20, 60],
      top: top + '%',
      height: '33.33%',
      left: 'center',
      width: 400,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      label: {
        alignTo: 'edge',
        formatter: '{name|{b}}\n{time|{c} 小时}',
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 15,
        rich: {
          time: {
            fontSize: 10,
            color: '#999'
          }
        }
      },
      labelLine: {
        length: 15,
        length2: 0,
        maxSurfaceAngle: 80
      },
      labelLayout: function (params) {
        const isLeft = params.labelRect.x < myChart.getWidth() / 2;
        const points = params.labelLinePoints;
        // Update the end point.
        points[2][0] = isLeft
          ? params.labelRect.x
          : params.labelRect.x + params.labelRect.width;
        return {
          labelLinePoints: points
        };
      },
      data: data
    };

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .con{
                
                width: 305px;
                height: 160px;
                /* background-color: aquamarine; */
            }
            
        </style>
    </head>
    <body>
        
        <div class="con">
            
            <div id="main" style="width:100%;height: 100%;"></div>
        </div>
            
             
             <script src="js/echarts.min.js"></script>
        <script>
             
        
            
            
            
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;
            
            var datas = [
              
              [
                { name: '圣彼得堡来客', value: 5.6 },
                { name: '陀思妥耶夫斯基全集', value: 1 },
                { name: '史记精注全译（全6册）', value: 0.8 },
                { name: '加德纳艺术通史', value: 0.5 },
                { name: '表象与本质', value: 0.5 },
                { name: '其它', value: 3.8 }
              ]
             
            ];
            option = {
              title: {
                text: '',
              
               
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
               
              },
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                    radius: ['30%', '70%'],
                   center: ["50%", "50%"],
                  data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    
                   
                  ],
                   label: {
                          alignTo: 'edge',
                          formatter: '{name|{b}}}\n',
                          minMargin: 5,
                          edgeDistance: 10,
                          lineHeight: 20,
                          rich: {
                            time: {
                              fontSize: 10,
                              color: '#999'
                            }
                          }
                        },
                         labelLine: {
                                length: 15,
                                length2: 0,
                                maxSurfaceAngle: 80
                              },
                              labelLayout: function (params) {
                                      const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                                      const points = params.labelLinePoints;
                                      // Update the end point.
                                      points[2][0] = isLeft
                                        ? params.labelRect.x
                                        : params.labelRect.x + params.labelRect.width;
                                      return {
                                        labelLinePoints: points
                                      };
                                    },
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            option && myChart.setOption(option);
        </script>
    </body>
</html>

小小1992
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flash加长器
12-01
【标题】：“Flash加长器”是一款针对Flash动画的专业工具，它的主要功能是延长Flash（SWF）文件的播放时间，使得原本较短的动画能够适应更长的时间需求。这对于网页设计者和动画制作者来说，无疑是一个非常实用且...
echarts饼状图线的长度设置
liu_liYao的博客
08-11 1万+
设置是否显示线 lable{ show: true, // false不展示 position: "outside", // 设置位置在饼状图的外面 inside为内部 } 设置线的样式 labelLine: { normal: { length: 100, //第一条线 length: 30, //第二条线 lineStyle: { width: 1, // 线条的宽度 ...
Echarts饼状图视觉引导线设置
热门推荐
iUserWang
06-14 4万+
如何设置饼状图引导线位置 我们在使用Echarts绘制饼状图时，经常需要确定引导线位置，官网给出的示例并未明确哪些属性决定了引导方式及位置，例如： 有如下外部引导线方式： 有内部引导线方式 如何设置这两种引导方式呢？ 首先要明确，管控内部显示还是外部显示的属性是： series下的label和labelLine。 方式一：外部显示： series: [ { type:‘pie’, label: ...
echart设置pie饼图飞线长度
最新发布
ivan5277的博客
06-18 542
的数值来改变飞线的长度。记得将上述代码片段融入到你的整体 ECharts 配置中，并根据实际情况调整其他配置项。在 ECharts 中，设置饼图（pie）中指示线（通常称为飞线）的长度可以通过配置。
ECharts 饼图将标签设置在视觉引导线上方
旭东怪的博客
10-09 1万+
1 使用详解 （1）series.labelLine.length 说明：视觉引导线第一段的长度。 （2）series.labelLine.length2 说明：视觉引导线第二段的长度。 （3）series.label.formatter 说明：标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。 （4）series.label.padding 说明：文字块的内边距。 2 原始效果图 3 实现代码
echarts 饼图 引导线和圆点 ts vue3.0
weixin_55721538的博客
11-18 1608
echarts 指导线 和圆点 vue3.0 ts
vue中使用echarts（饼图显示引导线和文字以及图例+柱形图显示格式化的图例）超详细
乐一的博客
11-21 3423
【代码】vue中使用echarts（饼图显示引导线和文字以及图例+柱形图显示格式化的图例）超详细。
echarts饼状图引导线加圆点
qq_40692287的博客
07-19 5529
echart引导线增加原点
电子-加长线三相异步电动机
09-15
加长线三相异步电动机是电力驱动领域中常见的一种电机类型，广泛应用于工业、农业、建筑等各个行业。这种电动机的核心特点是其电源线较长，能够在较远距离下为设备提供动力，解决了传统电动机供电范围受限的问题。...
省空间加长行程机构.rar
05-12
标题中的“省空间加长行程机构.rar”表明这是一个关于机械设备设计的压缩文件，重点在于如何在有限的空间内实现更长的运动行程。这种设计通常应用于自动化设备、机器人、传动系统等，旨在提高设备的功能性和效率。 ...
战图全自动识别图框大小（含加长图框）批量打印PDFV2.2.rar
08-13
这款软件的核心功能在于其强大的自动化能力，能够精准地识别图纸中的图框大小，包括加长图框，从而实现批量打印PDF文档，极大地提高了工作效率。 在描述中提到的“战图批量打印V2.2.12版”，这表明该软件已经经过了...
【腾讯桌球】加长双线脚本.lua
10-07
【腾讯桌球】加长双线脚本.lua
echarts 配置方法使用记录
qq_41206597的博客
07-29 407
tooltip中使用formatter进行提示框自定义设置（模板字符串进行dom元素的编写）formatter}
echarts 饼状图 调整位置
yinyueyu007的博客
09-01 2万+
通过调整 center 按照百分比调整位置 series: [{ name: '圆环图系列名称', // 系列名称 type: 'pie', // 系列类型 left: '0%', center: ['24%', '50%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ] radius: ['30%', '40%']
3D环状饼图加引导线，使用echarts实现
一些简单的分享
01-17 2118
这个代码使用vue2写的，其中还有一个nowSize()函数是我写来做适配的，3280指的是屏宽或者是分辨率的宽；可以不调用这个函数，直接改为数值。在mounted中还加入了屏幕大小监听，屏幕大小变化时重新渲染图表使其大小跟随屏幕大小变化。其中，echarts需要时5.4.x版本以上的，不然样式显示会有影响。实现原理主要是在一个3D图上叠加一个饼图，饼图只保留引导线。需要先下载echarts、echarts-gl依赖包。
查询数据的上一条和下一条
dawnStart的博客
11-19 861
//查询当前数据的下一条 select * from 表 where id > 当前数据的id order by id asc limit 1; //查询当前数据的上一条 select * from 表 where id < 当前数据的id order by id asc limit 1 //查询当前数据的下一条 select * from bp_customer where id = (select min(id) from bp_customer where id > 当前数
echarts 饼图的label放置于labelLine引导线上方
ngd-b的博客
08-05 5493
以上两种配置完基本可以看到文本与引导线在同一水平位置了。想要实现将文本放置在引导线上方，效果长这样。y 方向上的偏移量，调整到合适位置。配置标签布局，设置垂直对齐方式。一般的饼图基础配置后长这样。
EXCEL进阶：图表中添加引导线
m0_56356561的博客
04-29 8264
在业务场景中，每当查看月度完成情况是否达到月度目标值的时候，以及每个月的完成趋势情况，就会用到折线图，可目标如果是恒定不变的，在excel图表中就会显示一条横线，如果我想查看目标值是多少，就会添加数据标签，可是数据标签都是一样的，每个标签都密密麻麻的，让人看不清，本文就解决了在excel图表的恒定折线行，只显示一次数据标签，且添加引导线，满足当图表展示界面足够小，能够清楚的看到数据。 一、操作步骤展示 数据源参考： 项目 1月 2月 ...
echarts饼图选中时显示引导线
yzp0112的博客
05-05 2001
选中时显示引导线 详细信息 ... tooltip: { trigger: 'item', // formatter: '{a} <br/>{b} : {c} ({d}%)' formatter: '{a} <br/>数量统计 : {c}' }, series: [{ name: '会员', type: 'pie', radius: '60%',//饼图的半径 center: ['50%', '60%'],//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐
latex加长版的竖线
09-03
LaTeX中用于表示加长版的竖线的符号是"\|"。你可以在文档中使用该符号来实增加竖线的效果。LaTeX中，通过使用"|"可以插入普通竖线，而"\"用于转义字符，因此需要使用"\|"来表示加长版的竖线。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [二、LaTeX学习笔记——基本结构、设置表格、文字变形及符号、插入图片](https://blog.csdn.net/qixuanmiao_/article/details/105451533)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值