有需要用到echarts,接触到双柱形图,被坐标轴快玩死了。
差距一个数量级。几番探索明白了:
需要
yAxisIndex: 1,
官方文档: http://echarts.baidu.com/option.html#yAxis.gridIndex
源文件如下:
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>农家书屋面积及藏书量双柱形图</title>
</head>
<body style="height:80%; width:100%;margin: 0 auto;">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts-en.common.js"></script>
<script>
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
// app.title = '嵌套环形图';
option = {
title: {
text: '农家书屋面积及藏书量双柱形图',
subtext: '面积总数:970.00(㎡) 总藏书:51490(本)',
x: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
saveAsImage: { show: true }
}
},
legend: {
data: ['面积', '藏书'],
bottom: 0
},
xAxis: [
{
type: 'category',
data: ['赵巷镇', '徐泾镇', '华新镇', '重固镇', '白鹤镇', '朱家角镇', '练塘镇', '金泽镇', '夏阳街道', '盈浦街道', '香花桥街道'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '面积(㎡)',
min: 0,
max: 1600,
interval: 400,
axisLabel: {
formatter: '{value}'
},
nameLocation:'center',
nameGap:65
},
{
type: 'value',
name: '藏书(本)',
min: 0,
max: 60000,
// interval: 15000,
axisLabel: {
formatter: '{value}'
},
nameLocation:'center',
nameGap:65,
nameRotate:-90
}
],
series: [
{
name: '面积',
type: 'bar',
data: [229.6, 530, 684, 296, 707, 970, 796, 1366, 290, 60, 499],
barWidth: '30%'
},
{
name: '藏书',
type: 'bar',
yAxisIndex: 1,
data: [13061, 17500, 32178, 13273, 33075, 51490, 47863, 34493, 13500, 3200, 23498],
barWidth: '30%'
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
作为一个前端菜鸟,有些官方的东西就算意思上明白了,还是不知道该怎么用。或者也根本不知道自己哪部分不会。
从实践中发现问题吧。