【echarts】 饼图
基本配置//1.初始化图表let myCharts = echarts.init(document.getElementById('charts'))//2.准备数据//饼图无需配置 xaxis 和 yaxis数据是由 value name构成的数组let data = [{ value: 11231, name: "淘宝", },{ value: 22673, name:
·
基本配置
//1.初始化图表
let myCharts = echarts.init(document.getElementById('charts'))
//2.准备数据
//饼图无需配置 xaxis 和 yaxis 数据是由 value name构成的数组
let data = [
{ value: 11231, name: "淘宝", },
{ value: 22673, name: "京东" },
{ value: 6123, name: "唯品会" },
{ value: 8989, name: "1号店" },
{ value: 6700, name: "聚美优品" }
]
//3.配置
let option = {
series: [
{
type: 'pie',
data: data
}
]
}
//4.渲染图表
myCharts.setOption(option)
饼图的常见效果
- 显示数值
label.show : 显示文字
label.formatter : 格式化文字
{
type: 'pie',
data: data,
label: {
show: true,
formatter: function (arg) {
return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'
}
}
}
- 南丁格尔图
南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大
{
type: 'pie',
data: data,
roseType: 'radius', //指定为南格尔玫瑰图
label: {
show: true,
formatter: function (arg) {
return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'
}
}
}
- 选中效果
selectedMode: ‘multiple’
选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选 ‘single’ , ‘multiple’ ,分别表示单选还是多选
selectedOffset: 30
选中扇区的偏移距离
{
type: 'pie',
data: data,
selectedMode: 'multiple', //指定单选还是多选
selectedOffset: 30 //偏移距离
}
- 圆环
radius
{
type: 'pie',
data: data,
radius: ['50%', '70%']
}
更多推荐
已为社区贡献2条内容
所有评论(0)