配置项如下
var barData = [];
for (var i = 0; i < 12; i++) {
barData.push(0.1 + Math.random(i * 100));
}
var lineData = [];
var lineBase = 5;
for (var i = 0; i < 120; i++) {
lineBase += 2 * (Math.random() - 0.5);
lineData.push([i, lineBase]);
}
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
}
}
},
legend: {
data: ['蒸发量', '降水量', '平均温度']
},
grid: {
height: 300
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisPointer: {
type: 'shadow'
},
axisLine: {show: false},
axisTick: {show: false},
},
{
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
}
],
yAxis: [{
type: 'value',
axisLine: {show: false},
axisTick: {show: false},
},
{
type: 'value',
axisLine: {show: false},
axisTick: {show: false},
splitLine: {
show: false
}
}
],
series: [{
name: '降水量',
type: 'bar',
itemStyle: {
color: 'rgb(122,182,216)'
},
data: barData
},
{
name: '平均温度',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
showSymbol: false,
lineStyle: {
color: 'rgb(113,148,215)',
width: 3
},
data: lineData
}
]
};