options={
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
var unitMap = {
'Email': 'ml',
'Union Ads': 'ml',
'Video Ads': 'ml',
'Direct': 'ml',
'Search Engine': 'ml',
'Search': 'ml'
};
var htmlStr = params[0].name + '<br>';
for (var i = 0; i < params.length; i++) {
var seriesName = params[i].seriesName;
var value = params[i].value;
var unit = unitMap[seriesName] || '';
htmlStr += seriesName + '('+unit+'): ' + value +'<br>';
}
return htmlStr;
}
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine','Search']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
right: '50px',
show: true,
feature: {
saveAsImage: {},
magicType: { type: ['line', 'bar'] },
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: [{
alignTicks: true,
nameLocation: 'center',
scale: true,
name: '蒸发量 ml',
type: 'value',
position: 'right',
offset: 0, // y轴位置的偏移量
axisLine: {
show: true,
lineStyle: {
color: 'green'
}
},
axisLabel: {
formatter: '{value}'
},
nameTextStyle: {
padding: [20, 0, 0, 0],
},
},{
alignTicks: true,
nameLocation: 'center',
scale: true,
type: 'value',
name: '甲醛 ml',
position: 'right',
offset: 50, // y轴位置的偏移量
axisLine: {
show: true,
lineStyle: {
color: 'blue'
}
},
axisLabel: {
formatter: '{value}'
},
nameTextStyle: {
padding: [20, 0, 0, 0],
},
},{
alignTicks: true,
nameLocation: 'center',
scale: true,
type: 'value',
name: '甲烷 ml',
position: 'right',
offset: 100, // y轴位置的偏移量
axisLine: {
show: true,
lineStyle: {
color: 'red'
}
},
axisLabel: {
formatter: '{value}'
},
nameTextStyle: {
padding: [20, 0, 0, 0],
},
},
{
alignTicks: true,
nameLocation: 'center',
scale: true,
type: 'value',
name: '降水量 ml',
position: 'left',
offset: 0, // y轴位置的偏移量
axisLine: {
show: true,
lineStyle: {
color: 'red'
}
},
axisLabel: {
formatter: '{value}'
},
nameTextStyle: {
padding: [0, 0, 20, 0],
},
},
{
alignTicks: true,
nameLocation: 'center',
scale: true,
type: 'value',
name: '温度°C',
position: 'left',
offset: 50, // y轴位置的偏移量
axisLine: {
show: true,
lineStyle: {
color: 'blue'
}
},
axisLabel: {
formatter: '{value} '
},
nameTextStyle: {
padding: [0, 0, 20, 0],
},
},{
alignTicks: true,
nameLocation: 'center',
scale: true,
type: 'value',
name: '氧气°C',
position: 'left',
offset: 100, // y轴位置的偏移量
axisLine: {
show: true,
lineStyle: {
color: 'pink'
}
},
axisLabel: {
formatter: '{value} '
},
nameTextStyle: {
padding: [0, 0, 20, 0],
},
},
],
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210],
yAxisIndex: 0,
lineStyle: {
color: 'red'
}
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310],
yAxisIndex: 1
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410],
yAxisIndex: 2
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410],
yAxisIndex: 3
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410],
yAxisIndex: 4
},
{
name: 'Search',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410],
yAxisIndex: 5
}
]
};
echarts折线图多y轴
于 2023-09-20 16:23:54 首次发布