多Y轴,自定义气泡(折柱混合)echarts 柱状配置项内容和展示

多Y轴,自定义气泡(折柱混合)

配置项如下
      //多Y轴,自定义气泡(折柱混合)
app.title = '折柱混合';

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    grid: {
		top:'8%', 
		right: '15%',
		left: '10%',
		bottom: '5%'
	},
    legend: {
        data:['降雪量','降水量','蒸发量','平均温度']
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisPointer: {
                type: 'shadow'
            },
            axisLabel: {
				interval: 0,
				rotate: 40,
				margin: 10,
				textStyle:{ fontSize:10, color:'red',},
			},
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '水量(ml)',
            min: 0,
            max: 2500,
            interval: 250,
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} °C'
            }
        },
        {
            type: 'value',
            name: '雪量(cm)',
            offset: 60,
            min: 0,
            max: 10,
            interval: 2,
            axisLabel: {
                formatter: '{value}'
            }
        },
    ],
    series: [
        {
            name:'蒸发量',
            type:'bar',
            data:[222, 504, 887, 1323, 1395, 1676, 2235, 2062, 1900, 1020, 726, 300],
            markPoint : {
                data : [
                    {name : '蒸发', value : 1323, xAxis: 3, yAxis: 1323,symbolSize:80},
                    {name : '蒸发', value : 1676, xAxis: 5, yAxis: 1676,symbolSize:70},
                ],
                itemStyle:{  
                    normal:{
                    	label:{  
                            show: true,  
                            formatter:function (data) {
				                 var data = (data.value || 0).toString(), result = '';
				                 while (data.length > 3) {
				                 	result = ',' + data.slice(-3) + result;
				                 	data= data.slice(0,data.length - 3);
				                 }
				                 if (data) { result = data + result; }
				                 return result;
			                 },     
                          }  
                    }  
                },
            },
        },
        {
            name:'降水量',
            type:'bar',
            data:[265, 544, 999, 1126, 1428, 1670, 2175, 2182, 1948, 1218, 826, 422],
            markPoint : {
                data : [
                    {name : '降水', value : 1323, xAxis: 9, yAxis: 1218,symbolSize:120},
                ],
                itemStyle:{  
                    normal:{
                    	label:{  
                            show: true,  
                            formatter:function (data) {
				                 var data = (data.value || 0).toString(), result = '';
				                 while (data.length > 3) {
				                 	result = ',' + data.slice(-3) + result;
				                 	data= data.slice(0,data.length - 3);
				                 }
				                 if (data) { result = data + result; }
				                 return '降水\n\n'+result+'\n\nml';
			                 },     
                          }  
                    }  
                },
            },
        },
        {
            name:'平均温度',
            type:'line',
            yAxisIndex: 1,
            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
            markPoint : {
                data : [
                    {name : '年最高', value : 23.4, xAxis: 7, yAxis: 23.4,symbolSize:100},
                    {name : '年最低', value : 2.0, xAxis: 0, yAxis: 2.0}
                ],
                itemStyle:{  
                    normal:{
                    	label:{  
                            show: true,  
                            formatter:function (data) {
				                 return data.value+' °C';
			                 },     
                          }  
                    }  
                },
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            },
            itemStyle: {
                normal: {
                    lineStyle: {
                        width: 5,
                        type:'dotted',
                    }
            	},
            },
        },
        {
            name:'降雪量',
            type:'line',
            yAxisIndex: 2,
            data:[4.0, 3.2, 0, 0, 0, 0, 0, 0, 0, 0, 1.0, 4.2]
        }
    ]
};

    
截图如下