echarts饼图option的title加图表
时间: 2024-10-18 08:20:00 浏览: 14
echarts饼图扇区添加点击事件的实例
ECharts是一个强大的JavaScript数据可视化库,它支持创建各种图表,包括饼图。要在饼图上添加标题,可以在配置选项`series`里的单个饼图系列(`pie`)中设置`title`属性。以下是一个基本的例子:
```javascript
var option = {
title: { // 图表标题
text: '我的饼图', // 标题文字
subtext: '这是简短描述', // 下方副标题
x: 'center', // 文字位置,默认居中
y: 'top', // 对齐方式,默认顶部对齐
textStyle: { // 文字样式
color: '#000', // 颜色
fontSize: 16 // 字体大小
}
},
tooltip: {}, // 提示信息
series: [{
name: '数据集', // 系列名称
type: 'pie', // 类型为饼图
radius: ['45%', '75%'], // 设置饼图内外圆半径
data: [
{ value: 335, name: '部分A' }, // 数据项
{ value: 310, name: '部分B' },
{ value: 234, name: '部分C' },
{ value: 135, name: '部分D' },
{ value: 1548, name: '部分E' }
],
label: { // 数据标签
normal: {
show: true,
formatter: '{b} : {c}%'
}
},
itemStyle: { // 指定每个扇区的颜色等样式
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
// 使用ECharts实例化图表并渲染
echarts.init(document.getElementById('main')).setOption(option);
```
阅读全文