Y轴组合图echarts shadow配置项内容和展示
配置项如下
/// 整体混合图借鉴 他的地址为 https://gallery.echartsjs.com/editor.html?c=xrySKpOnjM
/// 嵌套图借鉴 他的地址为 https://gallery.echartsjs.com/editor.html?c=xAi9VBmJLg
var overviewChartID = 'overview-chart';
var overviewTitle = '预测数据'; //标题
var overviewSubTitle = echarts.format.formatTime('yyyy年MM月dd', new Date());
//图表定位
var chartGridTop = 40;
var chartGridHeight = 180; //改变Y轴的高度
//时间轴
//SELECT WMSYS.WM_CONCAT('"'||TO_CHAR(TRUNC(SYSDATE, 'MM') + ROWNUM - 1, 'YYYY-MM-DD')||'"') DBTIME FROM DUAL CONNECT BY ROWNUM <= 30;
var overviewDate = ["00:00", "00:05", "00:10", "00:15", "00:20", "00:25", "00:30"];
//表格数据
//SELECT WMSYS.WM_CONCAT(TRUNC(DBMS_RANDOM.VALUE(5, 60), 2)) DBTIME FROM DUAL CONNECT BY ROWNUM <= 30;
var orddbtime1 = [36.59, 35.56, 32.84, 26.37, 35.94, 26.25, 24.11];
var orddbtime2 = [22.18, 24.76, 20.37, 28.09, 22.25, 26.75, 20.14, ];
var orddbproc1 = [599, 302, 753, 695, 673, 558, 779, ];
var ycrl1 = [59, 32, 73, 69, 63, 58, 79, ];
//直角坐标系内绘图网格
function makeGrid(top, height, opt) {
return echarts.util.merge({
left: 70, //居左的距离
right: 60,
top: top,
height: height
}, opt || {}, true);
}
//X轴生成器
function makeXAxis(gridIndex, opt) {
//避免X轴数据显示过于频繁
axisLabelFlag = false;
// if (gridIndex % 2 == 0) {
// axisLabelFlag = true;
// }
if (gridIndex == 2) {
axisLabelFlag = true;
}
return echarts.util.merge({
type: 'category',
gridIndex: gridIndex,
//统一时间轴数据
data: overviewDate,
axisLabel: {
show: axisLabelFlag,
textStyle: {
color: '#00FF00' //X轴的字体颜色
},
},
axisLine: {
lineStyle: {
color: '#63B8FF', //X轴的颜色
width: 1.5, //X轴的粗细
}
},
}, opt || {}, true);
}
//Y轴生成器
function makeYAxis(gridIndex, opt) {
return echarts.util.merge({
type: 'value',
nameLocation: 'middle',
nameGap: '40',
gridIndex: gridIndex,
nameTextStyle: {
color: 'red', //设置左侧字体颜色
fontSize: 20, //设置左侧字体的大小
},
axisLine: {
lineStyle: {
color: '#BA55D3', //设置Y轴的颜色
width: 1.5, //设置Y轴的粗细
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#00FF00' //Y轴的数据字体颜色
},
},
splitLine: {
show: true,
lineStyle: {
color: '#b0bad4' //网格线的颜色
}
}
}, opt || {}, true);
}
//数据生成器
function makeGridData(xAxisIndex, yAxisIndex, chartType, chartName, chartData, opt) {
return echarts.util.merge({
type: chartType,
name: chartName,
xAxisIndex: xAxisIndex,
yAxisIndex: yAxisIndex,
data: chartData,
}, opt || {}, true);
}
// var myChartOne = echarts.init(document.getElementById('NestingChart'));
var option = {
animation: false,
//标题组件，包含主标题和副标题
title: {
x: 'center',
text: overviewTitle, //标题
textStyle: {
//文字颜色
color:'#00C7E1',
//字体风格,'normal','italic','oblique'
fontStyle:'normal',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight:'bold',
//字体系列
fontFamily:'sans-serif',
//字体大小
fontSize:18
},
//subtext: overviewSubTitle,
//padding: 0,
},
tooltip: {
//移动端展示方式
trigger: 'axis',
transitionDuration: 0,
confine: true,
bordeRadius: 5,
borderWidth: 3, //提示框边框的大小
borderColor: '#333', //提示框边框的颜色
backgroundColor: 'rgba(255,255,255,0.9)', //提示框的背景颜色（0.9为透明度）
textStyle: {
fontSize: 12, //提示框的字体大小
color: '#333', //提示框里的字体颜色
aligin: 'center',
},
formatter: function(params) { //数据单位格式化
var relVal = params[0].name; //x轴名称
relVal += "<div style='width:120px'>"
for (var i = 0, l = params.length; i < l; i++) {
if (params[i].value) {
relVal += "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" + params[i].color + ";'>" + '<span style="display:block;padding-left:15px;margin-top:-4px">' + params[i].seriesName + ' : ' + params[i].value + '</span>' + "</span>" + '<br>';
}
}
relVal += "</div>"
return relVal;
}
},
//坐标轴指示器（axisPointer）的全局公用设置
axisPointer: {
type: 'shadow',
link: {
xAxisIndex: 'all'
}
},
//直角坐标系内绘图网格
grid: [
makeGrid(chartGridTop, chartGridHeight),
makeGrid(chartGridTop + (chartGridHeight + 25), chartGridHeight),
makeGrid(chartGridTop + (chartGridHeight + 25) * 2, chartGridHeight),
makeGrid(chartGridTop + (chartGridHeight + 25) * 3, chartGridHeight),
],
legend: {
data: ['预测气温', '实际气温', '预测实际能耗', '预测热耗'],
"bottom": 50, //最下方提示文字的距离
textStyle: {
color: '#1bb4f6' //最下面提示文字的颜色
},
// icon: 'roundRect',
},
xAxis: [
makeXAxis(0),
makeXAxis(1),
makeXAxis(2),
],
yAxis: [
makeYAxis(0, {
name: '天气数据',
splitNumber: 3,
}),
makeYAxis(1, {
name: '预测实际能耗',
}),
makeYAxis(2, {
name: '预测实际消耗',
}),
],
//dataZoom 组件 用于区域缩放
dataZoom: [{
type: 'slider',
xAxisIndex: [0, 1, 2],
realtime: true,
//移动端展示方式
handleSize: '180%', //滑动条两侧的大小
start: 0,
end: 80,
}],
//每个系列通过 type 决定自己的图表类型
series: [
makeGridData(0, 0, 'line', '预测气温', orddbtime1, {
stack: 'DBTIME',
smooth: true,
color: '#FFC125',
lineStyle: {
width: 3 //改变线条的粗细
}
}),
makeGridData(0, 0, 'line', '实际气温', orddbtime2, {
stack: 'DBTIME',
smooth: true,
color: '#63B8FF',
lineStyle: {
width: 12 //改变线条的粗细
}
}),
makeGridData(1, 1, 'line', '预测实际能耗', orddbproc1, {
// smooth: true, //设置曲线
color: '#BA55D3',
lineStyle: {
width: 7 //改变线条的粗细
}
}),
makeGridData(2, 2, 'line', '预测热耗', ycrl1, {
smooth: true,
color: '#836FFF',
lineStyle: {
width: 5 //改变线条的粗细
}
}),
]
};
截图如下
