/**
* 柱状图
* */
let barOption = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
extraCssText: 'padding:5px 15px;background-color:rgba(5,67,203,0.4)'
},
grid: {
top: 60,
left: 70,
right: 20,
bottom: 40,
containLabel: true
},
xAxis: {
type: 'value',
data: [],
max: 600,
axisLine: {
lineStyle: {
color: '#4E6392'
}
},
axisLabel: {
color: '#BCC9E1',
margin: 15,
fontSize: 12
},
axisTick: {},
splitLine: {
lineStyle: {
color: 'rgba(46,53,96,0.4)'
}
}
},
yAxis: {
type: 'category',
name: '次',
nameTextStyle: {
color: '#BCC9E1',
padding: [-10, -20]
},
data: ['SOS', '监控', '会议', '普通通话', '音乐广播', '文本广播', '定时广播', '实时广播'],
axisTick: {},
axisLabel: {
color: '#BCC9E1',
margin: 12,
fontSize: 12,
rotate: 30
},
axisLine: {
lineStyle: {
color: '#4E6392'
}
},
splitLine: {
lineStyle: {
color: '#4E6392'
}
},
splitArea: {
show: false
}
},
series: [
{
type: 'bar',
data: [300, 250, 400, 420, 480, 500, 520, 580],
barWidth: 12,
itemStyle: {
normal: {
barBorderRadius: [0, 15, 15, 0],
color: (param) => {
// 根据逻辑return
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#147BE5'
}, {
offset: 1,
color: '#63A6EB'
}])
},
label: {
show: true,
position: 'inside',
color: '#BCC9E1'
}
}
},
showBackground: true,
backgroundStyle: {
color: 'transparent'
}
}
]
}
/**
* 折线图
* */
let lineOption = {
backgroundColor: 'transparent',
title: {
text: '',
textStyle: {
color: '#9FBAE6',
fontSize: 14
}
},
tooltip: {
show: true,
trigger: 'axis',
formatter: function(param) {
let item = param[0]
return item.axisValue + '<br>' + '( ' + item.data + ' )'
},
extraCssText: 'padding:5px 15px;background-color:rgba(5,67,203,0.4)'
},
axisPointer: {
lineStyle: {
type: 'dashed',
color: ''
}
},
grid: {
top: '60',
left: '60',
right: '55',
bottom: '45'
},
xAxis: {
boundaryGap: false,
nameTextStyle: {
padding: [0, 0, 20, -60]
},
axisLine: {
lineStyle: {
color: '#4C5B7E'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#BCC9E1',
margin: 15,
fontSize: 11,
rotate: 30
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#3D446F'
}
},
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00']
},
yAxis: [
{
type: 'value',
name: '秒',
nameTextStyle: {
color: '#188AFF',
padding: [0, -30, -22, 0]
},
axisLabel: {
color: '#188AFF',
margin: 18,
fontSize: 12
},
axisTick: {},
axisLine: {
lineStyle: {
color: '#4C5B7E'
}
},
splitLine: {
show: false
}
},
{
type: 'value',
name: '次',
nameTextStyle: {
color: '#FFBB14',
padding: [0, 30, -22, 0]
},
axisLabel: {
color: '#FFBB14',
margin: 18,
fontSize: 12
},
axisTick: {},
axisLine: {
lineStyle: {
color: '#4C5B7E'
}
},
splitLine: {
show: false
}
}
],
series: [
{
data: [2, 3, 12, 5, 6, 14, 26, 30, 27, 21, 29, 32, 23, 25],
type: 'line',
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: '#188AFF'
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(24,138,255,0.1)'
}, {
offset: 1,
color: 'rgba(24,138,255,0.9)'
}])
}
},
emphasis: {
itemStyle: {
opacity: 1,
color: '#3594F5',
borderColor: '#3594F5',
shadowColor: 'rgba(53,148,245, 0.6)',
shadowBlur: 20
}
}
},
{
type: 'line',
yAxisIndex: 1,
data: [24, 18, 16, 15, 9, 20, 21, 3, 9, 10, 13, 15, 18, 14],
smooth: true,
showSymbol: false,
lineStyle: {
width: 2,
color: '#FFBB14'
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(255,187,20,0.1)'
}, {
offset: 1,
color: 'rgba(255,187,20,0.6)'
}])
}
},
emphasis: {
itemStyle: {
opacity: 1,
color: '#3594F5',
borderColor: '#3594F5',
shadowColor: 'rgba(53,148,245, 0.6)',
shadowBlur: 20
}
}
}
]
}
/**
* 饼图
* */
let pieOption = {
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
type: 'pie',
radius: '55%',
center: ['center', '52%'],
data: [
{ value: 335, name: '正常设备' },
{ value: 250, name: '故障设备' }
].sort(function(a, b) {
return a.value - b.value
}),
roseType: 'radius',
label: {
color: '#BCC9E1',
fontSize: 13,
formatter: '{b}\n{c} ({d}%)'
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2
},
itemStyle: {
shadowBlur: 30,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function(idx) {
return Math.random() * 200
}
}
]
}
/**
* 环形图
* */
let annularOption = {
backgroundColor: 'transparent',
// color: ['#3594F5', '#2962F4', '#84C1FF', '#14224E'],
tooltip: {
trigger: 'item',
formatter: '{b}:{d}%',
extraCssText: 'padding:5px 15px;background-color:rgba(5,67,203,0.4)'
},
grid: {
top: '90',
left: '90',
right: '30',
bottom: '10'
},
series: [
{
type: 'pie',
center: ['center', '52%'], // 饼图在容器中的位置
radius: ['35%', '60%'],
data: [
{ value: 250, name: '歌手分类' },
{ value: 300, name: '地区分类' }
],
label: {
fontSize: 13,
position: 'inside',
formatter: '{b}\n{c} ({d}%)'
},
itemStyle: {
shadowColor: 'rgba(24,31,67,0.6)',
shadowBlur: 20
}
}
]
}
/**
* 水球图
* */
let waterPoloOption = {
title: {
text: (0.6 * 100).toFixed(0) + '{a|%}',
textStyle: {
fontSize: 24,
fontFamily: 'Microsoft Yahei',
fontWeight: 'normal',
color: '#bcb8fb',
rich: {
a: {
fontSize: 10
}
}
},
x: 'center',
y: '35%',
subtext: '在线设备数：1852',
subtextStyle: {
color: '#bcb8fb',
fontSize: 14,
fontWeight: 700
}
},
// 数据
series: [
{
type: 'liquidFill',
radius: '60%',
center: ['50%', '50%'],
data: [0.6, 0.6, 0.6, 0.5],
backgroundStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'rgba(255, 255, 0, 0)' // 0% 处的颜色
}, {
offset: 0.5,
color: 'rgba(255, 255, 0, 0)' // 0% 处的颜色
}, {
offset: 1,
color: '#00ffff8c' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
outline: {
borderDistance: 2,
itemStyle: {
borderWidth: 0,
borderColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(69, 73, 240, 0)'
}, {
offset: 1,
color: 'rgba(69, 73, 240, 1)'
}]
// globalCoord: false
},
shadowBlur: 30,
shadowColor: 'red'
}
},
label: {
formatter: function() {
return ''
}
}
}]
}