Echarts多系多y轴的配置
程序员文章站
2022-07-14 22:59:36
...
有时候在一个图形中需要显示的对象多样化，一个y轴并不能满足我们的需求。这时我们就需要配置多个y轴
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多系柱状图</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1200px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var colors = ['#FD2446','#248EFD','#C916F2','#6669B1'];//自定义一个颜色数组，多系时会按照顺序使用自己定义的颜色数组，若不定义则使用默认的颜色数组
var months = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
// 指定图表的配置项和数据
var option = {
color:colors,
title: {//标题，可以自定义标题的位置和样式
text: '某地区的、单位数、职工人数、和平均工资'
},
legend: {//图例，每一个系列独有一个图例，注意：图例的名字必须跟下面series数组里面的name一致。
data: ['单位数','职工数', '平均工资' ],
},
tooltip: {//鼠标悬浮时的样式，可自定义
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'cross' // 默认为直线，可选为：'line' | 'shadow'
}
},
xAxis: {//x轴的配置
data: months
},
yAxis: [
{//第一个y轴位置在左侧
position:'left',
type : 'value',
name: '单位数',
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value} 个'
}
},
{//第二个y轴在右侧
position:'right',
type : 'value',
name: '职工数',
axisLine: {
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value} 人'
}
},
{//第三个y轴也在右侧，距第二个70个像素
position:'right',
offset:70,
type : 'value',
name: '平均工资',
axisLine: {
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value} 万元'
}
}
],
toolbox: {//工具栏组件
show : true,
feature : {
magicType : {show: true, type: ['line', 'bar']},//柱状图和折线图相互转换
dataView:{
show: true,
title: '某地区的、单位数、职工人数、和平均工资'
}
},
saveAsImage : {show:true},//保存图片
restore : {show: true}//还原
},
series:[
{
name:'单位数',
type:'bar',
barMaxWidth:'20%',
label:{
normal:{
show:true,
position:'top'
}
},
yAxisIndex:'0',//使用第一个y轴，序号从0开始
data: [23,27,28,30,34,36,39,41,45,46,56,60]
},
{
name:'职工数',
type:'bar',
barMaxWidth:'20%',
label:{
normal:{
show:true,
position:'top'
}
},
yAxisIndex:'1',//使用第二个y轴
data:[1500,1700,1750,1800,1850,1900,1910,1941,1980,2000,2100,2200]
},
{
name:'平均工资',
type:'bar',
barMaxWidth:'20%',
label:{
normal:{
show:true,
position:'top'
}
},
yAxisIndex:'2',//使用第三个y轴
data:[3500,3600,4200,4800,5500,6500,4900,3500,5400,5500,6500,7000]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>下面是效果图：
上一篇： 跟我学hadoop学习5
下一篇： 跟我学hadoop学习3