echarts example

by Ganesh_Babu_469

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
<script src=" https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="main" style="width: 100%;height:400px;"></div>

JavaScript

/* var bcBySeriesIndex = ['B', 'C', 'D', 'B','C','D']; */
var bcBySeriesIndex = ['total', 'suppressed', 'total', 'suppressed', 'total', 'suppressed', 'total', 'suppressed'];
var icon1 = 'image://https://fixstream.com/wp-content/uploads/2017/01/Logo_Fixstream_Tagline_orange_Ring-Reverse-2017-copy-3.png';
option = {
    color: ['red', '#ffda00', '#ff931e'], 
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        boundaryGap: ['20%', '20%'],
        formatter: function (params) {
            var html = [];
            
            var category = {};
            echarts.util.each(params, function (param) {
                var catName = param.seriesName;
                var bc = bcBySeriesIndex[param.seriesIndex];
                if (!category[catName]) {
                    category[catName] = {};
                }
                if(catName !== 'suppressed' ){
                category[catName][bc] = param.value;
                }else if(param.seriesIndex === 1){
                 category['critical'][bc] = param.value;
                }else if(param.seriesIndex === 3){
                 category['major'][bc] = param.value;
                }else if(param.seriesIndex === 5){
                 category['minor'][bc] = param.value;
                }
            });
           // console.log(category);
            echarts.util.each(category, function (cate, key) {
                html.push(
                    '<tr>',
                    '<td>', key, '</td>',
                    '<td>', cate.total, '</td>',
                    '<td>', cate.suppressed, '</td>',
                    '</tr>'
                );
            })
            
            return '<table border=1><tbody>'
                + '<tr><td></td><td>Total</td><td>suppressed</td></tr>' 
                + html.join('') 
                + '</tbody></table>';
        }
    },
     legend:...