Echarts柱状折线图

不见长安见晨雾

已于 2023-02-20 17:35:12 修改

阅读量818

点赞数

分类专栏： # Echarts 文章标签： echarts javascript ecmascript

于 2017-07-05 16:26:51 首次发布

本文链接：https://blog.csdn.net/fengsheng5210/article/details/74454147

版权

Echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>
<head>
<style>
	#EcharBox {
		margin: 0 auto;
		width: 95%;
		height: 400px;
	}
</style>
</head>
<body>
     <div id="EcharBox"></div>
</body>
<script>
//分别传入三个数组
var planArr=[10,3,30,16];
var hadArr=[5,10,50,40];
var hadRate=[0.5,0.3,0.6,0.4];
function showEchartYear(planArr, hadArr,hadRate) {		   echarts.dispose(document.getElementById('EcharBox'));
		var option = {
			color: ['#00ad53', '#feb63e'],
			title: {
				x: 'center',
				text: "2017年度",
				textStyle: {
					color: '#444',
					fontStyle: 'normal',
					fontWeight: 'bold',
					fontFamily: 'sans-serif',
					fontSize: 18
				}
			},
		    tooltip: {
		        trigger: "axis",
		        axisPointer: {
		            type: "shadow",
		            textStyle: {
		                color: "#fff"
		            },
		        },
		        formatter: function (params, ticket, callback) {
					var str=""+params[0].name+"<br/>";
		        	for(var i=0;i<params.length;i++){
		        		str+='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+params[i].color+'"></span>';
						str+=params[i].seriesName+":";
						if(typeof(params[i].value)=="undefined"){
							str+="-";
						}else{
							if(i==2){
								str+=params[i].value+"%";
							}else{
								str+=params[i].value;
							}
						}
						str+="<br/>"
					}
		        	return str;
		        } 
		    },
			grid: {
				left: 10,
				right: 70,
				bottom: 10,
				containLabel: true
			},
			xAxis: [
				{
					type: 'category',
					data: ['一季度', '二季度', '三季度', '四季度'],
					axisLabel: {
						interval: 0,   //横轴信息全部显示
						//rotate: -30,//-30度角倾斜显示
						textStyle: {
							color: '#666'
						}
					},
					axisLine: {
						lineStyle: {
							color: '#eaedf0'
						}
					}
				}
			],
			yAxis: [
				{
					name: '金额:(亿元)',
					type: 'value',
					nameTextStyle: {
						color: '#666',
					},
					axisLine: {
						lineStyle: {
							color: '#eaedf0'
						}
					},
					axisLabel: {
						textStyle: {
							color: '#666'
						}
					}
				},
				{
					type : 'value',
					name:'完成率%',
					nameTextStyle:{
						color:'#666',
					},
					splitLine: {
						show: false
					},
					axisLabel:{
						formatter:'{value}%',
						textStyle:{
							color:'#666'
						}
					},
					axisTick:{
						show:false
					},
					axisLine:{
						lineStyle:{
							color:'#eaedf0'
						}
					}
				}
			],
			legend: {
				x: 'right',
				y: 'center',
				orient: 'vertical',
				data: ['计划', '完成','完成率']
			},
			series: [
				{
					name: '计划',
					type: 'bar',
					data: planArr,
					itemStyle: {
						normal: {
							label: {
								show: true,
								position: 'top',
								textStyle: {
									fontSize: '14',
									fontFamily: '微软雅黑',
								},
							}
						}
					},
				},
				{
					name: '完成',
					type: 'bar',
					data: hadArr,
					itemStyle: {
						normal: {
							label: {
								show: true,
								position: 'top',
								textStyle: {
									fontSize: '14',
									fontFamily: '微软雅黑',
								}
							}
						}
					},
				},
				{
					name:'完成率',
					type:'line',
					yAxisIndex:1,
					data:hadRate,
					label:{
						normal:{
							show:true,
							position:'right',
							formatter: '{c}%',
							textStyle:{
								color:'#666'
							}
						}
					}
				}
			]
		};
		myChart = echarts.init(document.getElementById('EcharBox'));
		myChart.setOption(option);
	}
	</script>

宿雨眠云原创

不见长安见晨雾

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Echarts柱状折线图

<html><head><style> #EcharBox { margin: 0 auto; width: 95%; height: 400px; }</style></head><body> <div id="EcharBox"></div></body><s
复制链接

扫一扫