echarts 南丁格尔玫瑰图属性设置
修改配置后的效果图：
option = {
//title图的标题，副标题，以及位置设置
// title : {
// text: '南丁格尔玫瑰图',
// subtext: '纯属虚构',
// x: 'center'
// },
tooltip: {
trigger: 'item',
//提示框的数据样式显示
formatter: '{a}
{b} : {c} ({d}%)'
},
//图例相关内容的说明
legend: {
//图例的排列默认属性是：水平或垂直,默认是：水平'horizontal'
orient: 'vertical', //垂直
x: 'right',
y: 'center',
//图例数据必须series 中data中的字段name完全一致才会显示出来,series也必须定义
data: ['rose 1',23],
},
/*
* toolbox为工具栏；提供导出图片，数据转化，动态数据等信息
* 保存图片
*/
toolbox: {
show: true, //是否显示工具栏组
feature: {
mark: {show: true},
//显示图像所提供的数据
dataView: {show: true, readOnly: false},
//配置项还原
restore: {show: true},
//保存为图片
saveAsImage: {show: true}
}
},
series: [
{
name: '面积模式',
type: 'pie', //饼图
radius: [10, 100], //修改图表大小
//图表x轴，y轴位置
center: ['40%', '50%'],
roseType: 'area',
itemStyle : {
//普通样式设置 重置一些样式
normal : {
//取消指示提示文字
label : {
show : false
},
//取消指示提示线
labelLine : {
show : false
}
},
//高亮样式设置
emphasis : {
label : {
show : true
},
labelLine : {
show : true
}
},
borderRadius: 8
},
data: [
{value: 40, name: 'rose 1'},
{value: 38, name: 'rose 2'},
{value: 32, name: 'rose 3'},
{value: 30, name: 'rose 4'},
{value: 28, name: 'rose 5'},
{value: 26, name: 'rose 6'},
{value: 22, name: 'rose 7'},
{value: 18, name: 'rose 8'}
]
}
]
};未修改配置效果图：
option = {
tooltip: {
trigger: 'item',
//提示框的数据样式显示
formatter: '{a}
{b} : {c} ({d}%)'
},
//图例相关内容的说明
legend: {
//图例的排列默认属性是：水平或垂直,默认是：水平'horizontal'
orient: 'vertical', //垂直
x: 'right',
y: 'center',
//图例数据必须series 中data中的字段name完全一致才会显示出来
// data: ['rose 1',23],
},
/*
* toolbox为工具栏；提供导出图片，数据转化，动态数据等信息
* 保存图片
*/
toolbox: {
show: true, //是否显示工具栏组
feature: {
mark: {show: true},
//显示图像所提供的数据
dataView: {show: true, readOnly: false},
//配置项还原
restore: {show: true},
//保存为图片
saveAsImage: {show: true}
}
},
series: [
{
name: '面积模式',
type: 'pie', //饼图
radius: [10, 100],
//图表x轴，y轴位置
center: ['40%', '50%'],
roseType: 'area',
data: [
{value: 40, name: 'rose 1'},
{value: 38, name: 'rose 2'},
{value: 32, name: 'rose 3'},
{value: 30, name: 'rose 4'},
{value: 28, name: 'rose 5'},
{value: 26, name: 'rose 6'},
{value: 22, name: 'rose 7'},
{value: 18, name: 'rose 8'}
]
}
]
};