echart 饼图 pie图 标题与副标题居中

最终效果图

在这里插入图片描述
{ x:center, y: center } 这两句是为了标题在饼图圆内
在这里插入图片描述

textVerticalAlign: ‘auto’ 可以让标题+副标题保持居中

const pieChartoptions = {
  tooltip: {
    trigger: 'item'
  },
  series: [],
  title: {
    text: 0,
    subtext: '总数',
    textVerticalAlign: 'auto', // 主要是加了这行
    x: 'center',
    y: 'center'  	
  }	
}
### 如何在 ECharts 中设置标题 要在 ECharts 中为添加或设置标题,可以通过配置项中的 `title` 属性来实现。以下是详细的说明以及示例代码。 #### 设置标题的基本方法 通过 `title` 属性可以定义表的主标题副标题。该属性支持多种样式选项,例如文字颜色、字体大小、位置等[^1]。下面是一个基本的例子: ```javascript // 初始化 ECharts 实例并绑定到 DOM 容器上 var myChart = echarts.init(document.getElementById('main')); // 配置项 var option = { title: { // 添加标题配置 text: '主要标题', // 主标题内容 subtext: '次要标题', // 副标题内容 left: 'center', // 标题水平居中 textStyle: { // 标题样式 color: '#333', fontSize: 20 }, subtextStyle: { // 副标题样式 color: '#666', fontSize: 14 } }, series: [{ name: '访问来源', type: 'pie', radius: ['50%', '70%'], // 环形内外半径比例 data: [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' } ], label: { formatter: '{b}: {c} ({d}%)' } }] }; // 使用刚指定的配置项和数据显示表。 myChart.setOption(option); ``` 上述代码展示了如何创建一个带有标题的环形,并设置了主标题副标题的位置样式。 #### 自定义例显示内容 除了设置标题外,还可以进一步优化例的内容展示方式。例如,在例中显示自定义的文字描述而非仅限于名称。这可以通过 `formatter` 函数完成[^3]。以下是一段扩展代码片段: ```javascript legend: { orient: 'vertical', left: 'left', formatter: function (name) { let target; const data = [ { name: '直接访问', value: 335 }, { name: '邮件营销', value: 310 }, { name: '联盟广告', value: 234 }, { name: '视频广告', value: 135 }, { name: '搜索引擎', value: 1548 } ]; for (let i = 0; i < data.length; i++) { if (data[i].name === name) { target = data[i].value; } } return `${name}: ${target}`; } } ``` 此部分代码实现了动态计算每个例对应的数值,并将其作为附加信息一并显示出来。 --- ### 总结 以上介绍了两种核心功能:一是利用 `title` 属性为主标题副标题提供丰富的定制化能力;二是借助 `formatter` 方法增强例的表现力。两者结合能够显著提升可视化效果的质量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值