| /* |
| title: Visual interaction with stream |
| category: scatter |
| titleCN: 流式渲染和视觉映射操作 |
| difficulty: 5 |
| */ |
| |
| // Thanks to: 若怀冰 |
| // http://gallery.echartsjs.com/explore.html?u=bd-16906679 |
| // http://gallery.echartsjs.com/editor.html?c=xHJw-hVqjW |
| |
| $.getJSON(ROOT_PATH + '/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); |
| }); |