现有需求,绘制如下图1
图1
实现方法是,先绘制图2
图2
对div旋转90度即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
</head>
<body>
<div id="bar" style="height:230px; width:800px;margin-left:300px;margin-top:300px; transform:rotate(90deg);">
</div>
<!-- 需要引用的JS -->
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
showBar();
});
function showBar(){
title = '多 Y 轴示例';
var colors = ["#98C1AE","#B56434","#556B2F"];
option = {
color: colors,
tooltip: {//提示框鼠标放轴上的时候显示,默认不显示配置以下属性可显示
trigger: 'axis',//x轴触发
axisPointer: {//坐标轴指示器配置项
type: 'cross'
}
},
grid: { // 控制图的大小,调整下面这些值就可以,
x: 40,
y: 40,
x2: 40,
y2: 50
},
legend: {
data:['Co-paper','Co-author','Co-Institute'],
textStyle:{
fontSize: 15
},
},
xAxis:
{
type: 'category',//value数值轴'category' 类目轴'time' 时间轴'log' 对数轴
// name: '年份',
// nameTextStyle:{fontSize: 15},
axisTick: {//坐标轴刻度相关设置。
alignWithLabel: true
},
data: ['1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001',"2002","2003","2004","2005","2006","2007","2008","2009","2010","2011","2012","2013","2014","2015","2016","2017","2018"],
axisLabel: {
show: true,
rotate:90,
textStyle: {
fontSize: 15,
}
}
}
,
yAxis: [//多个y轴
{
type: 'value',
axisLabel: {
formatter: '{value} ',
rotate:90,
textStyle:{
fontSize: 15
}
},
textStyle:{
fontSize: 15
}
},
{
type: 'value',
// name: 'Co-author',
min: 0,//最小刻度
max: 150,//最大刻度
offset: 150,//偏移量
// position: 'right',
// axisLine: {
// lineStyle: {
// color: colors[0]
// }
// },
axisLabel: {
rotate:90,
formatter: '{value} ',textStyle:{
fontSize: 15
}
},
textStyle:{
fontSize: 15
}
},
{
type: 'value',
// name: 'Co-Institute',
min: 0,
max: 150,
// position: 'right',
offset: 150,//偏移量
// axisLine: {
// lineStyle: {
// color: colors[1]
// }
// },
axisLabel: {
rotate:90,
formatter: '{value} ',
textStyle:{
fontSize: 15
}
},
textStyle:{
fontSize: 15
}
}
],
series: [//顺序和yAxis对应
{
name:'Co-paper',
type:'line',
yAxisIndex: 2,
data:[1,5,6,1,5,3,8,5,0,11,8,30,48,72,39,54,65,57,57,63,69,84,124,105,109,112,150,138,59]
},
{
name:'Co-author',
type:'line',
data:[1,3,4,1,4,2,6,4,0,10,6,19,19,34,20,30,35,32,27,31,28,38,66,54,61,51,77,69,31]
},
{
name:'Co-Institute',
type:'bar',
yAxisIndex: 1,//使用的 y 轴的 index,默认为0
data:[1,1,2,1,3,1,4,3,0,9,4,10,10,13,7,12,15,10,10,13,7,13,21,20,20,13,22,26,12]
}
]
};
var chart = echarts.init(document.getElementById('bar'));
chart.setOption(option);
}
</script>
</html>