双Y轴echarts

https://www.makeapie.com/editor.html?c=xE1oQek3jr

     /// 整体混合图借鉴 他的地址为  https://gallery.echartsjs.com/editor.html?c=xrySKpOnjM///   嵌套图借鉴 他的地址为  https://gallery.echartsjs.com/editor.html?c=xAi9VBmJLgvar 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'}),    ]};

双Y轴echarts相关推荐

echarts双Y轴（简单明了）
本文主要实现echarts双Y轴,并在此过程中解决: 实现echarts双Y轴 echarts双Y轴左右刻度线一致图例分布显示坐标轴刻度标签数值取整 X/Y轴名称的分布坐标轴刻度标签数值以某一值 ...
echarts折线图怎么从y轴开始_基于echarts的双y轴实时更新折线图
一款基于echarts的双y轴实时更新折线图效果,页面加载后开始自动更新数据并绘制对应的折线图,可以点击右上角的按钮:显示数据视图.刷新数据和将数据存储为png的图片. 查看演示下载资源: 46 次 ...
ECharts 示例——双Y轴
当前ECharts版本为5.1.2. 概述按照对ECharts双Y轴图进行如下设置: 两个Y轴共用1个X轴. 数据系列:修改柱子和折线颜色数据标签:修改字体大小.样式数据组件:使用dataset ...
总结整理Echarts双y轴曲线图（全）
最近因为项目需要,用到了Echarts,自己学习了相关东西,也参考了一些文件,最终把双y轴曲线图实现了,跟大家分享一下.下面是最终需要的效果图: 不多说了,直接上代码!O(∩_∩)O哈哈~ ----- ...
Echarts 图表一些细节设置 lenged 双Y轴等
echarts 示例 Echarts图表效果图(Make A Pie替代) Make A Pie 是由社区贡献者维护的用于 Apache ECharts 作品分享的第三方非官方社区.平时做Echart ...
14. echarts画双y轴
用echarts实现双y轴,并且实现指定数据使用y轴参考链接:https://blog.csdn.net/qq_44827865/article/details/107000180 在使用echar ...
ECharts 示例——双Y轴（一）
在使用echarts中,我们经常会用到双y轴去展示数据,有时候,我们可能需要自己去设置,具体使用某一个y轴去展示某一个具体的数据. 实现代码: option = {legend: {data: ['销 ...
echarts柱状图、折线图渐变色，填充渐变色，鼠标移入样式，双y轴
基础代码都一样,根据配置的seriesDta的type不同,展现出的效果不同,每一个echarts都对应单独的series 版本不同可能实现效果不同,具体查看官网哦. 安装: npm install ...
echarts y轴只显示5个刻度_Echarts 双Y轴刻度不一致
项目中使用了百度Echarts 根据项目需要,要实现双Y轴展示柱状图最终的样子是这样的最终效果实现过程中遇到的问题一开始是这个样子的(因为没有设置max min,天真的以为只要有数据,就会系 ...

双Y轴echarts

双Y轴echarts相关推荐

最新文章

热门文章