1. 基本的饼图配置:
var option = {
series: [{
type: 'pie',
radius: '50%', // 饼图半径,可以是百分比或具体数值
data: [
{value: 335, name: 'Category A'},
{value: 310, name: 'Category B'},
{value: 234, name: 'Category C'},
{value: 135, name: 'Category D'},
// 更多数据...
]
}]
};
在上面的例子中,通过 series 中的 type: 'pie' 配置创建了一个简单的饼图,其中 data 数组包含了每个扇形的数值和名称。
2. 设置标签和提示框:
var option = {
series: [{
type: 'pie',
radius: '50%',
label: {
show: true,
formatter: '{b}: {c} ({d}%)' // 标签显示的内容,{b} 表示名称,{c} 表示数值,{d} 表示百分比
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)' // 提示框显示的内容,{a} 表示系列名称,{b} 表示名称,{c} 表示数值,{d} 表示百分比
},
data: [
{value: 335, name: 'Category A'},
{value: 310, name: 'Category B'},
{value: 234, name: 'Category C'},
{value: 135, name: 'Category D'},
// 更多数据...
]
}]
};
通过配置 label 和 tooltip 可以分别设置饼图中扇形的标签和鼠标悬浮时的提示框。
3. 设置图例:
var option = {
legend: {
orient: 'vertical',
left: 10,
data: ['Category A', 'Category B', 'Category C', 'Category D']
},
series: [{
type: 'pie',
radius: '50%',
data: [
{value: 335, name: 'Category A'},
{value: 310, name: 'Category B'},
{value: 234, name: 'Category C'},
{value: 135, name: 'Category D'},
// 更多数据...
]
}]
};
可以通过配置 legend 设置饼图的图例,以便用户了解每个扇形所代表的具体类别。
这只是饼图的一些基本配置和操作示例,具体的使用方式可能会根据你的需求和图表类型而有所不同。你可以根据官方文档和示例进一步了解饼图的配置和使用:[ECharts 饼图](https://echarts.apache.org/zh/option.html#series-pie)。
转载请注明出处:http://www.zyzy.cn/article/detail/5084/ECharts