zqy233的前端学习笔记饼图
所有实例代码均可在ehcarts的background环境中直接运行
颜色设置
json
option = {
color: ["#6B9CF5", "#8FD59F", "#CA8EE3"],
series: [
{
type: "pie",
radius: ["40%", "60%"],
data: [
{ value: 15.79, name: "故障" },
{ value: 10.53, name: "正常" },
{ value: 47.37, name: "其他" }
]
}
]
}
option = {
color: ["#6B9CF5", "#8FD59F", "#CA8EE3"],
series: [
{
type: "pie",
radius: ["40%", "60%"],
data: [
{ value: 15.79, name: "故障" },
{ value: 10.53, name: "正常" },
{ value: 47.37, name: "其他" }
]
}
]
}
饼图的左右位置
js
series: [
{
...
center: ['30%', '50%'],
}
]
series: [
{
...
center: ['30%', '50%'],
}
]
标题居中
js
left:"center"
left:"center"
悬浮文本
json
option = {
tooltip: {
trigger: "item"
},
series: [
{
type: "pie",
radius: ["40%", "60%"],
data: [
{ value: 15.79, name: "故障" },
{ value: 10.53, name: "正常" },
{ value: 47.37, name: "其他" }
]
}
]
}
option = {
tooltip: {
trigger: "item"
},
series: [
{
type: "pie",
radius: ["40%", "60%"],
data: [
{ value: 15.79, name: "故障" },
{ value: 10.53, name: "正常" },
{ value: 47.37, name: "其他" }
]
}
]
}
玫瑰图
json
option = {
backgroundColor: 'rgb(43, 51, 59)',
series: [
{
name: 'XX线索',
type: 'pie',
radius: [37, 155],
// avoidLabelOverlap: false,
// startAngle: 0,
center: ['50.1%', '34%'],
roseType: 'area',
selectedMode: 'single',
label: {
normal: {
show: true,
formatter: '{c}千万元'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true,
smooth: false,
length: 20,
length2: 10
},
emphasis: {
show: true
}
},
data: [
{
value: 600.58,
name: '义乌市1',
itemStyle: {
normal: {
color: '#f845f1'
}
}
},
{
value: 1100.58,
name: '义乌市2',
itemStyle: {
normal: {
color: '#ad46f3'
}
}
},
{
value: 1200.58,
name: '义乌市3',
itemStyle: {
normal: {
color: '#5045f6'
}
}
},
{
value: 1300.58,
name: '义乌市4',
itemStyle: {
normal: {
color: '#4777f5'
}
}
},
{
value: 1400.58,
name: '义乌市5',
itemStyle: {
normal: {
color: '#44aff0'
}
}
},
{
value: 1500.58,
name: '义乌市6',
itemStyle: {
normal: {
color: '#45dbf7'
}
}
},
{
value: 1500.58,
name: '义乌市7',
itemStyle: {
normal: {
color: '#f6d54a'
}
}
},
{
value: 1600.58,
name: '义乌市8',
itemStyle: {
normal: {
color: '#f69846'
}
}
},
{
value: 1800,
name: '义乌市9',
itemStyle: {
normal: {
color: '#ff4343'
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
}
]
}
]
}
option = {
backgroundColor: 'rgb(43, 51, 59)',
series: [
{
name: 'XX线索',
type: 'pie',
radius: [37, 155],
// avoidLabelOverlap: false,
// startAngle: 0,
center: ['50.1%', '34%'],
roseType: 'area',
selectedMode: 'single',
label: {
normal: {
show: true,
formatter: '{c}千万元'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true,
smooth: false,
length: 20,
length2: 10
},
emphasis: {
show: true
}
},
data: [
{
value: 600.58,
name: '义乌市1',
itemStyle: {
normal: {
color: '#f845f1'
}
}
},
{
value: 1100.58,
name: '义乌市2',
itemStyle: {
normal: {
color: '#ad46f3'
}
}
},
{
value: 1200.58,
name: '义乌市3',
itemStyle: {
normal: {
color: '#5045f6'
}
}
},
{
value: 1300.58,
name: '义乌市4',
itemStyle: {
normal: {
color: '#4777f5'
}
}
},
{
value: 1400.58,
name: '义乌市5',
itemStyle: {
normal: {
color: '#44aff0'
}
}
},
{
value: 1500.58,
name: '义乌市6',
itemStyle: {
normal: {
color: '#45dbf7'
}
}
},
{
value: 1500.58,
name: '义乌市7',
itemStyle: {
normal: {
color: '#f6d54a'
}
}
},
{
value: 1600.58,
name: '义乌市8',
itemStyle: {
normal: {
color: '#f69846'
}
}
},
{
value: 1800,
name: '义乌市9',
itemStyle: {
normal: {
color: '#ff4343'
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
value: 0,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
}
}
]
}
]
}