echarts中多y轴图像(柱,折)

先看看效果吧:

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);

 

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

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浩星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值