Threat Activity Map

by kelvinau

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.8.5/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<div id="main" style="width: 100%;height:90vh;"></div>

JavaScript

// top 10 virus data
var vData = [];

// top 10 country data
var cData = [];

// top 10 industry data
var iData = [];


var urls = [
    'https://api.myjson.com/bins/oank9',
    'https://api.myjson.com/bins/w1afd',
    'https://api.myjson.com/bins/fd5hl'
];






$.get('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95368/world.json', function (worldJson) {
    echarts.registerMap('world', worldJson);
    $.when($.get(urls[0]), $.get(urls[1]), $.get(urls[2])).then(function (resp1, resp2, resp3) {
   		vData = resp1[0];
      cData = resp2[0];
      iData = resp3[0];
      loadChart();
		});
		
});



 function loadChart() {
 				// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        


        var option = {
          baseOption: {
            animationDurationUpdate: 1000,
            animationEasingUpdate: 'quinticInOut',
            timeline: {
              axisType: 'category',
              orient: 'vertical',
              autoPlay: true,
              inverse: true,
              playInterval: 5000,
              left: null,
              right: 10,
              top: 20,
              bottom: 20,
              width: 100,
              height: null,
              label: {
                normal: {
                  textStyle: {
                    color: '#ddd'
                  }
                },
                emphasis: {
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              symbol: 'none',
              lineStyle: {
                color: '#555'
              },
              checkpointStyle: {
                color: '#b7e117',
                borderColor: '#777',
                borderWidth: 1
              },
              controlStyle: {
                showNextBtn: false,
                showPrevBtn: false,
                normal: {
                  color: '#b7e117',
                  borderColor: '#b7e117'
            ...