Echarts pie 饼图 环形图 label位置调整

Echarts pie 饼图 环形图 label位置调整

需求:

如上图所示,H类标签位于环形图底部偏左,我想把它调整到环形图的右下角的位置。

解决:
利用label的padding可以调整位置,效果如下图所示:
在这里插入图片描述

但是padding只能调整左右方向,不能调整上下方向(写了之后不生效)
所以利用label的指引线来调整上下方向的位置,比如我想把H类调高,就可以把length设置得短一点,甚至设置为负数。得到最终效果如下图所示:
在这里插入图片描述

具体代码如下:

{
    name: "H类",
    value: "5500",
    label:{
        fontSize:20,
        color:'#56B1FF',
        padding:[0,-200,0,0], //调整左右位置
    }, 
    labelLine:{
        show:false,
        length:-10, //调整上下位置
    } 
},
  • 8
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts是一个基于JavaScript的开源可视化库,可以用于创建各类型的表,包括双层饼图。双层饼图也被称为环形,它将数据分为两个层级,并以环状的方式展示。 要创建双层饼图,首先需要引入ECharts库,并创建一个容器来承载表。接下来,定义数据和配置项,并将其传递给ECharts实例的setOption方法。以下是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <title>ECharts 双层饼图示例</title> <script src="https://cdn.staticfile.org/echarts/4.9.0/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 初始化ECharts实例 var myChart = echarts.init(document.getElementById('chart')); // 定义数据 var data = [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ]; // 定义配置项 var option = { title: { text: '双层饼图示例', subtext: '数据来源:ECharts官网', x: 'center' }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], label: { show: false }, labelLine: { show: false }, data: data } ] }; // 设置表配置项并渲染 myChart.setOption(option); </script> </body> </html> ``` 上述代码会在页面上显示一个双层饼图,其中数据来源于`data`数组。你可以根据自己的需求修改数据和配置项,以满足自己的要求。希望能帮到你!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值