能源数据总览ECharts Gallery

20:11:45图表已生成
代码
  	/// 整体混合图借鉴 他的地址为  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 = 30;
  	var chartGridHeight = 95; //改变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 dbrl = [31, 15, 17, 53, 46, 26, 11];
     var dbr2 = [22, 33, 44, 11, 22, 44, 33];
     var dbr3 = [32, 14, 53, 35, 56, 23, 52];
     var dbr4 = [11, 24, 56, 67, 43, 54, 24];
     
     
     
  	var orddbproc1 = [99, 32, 53, 95, 73, 38, 99 ];
  	
  	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 == 3) {
  	        axisLabelFlag = true;
  	    }

  	    return echarts.util.merge({
  	        type: 'category',
  	        gridIndex: gridIndex,
  	        //统一时间轴数据
  	        data: overviewDate,
  	        axisLabel: {
  	            show: axisLabelFlag,
  	            textStyle: {
  	                color: '#92a786' //X轴的字体颜色
  	            },
  	        },
  	        axisLine: {
  	            lineStyle: {
  	                color: '#92a786', //X轴的颜色
  	                width: 1, //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: '#92a786', //设置Y轴的颜色
  	                width: 1, //设置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: 2, //提示框边框的大小
  	        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": 40, //最下方提示文字的距离
  	        textStyle: {
  	            color: '#1bb4f6' //最下面提示文字的颜色
  	        },
  	        //				icon: 'roundRect',
  	    },
  	    xAxis: [

  	        makeXAxis(0),
  	        makeXAxis(1),
  	        makeXAxis(2),
  	        makeXAxis(3),

  	    ],
  	    yAxis: [
  	        makeYAxis(0, {
  	         //   name: '天气数据',
  	            splitNumber: 3,

  	        }),
  	        makeYAxis(1, {
  	         //   name: '预测实际能耗',

  	        }),
  	        makeYAxis(2, {
  	         //   name: '预测实际消耗',

  	        }),
  	          makeYAxis(3, {
  	         //   name: '预测实际消耗',

  	        }),
  	        makeYAxis(0, {
                 splitLine:  false,//去除网格线
				}),
				makeYAxis(1, {
                 splitLine:  false,//去除网格线
				}),
				makeYAxis(2, {
                 splitLine:  false,//去除网格线
				}),
				makeYAxis(3, {
                 splitLine:  false,//去除网格线
				})
  	    ],
  	    //dataZoom 组件 用于区域缩放
  	    dataZoom: [{
  	        type: 'slider',
  	        xAxisIndex: [0, 1, 2,3],
  	        realtime: true,
  	        //移动端展示方式
  	        handleSize: '180%', //滑动条两侧的大小
  	         start: 0,
             end: 80,
  	    }],

  	    //每个系列通过 type 决定自己的图表类型
  	    series: [
  	        makeGridData(0, 0, 'line', '今日逐时热', orddbtime1, {
  	            stack: 'DBTIME',
  	            smooth: true,
  	            color: '#d73d2d',
  	            lineStyle: {
  	                width: 2 //改变线条的粗细
  	            }
  	        }),
  	        makeGridData(0, 0, 'line', '今日逐时冷', orddbtime2, {
  	            stack: 'DBTIME',
  	            smooth: true,
  	            color: '#45d3cb',
  	            lineStyle: {
  	                width: 2 //改变线条的粗细
  	            }
  	        }),

  	        makeGridData(1, 1, 'line', '今日逐时水', orddbproc1, {
  	            smooth: true, //设置曲线
  	            color: '#63B8FF',
  	            lineStyle: {
  	                width: 2 //改变线条的粗细
  	            }
  	        }),
  	        makeGridData(2, 2, 'line', '今日逐时电', ycrl1, {
  	            smooth: true,
  	            color: '#6cd72d',
  	            lineStyle: {
  	                width: 2 //改变线条的粗细
  	            }
  	        }),
  	           makeGridData(3, 3, 'line', '今日逐时气', ycrl1, {
  	            smooth: true,
  	            color: '#d7a22d',
  	            lineStyle: {
  	                width: 2 //改变线条的粗细
  	            }
  	        }),
  	        	makeGridData(0, 4, 'line', '热量对比1', dbrl,{smooth: true,	color:'#FF6A6A'}),
  	        	makeGridData(1, 5, 'line', '热量对比2', dbr2,{smooth: true,	color:'#FF6A6A'}),
  	        	makeGridData(2, 6, 'line', '热量对比3', dbr3,{smooth: true,	color:'#FF6A6A'}),	
  	        	makeGridData(3, 7, 'line', '热量对比4', dbr4,{smooth: true,	color:'#FF6A6A'}),	
  	        	
  	        	

  	    ]

  	};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
