//扇形图
option = {
//定义图表颜色
color:['#2756ca','#ff7b4a','#628cef','#ecb11e','#e4007f','#009944','#81b73f','#e60012','#8B8B00','#97FFFF'],
tooltip: {
// 提示框触发类型 可选 item(散点,饼图) | axis(柱状,折线) | none
trigger: 'item',
// 提示框内容
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
title : {
// 是否显示
show: true,
// 主标题文本,'\n'指定换行
text: 'iphone销量',
// 副标题文本,'\n'指定换行
subtext: '纯属虚构',
// 水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
x: 'center',
// 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
y: 'top',
// 水平对齐方式,默认根据x设置自动调整,可选为: left' | 'right' | 'center
textAlign: 'center',
},
legend: {
//图例的类型,默认为plain,可选plain(普通) | scroll(可滚动翻页图例)
type:'plain',
// 图例的布局朝向,默认为horizontal,可选为 horizontal | vertical
orient: 'vertical',
// 图例每项间隔
itemGap:12,
//水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px))
x: 'right',
//垂直安放位置,默认为顶端,可选为:'top' | 'center' | 'bottom' | {number}(y坐标,单位px))
y:'top',
// 图例数据
data:name,
//图例文字的样式
textStyle:{
// 颜色
color:'#e4e4e4',
// 字号
fontSize:31,
},
// 图例组件高度
height:500,
},
grid: {
// 是否显示坐标系网格,可选为 'false' | 'true'
show:'false',
// grid组件离容器顶部距离即图表离容器顶部距离
top: '0%',
// grid组件离容器底部距离即图表离容器底部距离
bottom: '0%',
// grid组件离容器左侧距离即图表离容器左侧距离
left: '30%',
// grid组件离容器右侧距离即图表离容器右侧距离
right: '0%',
},
series: [
{
// 系列名称,用于tooltip显示
name:'船级社',
// 图表类型,pie用于饼图(环形图)
type:'pie',
//饼图半径的调节,第一个是内半径,第二个是外半径
radius: ['30%', '60%'],
//饼图中心的坐标(饼图位置的调节),第一个是x坐标,第二个是y坐标
center:['40%','50%'],
//图形样式
itemStyle: {
normal: {
//label(图形文本标签)设置
label: {
//是否显示
show:true,
//文本标签内容设置,支持 字符串 | 可回调函数
formatter:function(val){
//val是回调函数返回值,是个json数据
return val.percent + '%'
},
// 文本标签样式设置
textStyle: {
// 字号
fontSize: 36,
}
}
}
},
// 图形数据
data:[]
},
{
// 系列名称,用于tooltip显示
name:'船级社',
//图形类型,pie用于饼图
type:'pie',
// 饼图半径的调节,第一个是内半径,第二个是外半径,这里内半径默认为0
radius : '55%',
//饼图中心的调节
center:['40%','50%'],
//图形样式
itemStyle: {
normal: {
//label设置
label: {
//是否显示
show:true,
//label显示内容设置
formatter:function(val){
//val是回调函数返回值,是个json数据
return val.percent + '%'
},
// label文本样式设置
textStyle: {
// 字号
fontSize: 36,
}
}
}
},
// 图形数据
data:[]
}
]
};
echarts 整理2
猜你喜欢
转载自blog.csdn.net/qq_36061522/article/details/81234188
今日推荐
周排行