| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="../common/esl.js"></script> |
| <script src="../common/config.js"></script> |
| <link rel="stylesheet" href="../common/reset.css"> |
| </head> |
| <body> |
| <style> |
| </style> |
| <div id="main"></div> |
| |
| <script> |
| |
| define('init', function (require) { |
| |
| var echarts = require('echarts'); |
| require('../../asset/map/js/china'); |
| |
| var myChart; |
| |
| return function (weiboData) { |
| myChart = echarts.init(document.getElementById('main')); |
| |
| if (typeof (weiboData) === 'string') { |
| weiboData = JSON.parse(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, y, 1]); |
| |
| px = x; |
| py = y; |
| } |
| return res; |
| }); |
| myChart.setOption({ |
| legend: { |
| left: 'left', |
| data: ['强', '中', '弱'], |
| textStyle: { |
| color: '#ccc' |
| } |
| }, |
| geo: { |
| name: '强', |
| type: 'scatter', |
| map: 'china', |
| 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] |
| }] |
| }); |
| }; |
| }); |
| |
| require(['init', 'data/weibo.json'], function (init, data) { |
| init(data); |
| }); |
| |
| </script> |
| </body> |
| </html> |
