正负轴+折线图 ECharts Gallery

20:11:45图表已生成
代码
	window.chartCfg.themeName = 'vintage';

var labelRight = {
			normal: {
				position: 'inside'
			}
		};
		var itemRight = {
			normal:{
				color:'#c23531'
			}
		}

		var json = {
			categories: ['A', 'B', 'C'],
			lineData: [1, 0, 5],
			barData: [2, 4, 6],
			weather:[11, 11, 15, '-', 12,'-', 10],
			weatherFixed:[],
			gauges:[]
		};

	app = JSON.parse(JSON.stringify(json));//原对象不能包含function以及过于复杂的层次 Deep Clone
	
	
	app.timeTicket = setInterval(function () {
        drawLogo(myChart);
	}, 3000);
	
	/*Chart 0*/
	
	var opts = [{
			title: {
				text: '正负轴+折线图'
			},
			tooltip : {
				trigger: 'axis',
				extraCssText:'box-shadow: 0 0 7px rgba(0, 0, 0, 0.6);',
				axisPointer: { // 坐标轴指示器，坐标轴触发有效
					type: 'line' // 默认为直线，可选为：'line' | 'shadow'
				},
				padding: 0,
				backgroundColor: 'rgba(255,255,255,0)',
				show: true,
				formatter: function(params, ticket, callback) {
					var stl = '';
					$(params).each(function(index, serie) {
						var colors = myChart.getOption().color;
						var color = colors[index % colors.length];
						if(serie.seriesName.indexOf('Fixed') == -1){
							//判断fixed是否大于等于100
							var fixedValue = 100;
							var tValue = 0;
							if(serie.componentSubType === 'bar'){
								if(params[0].value >= fixedValue){
									tValue = fixedValue + serie.value;
								}else{
									tValue = serie.value;
								}
							}else{
								tValue = serie.value;
							}
							stl += '<br /> <div style="display:inline-block;width:10px;height:10px;border-radius:5px;background:'+color+';"></div> ' + serie.seriesName+': '+tValue+'%';
						}
					});
					return '<div style="background:#fff;padding:15px;color:#999;border-radius:5px;">' + params[0].name + stl + '</div>';
				}
			},
			grid: {
				top: 80,
				bottom: 30
			},
			yAxis: {
				type : 'value',
				position: 'top',
				splitLine: {lineStyle:{type:'dashed'}},
				max:200,
				splitNumber:3,
				min:-100,
				axisLabel:{
					formatter:function(value){
						if(value % 100 === 0){
							return value+'%';
						}
						return '';
					}
				}
			},
			xAxis: {
				type : 'category',
				axisLine: {show: false},
				axisLabel: {show: false},
				axisTick: {show: false},
				splitLine: {show: false},
				data : ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one']
			},
			series : [
				{
					name:'生活费Fixed',
					type:'bar',
					stack: '总量',
					
					itemStyle:{
						normal:{ color:'transparent'}
					},
					label: {
						normal: {
							show: true,
							formatter: '{b}'
						}
					},
					data:[
						{value: 85},
						100, 100,
						{value: 65}
					]
				},
				{
					name:'生活费',
					type:'bar',
					stack: '总量',
				   
					itemStyle:{
						normal:{ color:'green'}
					},
					label: {
						normal: {
							show: true,
							formatter: '{b}'
						}
					},
					data:[
						{value: 15, label: labelRight,itemStyle:itemRight},
						{value:25,fixedValue:100},{value: 80,fixedValue:100},
						{value: 35, label: labelRight,itemStyle:itemRight}
					]
				},
				{
					name:'邮件营销',
					type:'line',
					data:[0, 80, 101, 95]
				}
				
			]
		}];

	app.shownChartIndex = 0;
	
	opts[app.shownChartIndex].logoColor = getColorPalette()[app.shownChartIndex % getColorPalette().length];
	option = zrUtil.merge(opts[app.shownChartIndex], baseOption, false);
	
    if (chartCfg.showVersion || false) {
            var ecInfo = '<div id="ecInfo" style="position:absolute;top:10px;left:10px;z-index:9999;">#</div>';
        
			//显示ECharts版本及依赖信息
			var tpl = '<br />';
			tpl += 'ECharts Version: ' + echarts.version + '<br />';
			zrUtil.each(echarts.dependencies, function(value, key) {
				tpl += zrFormat.toCamelCase('-' + key) + ' Version: ' + value;
			});
		 $(myChart.getDom()).parent().append(ecInfo.replace('#', tpl));
		} else {
		
		}
		
    
		/*Event Binding*/
		
		
		/*Event Binding*/
	
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
