echarts中多y轴图像（柱，折）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_41619796/article/details/88665748

先看看效果吧：

var myChart = echarts.init(document.getElementById('demo_echarts_zyyh'));//放入的id
	
	var colors = ['#e6bcff', '#a3ffcd', '#fefefe'];

	option = {
		color: colors,
		textStyle:{
			color: '#fff'//字体颜色
		},

		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross'
			},
			textStyle:{
				color: '#fff'//字体颜色
			},
		},
		grid: {
			right: '20%',
			top:'20%'
		},
		legend: {
			// orient: 'horizontal',
			top: 0,
			right: 120,
			itemWidth: 36,
			itemHeight: 36,
			itemGap: 60,
			textStyle:{
			   color: '#fff',//字体颜色
		   }
	   },
		xAxis: [
			{
				type: 'category',
				axisTick: {
					alignWithLabel: true
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: 'rgba(255,255,255,.4)'
					}
				},
				axisLabel: {
					textStyle: {
						color: '#fff',
					}
				},
				data: ['商场','超市','学校','养老院','福利院']
			}
		],
		yAxis: [//多y轴时，用数组加对象的方式来实现
			{
				type: 'value',
				name: '电压：V',
				nameGap: 45,//name距离顶部位置
				nameTextStyle:{
					padding: [0, 0, 0, -40]//name的位置
				},
				min: 0,
				max: 100,
				interval : 25,//强制设置坐标轴分割间隔。
				axisTick:{       //x轴刻度线
					show:false
				},
				position: 'left',
				axisLine: {
					show:false,
					lineStyle: {
						color: colors[0]
					}
				},
				axisLabel: {
					formatter: '{value} ',
					textStyle: {
						color: '#fff',
					}
				}
			},
			{
				type: 'value',
				name: '电流：A',
				nameGap: 45,
				min: 0,
				max: 20,
				interval : 5,//强制设置坐标轴分割间隔。
				axisTick:{       //x轴刻度线
					show:false
				},
				position: 'right',
				axisLine: {
					show:false,
					lineStyle: {
						color: colors[1]
					}
				},
				axisLabel: {
					formatter: '{value} ',
					textStyle: {
						color: '#fff'
					}
				}
			},
			{
				type: 'value',
				name: '温度：°C',
				nameGap: 45,
				min: 0,
				max: 100,
				interval : 25,//强制设置坐标轴分割间隔。
				axisTick:{       //x轴刻度线
					show:false
				},
				position: 'right',
				offset: 160,//跟right值一样。向右的距离
				axisLine: {
					show:false,
					lineStyle: {
						color: colors[2]
					}
				},
				axisLabel: {
					formatter: '{value} ',
					textStyle: {
						color: '#fff'
					}
				}
			}
		],
		series: [
			{
				name:'电压',
				type:'bar',
				barWidth : 54,//柱图宽度
				data:[60, 30,40, 35, 45]
			},
			{
				name:'电流',
				type:'bar',
				barWidth : 54,//柱图宽度
				yAxisIndex: 1,
				data:[5,11, 9, 12, 8]
			},
			{
				name:'温度',
				type:'line',
				yAxisIndex: 2,
				smooth:true,
				symbol: 'circle',     //设定为实心点
				symbolSize: 30,   //设定实心点的大小
				data:[40, 50, 45, 52, 30],
				lineStyle:{
					normal:{
						width:10
					}
				}
			}
		]
	};

	myChart.setOption(option);