87Echarts - 散点图（Visual interaction with stream）

效果图

源代码

	
		
		ECharts
		
		
	

	
		
		

		
			// 基于准备好的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);