效果图
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option;
$.getJSON('data/asset/data/house-price-area2.json', function (data) {
var option = {
title: {
text: 'Dispersion of house price based on the area',
left: 'center',
top: 0
},
visualMap: {
min: 15202,
max: 159980,
dimension: 1,
orient: 'vertical',
right: 10,
top: 'center',
text: ['HIGH', 'LOW'],
calculable: true,
inRange: {
color: ['#f2c31a', '#24b7f2']
}
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'cross'
}
},
xAxis: [{
type: 'value'
}],
yAxis: [{
type: 'value'
}],
series: [{
name: 'price-area',
type: 'scatter',
symbolSize: 5,
// itemStyle: {
// normal: {
// borderWidth: 0.2,
// borderColor: '#fff'
// }
// },
data: data
}]
};
myChart.setOption(option);
</script>
</body>
</html>