溶解氧浓度及饱和率变化echarts 柱状配置项内容和展示
配置项如下
var uploadedDataURL = '/asset/get/s/data-1573457276101-gT-1NqnW.png';
var data = {
//x轴 时间
xAxis: ['2016年1月', '2016年2月', '2016年3月', '2016年4月', '2016年5月', '2016年1月', '2016年2月', '2016年3月', '2016年4月', '2016年5月', '2016年1月', '2016年2月', '2016年3月', '2016年4月', '2016年5月', '2016年6月', '2016年7月', '2016年8月', '2016年9月', '2016年10月', '2016年11月', '2016年12月', '2017年1月', '2017年2月', '2017年3月', '2017年4月', '2017年5月', '2017年6月', '2017年7月', '2017年8月', '2017年9月', '2017年10月', '2017年11月', '2017年12月'],
//折线图数值
lineData: [98, 108, 88, 82, 92, 96, 101, 104, 112, 100, 100, 101, 90, 90, 84, 89, 93, 100, 95, 101, 101, 103, 89, 103, 111, 110, 93, 87, 98, 103, 105, 100, 97, 103, 98, 110, 99, 90, 92, 93, 91, 94, 110, 108, 96, 99, 103, 102, 103, 100, 81, 82, 91, 99, 103, 105, 104, 114, 113, 106, 105, 96, 96, 91, 99, 96, 111, 92, 110, 122, 118, 102, 111, 90],
//柱状图数值
barData: [7.2, 8.2, 7.3, 7.4, 7.5, 8.1, 7.9, 7.1, 7.1, 6.9, 6.9, 6.9, 6.9, 7.5, 7.5, 7.5, 7.8, 8.1, 7.7, 6.9, 6.9, 6.7, 6.5, 7.1, 7.4, 7.3, 7.3, 6.9, 7.8, 7.8, 7.8, 7.9, 6.8, 6.9, 6.9, 7.5, 7.1, 7.3, 7.2, 7.8, 7.4, 7.4, 8.1, 7.6, 7.2, 6.9, 6.9, 7, 7.3, 7.4, 6.6, 6.4, 7.6, 8, 7.4, 7.4, 7, 7.1, 7.1, 7.1, 7.1, 7.1, 7.6, 7.3, 7.7, 8, 8.2, 7.3, 7.3, 7.4, 7.2, 7.6, 8, 6.9],
//折线标准线
lineMark: 90,
//柱状图标准线
barMark: 7.5
};
//柱状图颜色分区
/*var area = [ //var color = ['#40E3F6', '#31B1E6', '#6888EF', '#9B68EF', '#E660F6']
{max: 7.5, color: '#31B1E6', lineMin: 90},//5及5以下
{max: 7.5, color: '#31B1E6', line},// 7.5及 7.5以下
{max: 10, color: '#6888EF'},//10及10以下
{ color: '#9B68EF'} // 10以上
];*/
//根据数值匹配对应颜色
function getBarColor(v1, v2) {
if (isNaN(v1) || isNaN(v2)) {
return '#ddd';
}
if (v1 < 7.5 && v2 >= 90) {
return '#31B1E6';
} else if (v1 >= 7.5 && v2 < 90) {
return '#6888EF';
} else if (v1 < 7.5 && v2 < 90) {
return '#9B68EF';
} else if (v1 >= 7.5 && v2 >= 90) {
return '#40E3F6';
}
/* for(var i = 0; i < area.length; i++){
var item = area[i];
if(v < item.max || !item.max ){
return item.color
}
}*/
}
//处理柱状图数据，添加颜色
let barData = [];
data.barData.forEach((v, i) => {
barData.push({
value: v,
itemStyle: {
normal: {
barBorderRadius: 8,
color: getBarColor(v, data.lineData[i])
}
}
});
});
option = {
backgroundColor: '#FFF',
grid: {
top: 80,
left: 50,
right: 120,
bottom: 100
},
toolbox: {
feature: {
saveAsImage: {}
}
},
color: ['#31B1E6', '#78b4ff'],
tooltip: {
trigger: 'axis'
},
legend: {//图例
top: 20,
itemWidth: 26,//图形宽度
itemHeight: 16,//图形高度
textStyle: {
fontSize: 18//文字大小
}
},
/* title: {
left: 'center',
text: '溶解氧浓度及饱和率变化'
},*/
xAxis: {
data: data.xAxis,
axisLabel: {
textStyle: {
fontSize: 16,
color: '#000'
},
rotate: '90',
interval: 5//中间间隔
},
},
yAxis: [{
name: 'mg/l',
// min: 5,
max: 15,
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(33,148,246,0.2)'
}
},
axisTick: {
show: false
},
splitArea: {
show: true,
areaStyle: {
color: 'rgb(245,250,254)'
}
},
axisLabel: {
textStyle: {
fontSize: 16,
color: '#000'
}
},
nameTextStyle: {
fontSize: 16,
color: '#000'
}
},
{
name: '%',
min: 25,
max: 125,
axisLabel: {
formatter: function(v){
if(v === 120){
return ''
}
return v;
},
textStyle: {
fontSize: 16,
color: '#000'
}
},
nameTextStyle: {
fontSize: 16,
color: '#000'
}
}
],
series: [{
name: '溶解氧浓度',
type: 'bar',
yAxisIndex: 0,
barWidth: 6,
data: barData,
markLine: {
label: {
show: true,
formatter: '{b}：{c}'
},
lineStyle: {
type: 'solid',
width: 2
},
data: [{
name: '浓度Ⅰ类标准',
yAxis: data.barMark,
itemStyle: {
normal: {
color: '#ff6d9d'
}
}
}]
}
}, {
name: '溶解氧饱和率',
type: 'line',
yAxisIndex: 1,
data: data.lineData,
symbol: 'circle',
symbolSize: 1,
lineStyle: {
width: 4,//折线宽度
color: 'rgb(222, 118, 223)',//颜色
shadowBlur: 12,
shadowColor: 'rgb(222, 118, 223,0.9)',
shadowOffsetX: 1,
shadowOffsetY: 1
},
itemStyle: {
color: 'rgb(222, 118, 223)',
borderWidth: 1,
borderColor: '#FFF'
},
label: {
show: true,
distance: 1,
normal: {
show: true,
//offset: [17, 5],
offset: [25, -2],
backgroundColor: {
image: uploadedDataURL
},
color: '#FFF',
padding: [8, 20, 8, 6],
//width:60,
height: 36,
formatter: function(params) {
var idx = params.dataIndex;
var pre = data.lineData[idx - 1];
var next = data.lineData[idx + 1];
if (pre && next &&
(
(params.data > pre && params.data > next) ||
(params.data < pre && params.data < next)
)
) {
var name = params.name;
var value = params.data;
//var str = value;
var str = name + '\n饱和率：' + value;
return str;
}
return '';
},
rich: {
bg: {
backgroundColor: {
image: uploadedDataURL
},
width: 78,
//height:42,
color: '#FFF',
padding: [20, 0, 20, 10]
},
br: {
width: '100%',
height: '100%'
}
}
}
},
markLine: {
label: {
show: true,
formatter: '{b}：{c}'
},
lineStyle: {
type: 'solid',
width: 2
},
data: [{
name: '饱和率Ⅰ类标准',
yAxis: data.lineMark,
itemStyle: {
normal: {
color: '#79E73C'
}
}
}]
}
}]
};
截图如下
