一、饼图
1、直观显示
配置项：
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
series: [
{
name: '设备状态',
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: {
// 修改标签的位置
position: 'inner', // 默认使用折线连接扇形
// 修改标签的文字
formatter: '{b} : {c}'
}
}
}
],
// 扇形颜色
color: ['#03999F', '#C1883A']
}
效果：
image.png
2、环形图
配置项：
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
// 图例布局方向
orient: 'horizontal',
x: 'center',
y: '80',
data:['已处理','未处理'],
// 修改图例文字颜色
textStyle: {
color:'#000'
}
},
series: [
{
name:'故障数目',
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 = {
// 直角坐标系内绘图网格
grid: {
// 左上角坐标
x: 40,
y: 20,
// 右下角坐标
x2: 20,
y2: 20
},
xAxis: {
type: 'category',
data: ['苏州', '衢州', '杭州', '宁波', '台州', '滨州', '菏泽', '济南', '莱芜', '滕州', '德州', '淄博', '青岛', '烟台'],
// 坐标轴刻度与标签对齐
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: {
// 左上角坐标
x: 60,
y: 50,
// 右下角坐标
x2: 20,
y2: 30
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
// 坐标轴两边留白策略
// boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
// 坐标轴刻度与标签对齐
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
