158 lines
5.7 KiB
HTML
Generated
158 lines
5.7 KiB
HTML
Generated
|
||
<!--
|
||
Licensed to the Apache Software Foundation (ASF) under one
|
||
or more contributor license agreements. See the NOTICE file
|
||
distributed with this work for additional information
|
||
regarding copyright ownership. The ASF licenses this file
|
||
to you under the Apache License, Version 2.0 (the
|
||
"License"); you may not use this file except in compliance
|
||
with the License. You may obtain a copy of the License at
|
||
|
||
http://www.apache.org/licenses/LICENSE-2.0
|
||
|
||
Unless required by applicable law or agreed to in writing,
|
||
software distributed under the License is distributed on an
|
||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||
KIND, either express or implied. See the License for the
|
||
specific language governing permissions and limitations
|
||
under the License.
|
||
-->
|
||
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<script src="lib/simpleRequire.js"></script>
|
||
<script src="lib/config.js"></script>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
</head>
|
||
<body>
|
||
<style>
|
||
html, body, #main {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
}
|
||
#main {
|
||
background: #fff;
|
||
}
|
||
</style>
|
||
<div id="main"></div>
|
||
<script>
|
||
|
||
require(['echarts'], function (echarts) {
|
||
|
||
var chart = echarts.init(document.getElementById('main'));
|
||
|
||
var data = [
|
||
[5000, 10000, 6785.71],
|
||
[4000, 10000, 6825],
|
||
[3000, 6500, 4463.33],
|
||
[2500, 5600, 3793.83],
|
||
[2000, 4000, 3060],
|
||
[2000, 4000, 3222.33],
|
||
[2500, 4000, 3133.33],
|
||
[1800, 4000, 3100],
|
||
[2000, 3500, 2750],
|
||
[2000, 3000, 2500],
|
||
[1800, 3000, 2433.33],
|
||
[2000, 2700, 2375],
|
||
[1500, 2800, 2150],
|
||
[1500, 2300, 2100],
|
||
[1600, 3500, 2057.14],
|
||
[1500, 2600, 2037.5],
|
||
[1500, 2417.54, 1905.85],
|
||
[1500, 2000, 1775],
|
||
[1500, 1800, 1650]
|
||
];
|
||
var cities = ['北京', '上海', '深圳', '广州', '苏州', '杭州', '南京', '福州', '青岛', '济南', '长春', '大连', '温州', '郑州', '武汉', '成都', '东莞', '沈阳', '烟台'];
|
||
var barHeight = 50;
|
||
|
||
chart.setOption({
|
||
title: {
|
||
text: '在中国租个房子有多贵？',
|
||
subtext: '市中心一室月租费（数据来源：https://www.numbeo.com）'
|
||
},
|
||
legend: {
|
||
show: true,
|
||
data: ['价格范围', '均值']
|
||
},
|
||
grid: {
|
||
top: 100
|
||
},
|
||
angleAxis: {
|
||
type: 'category',
|
||
data: cities
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
formatter: function (params) {
|
||
var id = params.dataIndex;
|
||
return cities[id] + '<br>最高：' + data[id][0] + '<br>最低：' + data[id][1] + '<br>平均：' + data[id][2];
|
||
}
|
||
},
|
||
radiusAxis: {
|
||
},
|
||
polar: {
|
||
},
|
||
series: [{
|
||
type: 'bar',
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'transparent'
|
||
}
|
||
},
|
||
data: data.map(function (d) {
|
||
return d[0];
|
||
}),
|
||
coordinateSystem: 'polar',
|
||
stack: '最大最小值',
|
||
silent: true
|
||
}, {
|
||
type: 'bar',
|
||
data: data.map(function (d) {
|
||
return d[1] - d[0];
|
||
}),
|
||
coordinateSystem: 'polar',
|
||
name: '价格范围',
|
||
stack: '最大最小值'
|
||
}, {
|
||
type: 'bar',
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'transparent'
|
||
}
|
||
},
|
||
data: data.map(function (d) {
|
||
return d[2] - barHeight;
|
||
}),
|
||
coordinateSystem: 'polar',
|
||
stack: '均值',
|
||
silent: true,
|
||
z: 10
|
||
}, {
|
||
type: 'bar',
|
||
data: data.map(function (d) {
|
||
return barHeight * 2
|
||
}),
|
||
coordinateSystem: 'polar',
|
||
name: '均值',
|
||
stack: '均值',
|
||
barGap: '-100%',
|
||
z: 10
|
||
}],
|
||
legend: {
|
||
show: true,
|
||
data: ['A', 'B', 'C']
|
||
}
|
||
});
|
||
|
||
chart.on('click', function (params) {
|
||
console.log(params);
|
||
});
|
||
|
||
window.onresize = chart.resize;
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|