Threat Popularity

by gnijuohz

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/echarts/3.8.5/echarts.js"></script>
<div id="main" style="width: 800px;height:600px;"></div>

JavaScript

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

option = {
    baseOption: {
        backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
            offset: 0,
            color: '#f7f8fa'
        }, {
            offset: 1,
            color: '#cdd0d5'
        }]),
        title: {
            text: 'Threat Popularity'
        },
        tooltip: {
            trigger: 'item',

            formatter: function(param){
                var level = '<b style="color: yellow">Medium</b>';
                if (param.value[3] == 4) {
                    level = '<b style="color: red">Critical</b>';
                } else if (param.value[3] == 3) {
                    level = '<b style="color: orange">High</b>';
                }

                return [
                    'Name: <b>' + param.value[2] + '</b><hr size=1 style="margin: 3px 0">',
                    'Severity: ' + level + '<br/>',
                    'Category: ' + param.value[4] + '<br/>',
                    'Threat Score: ' + param.value[1] + '<br/>',
                    'Incident: ' + param.value[0] + '<br/>',
                ].join('');
            }
        },
        xAxis: {
            type: 'log',
            name: 'Incidents',
            splitLine: {
                show: false,
            },
            
        },
        yAxis: {
            type: 'value',
            name: 'Threat Score',
            splitLine: {
                show: false
            },
            splitArea: {
                show: true
            }
        },
        timeline: {
            // y: 0,
            show: false,
            axisType: 'category',
            // realtime: false,
            // loop: false,
            autoPlay: false,
            currentIndex: 0,
            playInterval: 10000,
            // controlStyle: {
            //     position: 'left'
            // },
            data: ['Overall', 'Critical', {
                value:...