双X轴的渐变象形柱图

1、想要实现有两个x轴,如果设置了X轴属性,但第二个死活不出来,需要在xAxis中设置:

axisLine: {        	   
		onZero: false,			//设置此属性!!!
	    show:true,
	    lineStyle: {
	    	color: '#ccc'
	    } 
},

2、象形柱图渐变不生效,是color一定要放在items中的normal属性中。

3、完整示例代码:

function N2() {
            var n2 = echarts.init(document.getElementById('n2'));
            var category = [];
            var dottedBase = +new Date();
            var barData = [];
            var maxData;
            var dottedData = [];
            for (var i = 0; i < 20; i++) {
                var date = new Date(dottedBase += 1000 * 3600 * 24);
                category.push([
                    date.getFullYear(),
                    date.getMonth() + 1,
                    date.getDate()
                ].join('-'));
                var b = Math.random() * 200;
                var d = Math.random() * 200;
                barData.push(Math.floor(b))
            }


            maxData = Math.ceil(barData.sort(function (a, b) {
                return b - a;
            })[0] + 100);

            for (var j = 0; j < 20; j++) {
                dottedData.push(maxData);
            }
            var option = {

                tooltip : {
     			    	
     			    	show:false,
     			    	trigger: 'item',
    			        formatter: "{b}: {c}"
  
     			    },
     			    grid: {
     			        left: '10%',
     			        right: '4%',
     			        bottom: '5%',
     			        containLabel: true
     			    },
     			    xAxis : [
     			        {
     			            type : 'category',
     			            boundaryGap: true,
     			            position: 'bottom',
     			            data : category,
     			            axisTick: {
     			                alignWithLabel: true
     			            },
	     			       axisLine: {
	                           lineStyle: {
	                               color: '#ccc'
	                           }
	                       },
	                       axisLabel: {
	                            show: true,
	                            textStyle: {
	                                color: '#7D8590'
	                            }
	                        }
     			        },
     			       {
     			            type : 'category',
     			           	position: 'top',
     			            boundaryGap: true,
     			            data : barData,
     			           axisTick: {
     			                show:false
     			            },
	                       axisLine: {        	   
	                            onZero: false,
	     			       		show:true,
	                           lineStyle: {
	                               color: '#ccc'
	                           } 
	                       },
	                       axisLabel: {
	                            show: true,
	                            textStyle: {
	                                color: '#56aaf2',
	                                fontSize:'14'
	                            }
	                        } 
     			        }
     			    ],
     			    yAxis :{
     			        type : 'value',
     			        splitLine: {
     			            show: false
     			        },
     			       axisLine: {
     			    	   
     			       		show:false,
                           lineStyle: {
                               color: '#ccc'
                           }
                       },
                       axisTick:{       //y轴刻度线
                           show:false
                         },
                       axisLabel: {
                           show: true,
                           textStyle: {
                               color: '#7D8590'
                           }
                       }
     				},
     			    legend: {
     			    	show:false,
     			        orient: 'horizontal',
     			        x: 'right',
     			        data:['应用'],
     			        itemWidth:10,
     			        itemHeight:10,
     			    },
     			   series: [{
     				   
     			   	   name:'应用',
                       type: 'bar',
                       barWidth: 20,
                       legendHoverLink: false,
                       silent: true,
                       itemStyle: {
                    	   normal:{
                    		   color: {
                                   type: 'linear',
                                   x: 0,
                                   y: 1,
                                   x2: 0,
                                   y2: 0,
                                   colorStops: [{
                                       offset: 0,
                                       color: '#cbc3df' // 0% 处的颜色
                                   }, {
                                       offset: 1,
                                       color: '#55aaf2' // 100% 处的颜色
                                   }],
                                   globalCoord: false // 缺省为 false
                               } //底色
                    	   }   
                       },
                       data: barData,
                       z: 1,
                       
                   },
                   {
                       name: 'dotted',
                       type: 'pictorialBar',
                       symbol: 'rect',
                       itemStyle: {
                           normal: {
                               color: '#f1f0f6'
                           }
                       },
                       symbolRepeat: true,
                       symbolSize: [20, 4],
                       symbolMargin: 1,
                       z: -10,
                       data: dottedData
                   },
                   { //分隔
                       type: 'pictorialBar',
                       itemStyle: {
                    	   normal: {
                               color: '#fff'
                           }
                       },
                       legendHoverLink: false,
                       symbolRepeat: 'fixed',
                       symbolMargin: 2,
                       symbol: 'rect',
                       symbolClip: true,
                       symbolSize: [20, 2],
                       symbolPosition: 'start',
                       symbolOffset: [0, -2],
                       symbolBoundingData: maxData,
                       data: barData,
                       z: 2,
                       
                   }
                   
               ]
            };

            n2.setOption(option);
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值