123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <script src="lib/esl.js"></script>
- <script src="lib/config.js"></script>
- <script src="lib/jquery.min.js"></script>
- <script src="lib/facePrint.js"></script>
- <script src="lib/testHelper.js"></script>
- <link rel="stylesheet" href="lib/reset.css">
- </head>
- <body>
- <style>
- .test-title {
- background: #146402;
- color: #fff;
- }
- </style>
- <div id="main0"></div>
- <script>
- require([
- 'echarts', 'map/js/china'
- ], function (echarts) {
- $.getJSON('./data/weibo.json', function (weiboData) {
- weiboData = weiboData.map(function (serieData, idx) {
- var px = serieData[0] / 1000;
- var py = serieData[1] / 1000;
- var res = [[px, py]];
- for (var i = 2; i < serieData.length; i += 2) {
- var dx = serieData[i] / 1000;
- var dy = serieData[i + 1] / 1000;
- var x = px + dx;
- var y = py + dy;
- res.push([x.toFixed(2), y.toFixed(2), 1]);
- px = x;
- py = y;
- }
- return res;
- });
- var option = {
- backgroundColor: '#404a59',
- title : {
- text: '微博签到数据点亮中国',
- subtext: 'From ThinkGIS',
- sublink: 'http://www.thinkgis.cn/public/sina',
- left: 'center',
- top: 'top',
- textStyle: {
- color: '#fff'
- }
- },
- tooltip: {},
- legend: {
- left: 'left',
- data: ['强', '中', '弱'],
- textStyle: {
- color: '#ccc'
- }
- },
- geo: {
- map: 'china',
- roam: true,
- label: {
- emphasis: {
- show: false
- }
- },
- itemStyle: {
- normal: {
- areaColor: '#323c48',
- borderColor: '#111'
- },
- emphasis: {
- areaColor: '#2a333d'
- }
- }
- },
- series: [{
- name: '弱',
- type: 'scatter',
- coordinateSystem: 'geo',
- symbolSize: 1,
- large: true,
- itemStyle: {
- normal: {
- shadowBlur: 2,
- shadowColor: 'rgba(37, 140, 249, 0.8)',
- color: 'rgba(37, 140, 249, 0.8)'
- }
- },
- data: weiboData[0]
- }, {
- name: '中',
- type: 'scatter',
- coordinateSystem: 'geo',
- symbolSize: 1,
- large: true,
- itemStyle: {
- normal: {
- shadowBlur: 2,
- shadowColor: 'rgba(14, 241, 242, 0.8)',
- color: 'rgba(14, 241, 242, 0.8)'
- }
- },
- data: weiboData[1]
- }, {
- name: '强',
- type: 'scatter',
- coordinateSystem: 'geo',
- symbolSize: 1,
- large: true,
- itemStyle: {
- normal: {
- shadowBlur: 2,
- shadowColor: 'rgba(255, 255, 255, 0.8)',
- color: 'rgba(255, 255, 255, 0.8)'
- }
- },
- data: weiboData[2]
- }]
- };
- testHelper.create(echarts, 'main0', {
- option: option,
- height: 500
- });
- });
- });
- </script>
- </body>
- </html>
|