Echarts-双轴图

最新推荐文章于 2023-12-19 09:49:17 发布
最新推荐文章于 2023-12-19 09:49:17 发布
阅读量349 收藏 1
点赞数
文章标签： javascript ViewUI

1、问题描述

利用Echarts制作一个折线图，条件是：三条折线，一条代表可利用率，另外两条代表数量。


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Echarts-双轴图</title>
		<link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">
		<script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
		<script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
		<style>
			body,html{
				width: 99%;
				height: 99%;
				font-family: "微软雅黑";
				font-size: 12px;
			}
			#double{
				width: 100%;
				height: 100%;
				font-family: "agency fb";
				font-weight: bolder;
			}
		</style>
		<script>
			$(function(){
				var chart = document.getElementById('double');  
                var echart = echarts.init(chart);  
                  
                var option = {
				    title : {
				        text: '可利用率',
				        subtext: '',
				        x: 'center',
				        align: 'right'
				    },
				    grid: {
				        bottom: 80
				    },
				    tooltip : {
				        trigger: 'axis',
				        axisPointer: {
				            animation: false
				        },
				        formatter: function (params) {
				            var res = params[0].name;
				            for (var i = 0, l = params.length; i < l; i++) 
				            {
				            	if(i==0)
				            	{
				            		res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + "%";
				            	}
				            	else
				            	{
				            		res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
				            	}
				            }
				            
				            return res;
				        }
				    },
				    legend: {
				        data:['可利用率','A','B'],
				        x: 'left'
				    },
				    xAxis : [
				        {
				            type : 'category',
				            axisLabel: {
								rotate: 45
							},
				            boundaryGap : false,
				            axisLine: {onZero: false},
				            data : ['2016年1月', '2016年2月', '2016年3月', '2016年4月', '2016年5月','2016年6月','2016年7月','2016年8月','2016年9月','2016年10月','2016年11月','2016年12月'].map(function (str) {
				                return str.replace(' ', '\n')
				            })
				        }
				    ],
				    yAxis: [
				        {
				            name: '可利用率',
				            type: 'value',
				            max: 100,
				            axisLabel: {
			                  show: true,
			                  interval: 'auto',
			                  formatter: '{value} %'
			                }
				        },
				        {
				            name: 'A',
				            nameLocation: 'start',
				            type: 'value',
				            inverse: true
				        },
				        {
				            name: 'B',
				            nameLocation: 'start',
				            type: 'value',
				            inverse: true
				        }
				    ],
				    series: [
				        {
				            name:'可利用率',
				            type:'line',
				            hoverAnimation: false,
				            itemStyle: {
				            	normal: {
            						label : {
            							show:false,
            							position:'top',
            							formatter:'{c} %'
            						}
            					}
				            },
				            areaStyle: {
				                normal: {}
				            },
				            lineStyle: {
				                normal: {
				                    width: 1
				                }
				            },
				            data:[12,78,34,67,88,45,65,77,31,21,90,54]
				        },
				        {
				            name:'A',
				            type:'line',
				            yAxisIndex:1,
				            hoverAnimation: false,
				            areaStyle: {
				                normal: {}
				            },
				            lineStyle: {
				                normal: {
				                    width: 1
				                }
				            },
				            data: [1,4,5,8,3,2,7,6,9,2,4,3]
				        },
				        {
				            name:'B',
				            type:'line',
				            yAxisIndex:1,
				            hoverAnimation: false,
				            areaStyle: {
				                normal: {}
				            },
				            lineStyle: {
				                normal: {
				                    width: 1
				                }
				            },
				            data: [0,2,3,7,1,0,5,2,6,1,2,1]
				        }
				    ]
				};
                  
                echart.setOption(option);  
			});
		</script>
	</head>
	<body>
		<div id="double"></div>
	</body>
</html>

 


3、实现结果
 


 


 



                

        

        




    




    

      

        

            

              
                
                  iteye_8264
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
echarts双轴

				
			

			

				

					m0_55546349的博客
				

				

					04-15
					
					1378
					
				

			

		

		

			
				
let option = {
		tooltip: {
			trigger: "axis",
		},
		legend: {
			data: ["订单数", "销售额"],
		},


		grid: {
			left: '8%',
			right: '12%',
			top: '10%',
			bottom: '15%',
		},//改变了图标的大小与位置
		xAxis: {
			type: "category",
			axisLine: {
				show: true,
		.

			
		

	



                

              
                



	

		

			

				
					
Echarts双轴图的配置.

				
			

			

				

					weixin_30878501的博客
				

				

					11-08
					
					498
					
				

			

		

		

			
				
在series中的数据组加个属性，yAxisIndex: 1，表示第二个数据用的是第二个y轴，不加这个属性的话都是默认0，即第一个属性，再配置yAxis的值第一个为左侧坐标轴,右册坐标轴为第二个配置参数的值.
optionC = {    tooltip: {        trigger: 'axis'    },    legend: {        data: ['蒸发量', '降水...

			
		

	



                


  
              

                


	

		

			

				
					
vue中使用echarts实现双轴图

				
			

			

				

					m0_45237165的博客
				

				

					07-06
					
					770
					
				

			

		

		

			
				
vue中使用echarts实现双轴图
效果图

echarts自适应方法
安装插件
npm install element-resize-detector

公共方法
drawLine(id, option) {
    const erd = elementResizeDetectorMaker();

    let myChart = echarts.init(document.getElementById(id));
    // 绘制图表配置
    // 窗口大小自适应方案
    myChar

			
		

	





	

		

			

				
					
echart双轴重叠柱状图

				
			

			

				

					qq_42551543的博客
				

				

					09-30
					
					600
					
				

			

		

		

			
				
echart双轴重叠柱状图
配置项如下：
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow' 
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
  

			
		

	



		

			
		



	

		

			

				
					
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】

				
			

			

				

					12-07
				

			

		

		

			
				
本文实例讲述了jQuery插件Echarts实现的双轴图效果。分享给大家供大家参考，具体如下： 1、问题描述： 利用Echarts制作一个折线图，条件是：三条折线，一条代表可利用率，另外两条代表数量。 2、实现源码：  <!...

			
		

	





	

		

			

				
					
echarts 柱状图

				
			

			

				

					01-02
				

			

		

		

			
				
在ECharts中，柱状图分为单轴柱状图和双轴柱状图，其中单轴柱状图是最基础的形式。  **1. 前台JS相关代码**  在ECharts中，创建柱状图主要涉及到以下几个步骤：  1. 引入ECharts库：确保HTML文件中包含了ECharts.js...

			
		

	





	

		

			

				
					
html5饼状图和柱状图数据图表echarts插件

				
			

			

				

					11-08
				

			

		

		

			
				
ECharts提供单轴柱状图和双轴柱状图。通过调整`barWidth`和`barGap`可以控制柱子的宽度和间距。此外，可以使用`stack`属性实现堆叠柱状图，以便展示不同类别间的相对比例。  4. **数据绑定与交互**  ECharts允许将...

			
		

	





	

		

			

				
					
echarts示例代码

				
			

			

				

					04-22
				

			

		

		

			
				
ECharts的柱状图支持单轴、双轴、堆叠和分组等多种展示模式，可以灵活地展示分类数据。在示例代码中，你可以看到如何设置数据、颜色、标签和提示框等属性，以及如何自定义柱状图的样式和交互效果。  2. **折线图...

			
		

	





	

		

			

				
					
ECharts 示例——双Y轴（一）

				
			

			

				

					甜心的专栏
				

				

					04-15
					
					1万+
					
				

			

		

		

			
				
在使用echarts中，我们经常会用到双y轴去展示数据，有时候，我们可能需要自己去设置，具体使用某一个y轴去展示某一个具体的数据。

			
		

	





	

		

			

				
					
小程序使用echarts，实现左右双Y轴，动态获取数据，生成折线图

				
			

			

				

					牛哞哞杂记
				

				

					10-02
					
					4289
					
				

			

		

		

			
				
微信小程序使用echarts，实现左右双Y轴，动态获取数据，生成折线图
本来使用的是wxcharts，但发现实现不了左右双y轴的效果，就换成echarts
要实现的效果如下：
效果图。。。
要实现这样的效果，需要以下几步：
（1）去github下载插件，放进自己的项目里
呐，链接 ===>点击这里
只需要将名称是ec-canvas的文件夹放进自己项目里。
像这样：
小图片。。。
（2）分别写...

			
		

	





	

		

			

				
					
Echarts实战案例代码(52)：双轴折线图的配置

				
			

			

				

					漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
				

				

					11-13
					
					441
					
				

			

		

		

			
				
var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var option = {
        legend: {
            data: ['波长', '物理量']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
              ..

			
		

	





	

		

			

				
					
echart折线+柱状 +双轴

					
最新发布

				
			

			

				

					shi19970609的博客
				

				

					12-19
					
					423
					
				

			

		

		

			
				
【代码】echart折线+柱状 +双轴。

			
		

	





	

		

			

				
					
echarts双Y轴（简单明了）

				
			

			

				

					孛儿只斤·苏日娜的日记
				

				

					06-29
					
					2万+
					
				

			

		

		

			
				
本文主要实现echarts双Y轴，并在此过程中解决：

echarts双Y轴左右刻度线一致
图例分布显示
坐标轴刻度标签数值取整
X/Y轴名称的分布
坐标轴刻度标签数值以某一值为分界点改变颜色

等问题

1、 echarts双Y轴左右刻度线一致
参考、借鉴文档：
https://blog.csdn.net/qq_40845885/article/details/82108525
https://blog.csdn.net/LzzMandy/article/details/79400141?depth_1-

			
		

	





	

		

			

				
					
【原理】echarts双柱形图坐标轴数据差距太大，终于解决了

				
			

			

				

					吃不吃烤红薯？
				

				

					12-14
					
					2万+
					
				

			

		

		

			
				
有需要用到echarts，接触到双柱形图，被坐标轴快玩死了。


差距一个数量级。几番探索明白了：
需要
yAxisIndex: 1,
官方文档：http://echarts.baidu.com/option.html#yAxis.gridIndex


源文件如下：




    
    
    
    农家书屋面积及藏书量双柱形图



    
    

   

			
		

	





	

		

			

				
					
百度ECharts 3.0 多坐标轴统计图一般配置详解（实例）

				
			

			

				

					JathamJ的博客
				

				

					10-03
					
					1万+
					
				

			

		

		

			
				
ECharts 是百度出品的jquery图表插件。相对于Chartist，拥有更加强大的功能，以及更加详细的文档（ECharts的文档形式非常优秀，简明易懂）。ECharts支持的图表种类非常多，同时兼容性也十分优良，故而在网站建设动态统计图表时，是一个非常优秀的选择。配置首先，配置echart首先需要在前台模板建立一个div容器，同时必须给容器指定一个宽度或高度，因而在响应式页面中发挥并不出色。<

			
		

	





	

		

			

				
					
echarts实现双y轴，并且实现制定数据使用y轴

					
热门推荐

				
			

			

				

					shu580231的博客
				

				

					09-04
					
					8万+
					
				

			

		

		

			
				
在使用echarts中，我们经常会用到双y轴去展示数据，有时候，我们可能需要自己去设置，具体使用某一个y轴去展示某一个具体的数据。
如图所示：我们的y轴有两个，数据共有3个，这个图有两个不好的点：1.没有标明左右坐标具体是显示什么的，2.很明显今日访问人数和昨日访问人数需要使用同一个坐标进行数据的对比。


 优化后的设置：
1.双y轴的设置，加上具体是用来显示什么数据的


2，

			
		

	





	

		

			

				
					
echarts实现双y轴

				
			

			

				

					于鹏的博客
				

				

					09-04
					
					2万+
					
				

			

		

		

			
				
我们在一个折线图中展示多个数据的时候，如果两个数据的数量级相差很大，会造成数量级低的数据折线图被压缩成一条很直的线，如下图：解决办法是使用双y轴： $scope.echart21 = {
        legend: {
            show: 'true',
            data: ['ns_csiqcs', 'ns_lbi', 'ns_cap', 'ns_spider'

			
		

	





	

		

			

				
					
echarts 双y轴设置

				
			

			

				

					lilongwei4321的博客
				

				

					08-24
					
					3万+
					
				

			

		

		

			
				


要设置双y轴可以参考，echart官方文档中Yaxis的设置 http://echarts.baidu.com/echarts2/doc/doc.html#Yaxis，

废话不多说，直接上代码


yAxis : [{
          type: 'value',
          min: 0,
          max: 5,
          interval: 1,
   ...

			
		

	





	

		

			

				
					
echarts 多柱状图双轴数据对齐

				
			

			

				

					09-22
				

			

		

		

			
				
你可以通过以下步骤将echarts多柱状图双轴数据对齐: 1. 首先，设置左右Y轴的最大值为自适应的值，使其能够一直分为6段。你可以使用以下代码来实现： ``` {  min: 0,  max: val => {  const { max } = val;  const ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值