1.折線
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: { //圖形邊距佔比
left: '0%',
right: '10%',
top: '10%',
bottom: '5%'
},
xAxis: [{
data: ['', '', '', '', '', ''],
splitLine: { //縱軸線
show: false
},
axisLine: { //數軸:橫着的
show: false
},
axisTick: { //數軸:橫着的:刻度線
show: false,
lineStyle: {
color: '#000'
}
},
axisLabel: {
color: '#ffffff1f' // 刻度線標籤顏色
}
}],
yAxis: [{
splitLine: { //水平線
show: false
},
axisLine: { //數軸:豎着的
show: false
},
axisTick: { //數軸:豎着的:刻度線
show: false,
lineStyle: {
color: '#000'
}
},
axisLabel: {
color: '#ffffff1f' // 刻度線標籤顏色:#ffffff1f是透明噠顏色
}
}],
series: [{
name: '最高水量', //標籤名字:和tooltip一起使用
type: 'line', //折線類型
smooth: true, //是否光滑
symbol: "none", //去掉折線點
stack: 99, //數據堆疊,同個類目軸上系列配置相同的stack值後,後一個系列的值會在前一個系列的值上相加
itemStyle: {
normal: {
// 顏色漸變函數 前四個參數分別表示四個位置依次爲左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#64CAFA' // 0% 處的顏色
},
{
offset: 0.5,
color: '#64CAFA' // 100% 處的顏色
},
{
offset: 1,
color: '#0078D7' // 100% 處的顏色
}
]), // 背景漸變色
lineStyle: { //折線本身樣式
width: 0.5,
type: 'solid',
color: '#0078D7'
}
}
}, // 線條樣式
symbolSize: 2, // 折線點的大小
areaStyle: { //折線內部顏色
},
data: [80, 60, 50, 100, 110, 40]
}]
}
效果:
2.餅狀圖
option = {
legend: {
// 左邊的介紹標籤
orient: 'vertical', // 標籤是豎着的
x: 'left', // 標籤是靠向左方的
y: '80', // 標籤離上邊框的間距
padding: 10,
itemGap: 20, //標籤的內間距
textStyle: {
color: '#000'
} //標籤的字體顏色
},
title: {
//標題的屬性
text: '根據壓力分類',
left: 'center',
top: 20,
textStyle: {
color: '#000',
fontSize: 16
}
},
tooltip: {
//鼠標移動到餅狀圖顯示的標籤屬性
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
series: [{
name: '訪問來源',
type: 'pie', //餅狀圖
radius: '60%', //佔整體頁面的百分比
center: ['50%', '65%'], //在整體頁面的位置
color: ['#d9efff', '#43cadd', '#3893e5', '#d9e3ff'], // 餅的顏色
data: [{
value: 56,
name: '負壓風機'
},
{
value: 78,
name: '高壓風機'
},
{
value: 42,
name: '低壓風機'
},
{
value: 70,
name: '中壓風機'
}
].sort(function(a, b) {
return a.value - b.value
}), //該函數是餅的順序
roseType: 'radius', //是否按比例顯示餅
label: {
//標籤的屬性
normal: {
formatter: ['{b|{b}}'].join('\n'),
rich: {
b: {
color: '#000',
fontSize: 15,
height: 40
},
c: {
color: '#000',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 5
}
}
}
},
itemStyle: {
//餅之間是否又間距
borderWidth: '20',
normal: {
borderWidth: '10',
borderColor: '#ffffff'
}
}
}]
}
效果:
3.錶盤
tooltip: {
trigger: 'item',
formatter: '{b}: {c} '
},
backgroundColor: '#ffffff1f',
graphic: [//下方j加的文字
{
type: 'group',
left: 'center',
bottom: 15,
children: [
{
type: 'text',
z: 100,
left: 'center',
top: 'middle',
style: {
fill: '#66CDAA',
color: '#66CDAA',
text: ['◉甲烷濃度正常'].join('\n'),
font: '14px Microsoft YaHei;bold'
}
}
]
}
],
title: {
text: '甲烷濃度(單位:%Lel)',
left: 'center',
top: '20%',
textStyle: {
color: '#000',
fontSize: 16
}
},
series: [
{
center: ['50%', '70%'],
startAngle: 180,
endAngle: 0,
type: 'gauge',
radius: '80%',
pointer: {
// 儀表盤指針
show: true
},
axisLine: {
// 儀表盤軸線
lineStyle: {
width: 5,
color: [
[
1,
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#FFBBFF'
},
{
offset: 0.66,
color: '#FF33D6'
},
{
offset: 1,
color: '#FF5C33'
}
])
]
]
},
show: true
},
splitLine: {
// 分割線
show: false,
width: 5
},
axisTick: {
// 刻度
show: false,
length: 8
},
axisLabel: {
// 刻度標籤
show: false,
distance: 0
},
title: {
// 標題
},
detail: {
show: false
}
},
{
center: ['50%', '70%'],
startAngle: 180,
endAngle: 0,
type: 'gauge',
radius: '78%',
min: 0,
max: 100,
splitNumber: 10,
pointer: {
// 儀表盤指針
show: true,
length: '40%'
},
axisLine: {
// 儀表盤軸線
lineStyle: {
width: 27,
color: [[1, '#fff']]
},
show: true
},
splitLine: {
// 分割線
show: false,
width: 5
},
axisTick: {
// 刻度
show: false,
length: 8
},
axisLabel: {
// 刻度標籤
show: false,
distance: -20
},
title: {
// 標題
show: false
},
detail: {
show: false
}
},
{
center: ['50%', '70%'],
startAngle: 180,
endAngle: 0,
type: 'gauge',
radius: '77%',
min: 0,
max: 100,
splitNumber: 10,
data: [
{
value: 8,
name: '甲烷'
}
],
pointer: {
// 儀表盤指針
show: true,
length: '89%',
width: 8
},
itemStyle: {
color: '#FF5C33'
},
axisLine: {
// 儀表盤軸線
lineStyle: {
width: 4,
color: [[1, '#F0F0F0']]
// opacity:0
},
show: true
},
splitLine: {
// 分割線
show: false,
width: 5
},
axisTick: {
// 刻度
show: true,
length: 1,
color: '#444444'
},
axisLabel: {
// 刻度標籤
show: true,
distance: -25,
color: '#444444',
fontSize: 10
},
title: {
// 標題
show: false
},
detail: {
show: false
}
}
]