```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>
</head>
<body>
<div id="carBrandChartAvgRun" style="width:1000px;height:500px;"></div>
<script type="text/javascript">
var myCarBrandAvgRunChart = echarts.init(document.getElementById('carBrandChartAvgRun'));
var optionCarBrandAvgRun = {
title: {
text: "各品牌车辆运营平均情况",
top: "top",
left: "40%"
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
x: 'center',
y: 'bottom',
data: ['里程(公里)', '时间(小时)']
},
calculable: true,
grid: {
left: '3%',
right: '4%',
top: '7%',
bottom: "15%",
containLabel: true
},
xAxis: [{
axisLabel: {
show: true,
rotate: -45,
textStyle: {
fontFamily: "微软雅黑",
fontSize: 12
}
},
type: 'category',
name: '品牌',
data: ["雷萨起重机", "雷萨泵送", "欧辉", "奥铃", "欧马可", "时代", "欧曼"]
}],
yAxis: [{
type: 'value',
name: '里程(公里)'
}, {
type: 'value',
name: '时间(小时)'
}],
series: [
{
name: '里程(公里)',/*和图例legend关联*/
type: 'bar',
yAxisIndex: 0,/*坐标系左侧y轴*/
data: [69, 1152, 668, 1414, 2437, 1675, 3154],
itemStyle: {
normal: {
color: "green"
}
},
markPoint: {
data: [{yAxis: 69, xAxis: "雷萨起重机"},
{yAxis: 1152, xAxis: "雷萨泵送"},
{yAxis: 668, xAxis: "欧辉"},
{yAxis: 1414, xAxis: "奥铃"},
{yAxis: 2437, xAxis: "欧马可"},
{yAxis: 1675, xAxis: "时代"},
{yAxis: 3154, xAxis: "欧曼"}
]
}/*,
markLine: {
data: [{yAxis: 69},
{yAxis: 1152},
{yAxis: 668},
{yAxis: 1414},
{yAxis: 2437},
{yAxis: 1675},
{yAxis: 3154}
]
}*/
},
{
name: '时间(小时)',/*和图例legend关联*/
type: 'line',
yAxisIndex: 1,/*坐标系右侧y轴*/
data: [131, 41, 111, 51, 71, 171, 71],
label: {
normal: {
color: "black",
show: false
}
},
itemStyle: {
normal: {
color: "blue"
}
},
lineStyle: {
normal: {
color: "yellow"
}
},
markPoint: {
data: [{yAxis: 131, xAxis: "雷萨起重机"},
{yAxis: 41, xAxis: "雷萨泵送"},
{yAxis: 111, xAxis: "欧辉"},
{yAxis: 51, xAxis: "奥铃"},
{yAxis: 71, xAxis: "欧马可"},
{yAxis: 171, xAxis: "时代"},
{yAxis: 71, xAxis: "欧曼"}
]
}/*,
markLine: {
data: [{yAxis: 131},
{yAxis: 41},
{yAxis: 111},
{yAxis: 51},
{yAxis: 71},
{yAxis: 171},
{yAxis: 71}
]
}*/
}
]
};
myCarBrandAvgRunChart.setOption(optionCarBrandAvgRun);
</script>
</body>
</html>
```