一愚臀、餅圖
1、直觀顯示
配置項：
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>矾利 : {c} (zp17ajg%)'
},
series: [
{
name: '設(shè)備狀態(tài)',
type: 'pie',
// 扇形的半徑
radius: '70%',
// 扇形位置
center: ['50%', '55%'],
data: [
{value: 222, name: '在線'},
{value: 50, name: '離線'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
// 修改標(biāo)簽的位置
position: 'inner', // 默認(rèn)使用折線連接扇形
// 修改標(biāo)簽的文字
formatter: '姑裂 : {c}'
}
}
}
],
// 扇形顏色
color: ['#03999F', '#C1883A']
}
效果：
image.png
2、環(huán)形圖
配置項：
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>男旗: {c} (0koank2%)"
},
legend: {
// 圖例布局方向
orient: 'horizontal',
x: 'center',
y: '80',
data:['已處理','未處理'],
// 修改圖例文字顏色
textStyle: {
color:'#000'
}
},
series: [
{
name:'故障數(shù)目',
type:'pie',
radius: ['55%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:2290, name:'已處理'},
{value:1570, name:'未處理'}
]
}
],
color: ['#00FFF6', '#C1883A']
}
效果：
image.png
二舶斧、柱狀圖
1、普通
配置項：
option = {
// 直角坐標(biāo)系內(nèi)繪圖網(wǎng)格
grid: {
// 左上角坐標(biāo)
x: 40,
y: 20,
// 右下角坐標(biāo)
x2: 20,
y2: 20
},
xAxis: {
type: 'category',
data: ['蘇州', '衢州', '杭州', '寧波', '臺州', '濱州', '菏澤', '濟(jì)南', '萊蕪', '滕州', '德州', '淄博', '青島', '煙臺'],
// 坐標(biāo)軸刻度與標(biāo)簽對齊
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value',
// 修改軸上的字體顏色
axisLabel: {
color: '#4C4D4D'
}
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130, 270, 230, 530, 50, 10, 330, 430],
type: 'bar'
}],
// 柱狀圖顏色
color: ['#55B3A6']
}
效果：
image.png
2察皇、橫向柱狀圖
配置項：
上方柱狀圖的xAxis和yAxis配置替換即可
效果：
image.png
三茴厉、折線圖
1、漸變折線圖
配置項：
option = {
tooltip: {
trigger: 'axis'
},
grid: {
// 左上角坐標(biāo)
x: 60,
y: 50,
// 右下角坐標(biāo)
x2: 20,
y2: 30
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
// 坐標(biāo)軸兩邊留白策略
// boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
// 坐標(biāo)軸刻度與標(biāo)簽對齊
axisTick: {
alignWithLabel: true
},
axisLabel: {
color: '#fff'
}
},
yAxis: {
type: 'value',
axisLabel: {
color: '#fff'
}
},
series: [
{
name: '郵件營銷',
type: 'line',
areaStyle: {normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
// 漸變
[
{offset: 0, color: 'red'},
{offset: 1, color: '#ddd'}
]
)
}},
data: [120, 132, 101, 134, 90, 230, 210]
}
]
}
效果：
image.png
