ProfileECharts Gallery

20:11:45图表已生成
代码
var data = [];
var datas = [];
var dataCount = 10;
var startTime = +new Date();
// var startTime = 1523948895311;
// console.log(startTime);
var categories = ['A01', 'A02', 'A03'];
var types = [
    {name: 'JS Heap', color: '#7b9ce1'},
    {name: 'Documents', color: '#bd6d6c'}
    // {name: 'Nodes', color: '#75d874'},
    // {name: 'Listeners', color: '#e0bc78'},
    // {name: 'GPU Memory', color: '#dc77dc'},
    // {name: 'GPU', color: '#72b362'}
];

// Generate mock data
echarts.util.each(categories, function (category, index) {
    var baseTime = startTime;
    for (var i = 0; i < types.length; i++) {
        var endTime = startTime + Math.round(Math.random() * 2000);
        var duration = Math.round(Math.random() * 10000);
        data.push({
            name: types[i].name,
            value: [
                index,
                baseTime,
                baseTime += duration,
                '北京',
                '上海'
            ],
            itemStyle: {
                normal: {
                    color: types[i].color
                }
            }
        });
    }

});
datas = [{
    name: 'JS Heap',
    value: [
        0,
        1523963808292,
        1523963818175,
        '北京',
        '上海'
    ],
    itemStyle: {
        normal: {
            color: '#7b9ce1'
        }
    }
},
// {
//     name: 'Documents',
//     value: [
//         0,
//         1523963809793,
//         1523963810379,
//         '广州',
//         '深圳'
//     ],
//     itemStyle: {
//         normal: {
//             color: '#bd6d6c'
//         }
//     }
// }, 
// {
//     name: 'JS Heap',
//     value: [
//         1,
//         1523963805999,
//         1523963813589,
//         '重庆',
//         '北京'
//     ],
//     itemStyle: {
//         normal: {
//             color: '#7b9ce1'
//         }
//     }
// }, {
//     name: 'Documents',
//     value: [
//         1,
//         1523963816217,
//         1523963825558,
//         '杭州',
//         '深圳'
//     ],
//     itemStyle: {
//         normal: {
//             color: '#bd6d6c'
//         }
//     }
// }, {
//     name: 'JS Heap',
//     value: [
//         2,
//         1523963801610,
//         1523963804811,
//         '石家庄',
//         '上海'
//     ],
//     itemStyle: {
//         normal: {
//             color: '#7b9ce1'
//         }
//     }
// }, {
//     name: 'Documents',
//     value: [
//         2,
//         1523963802273,
//         1523963802631,
//         '东京',
//         '深圳'
//     ],
//     itemStyle: {
//         normal: {
//             color: '#bd6d6c'
//         }
//     }
// }
];


// function renderItem(params, api) {
//     console.log(params);
    
//     var categoryIndex = api.value(0);
//     var start = api.coord([api.value(1), categoryIndex]);
//     var end = api.coord([api.value(2), categoryIndex]);
//     var height = api.size([0, 1])[1] * 0.6;

//     return {
//         type: 'rect',
//         shape: echarts.graphic.clipRectByRect({
//             x: start[0],
//             y: start[1] - height / 2,
//             width: end[0] - start[0],
//             height: height
//         }, {
//             x: params.coordSys.x,
//             y: params.coordSys.y,
//             width: params.coordSys.width,
//             height: params.coordSys.height
//         }),
//         style: api.style({
//             text: '{start|开始}{middle|中间}{end|结尾}',
//             textWidth: end[0] - start[0] - 10,
//             rich: {
//                 start: {
//                     textFill: 'yellow',
//                     textBackgroundColor: 'red',
//                     textAlign: 'left'
//                 },
//                 middle: {
//                     textFill: '#fff',
//                     textAlign: 'center'
//                 }, 
//                 end: {
//                     textFill: 'yellow',
//                     textBackgroundColor: 'red',
//                     textAlign: 'right'
//                 }
//             }
//         })
//     };
// }
function renderItem(params, api) {
    var categoryIndex = api.value(0); // index
    var start = api.coord([api.value(1), categoryIndex]); // 开始时间，index
    var end = api.coord([api.value(2), categoryIndex]); // 结束时间，index
    var height = api.size([0, 1])[1] * 0.8; // 获得 Y 轴上数值范围为 1 的一段所对应的像素长度
    // console.log(end[0] - start[0]);
    var startText = api.value(3);
    var endText = api.value(4);
    var middleText = '航班号';

    var barLength = end[0] - start[0];
    var startTextWidth = echarts.format.getTextRect(startText).width;
    var endTextWidth = echarts.format.getTextRect(endText).width;
    var text = '';

    if (barLength > startTextWidth + endTextWidth + 40) {
        text = '{start|' + startText + '}{middle|' + middleText + '}{end|' + endText + '}';
    }
    else if (barLength > 40) {
        text = '{middle|' + middleText + '}';
    }
    else {
        text = '';
    }

    var points = [];
    var x = start[0];
    var y = start[1] - height / 2;
    var width = barLength;
    var len = 50;
 
    var halfHeight = y - height / 2;
    var xWidth = x + width;
    points.push([x, halfHeight]);
    points.push([(x + len), y]);
    points.push([x + width - len, y]);
    points.push([(x + width), halfHeight]);
    points.push([(x + width - len), (y - height)]);
    points.push([(x + len), y - height]);

    console.log(points);

    return {
        type: 'polygon',
        shape: {
            points: echarts.graphic.clipPointsByRect(
               points,
               {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
                   
               }
            )
        },
        style: api.style({
            // text: '{start|' + startText + '}{middle|' + middleText + '}{end|' + endText + '}',
            // text: ['{start|{@[3]}}', '{middle|{@name}}', '{end|{{@[4]}}'].join('\n'),
            text: text,
            textWidth: barLength - 10,
            rich: {
                start: {
                    textFill: '#fff',
                    textAlign: 'left'
                },
                middle: {
                    textFill: '#fff',
                    textAlign: 'center'
                }, 
                end: {
                    textFill: '#fff',
                    textAlign: 'right'
                }
            }
        })
           
        
        // echarts.graphic.clipPointsByRect({
        //         points: points
        //     }, {
        //         x: params.coordSys.x,
        //         y: params.coordSys.y,
        //         width: params.coordSys.width,
        //         height: params.coordSys.height
        //     }),
        // style: api.style({
        //     // text: '{start|' + startText + '}{middle|' + middleText + '}{end|' + endText + '}',
        //     // text: ['{start|{@[3]}}', '{middle|{@name}}', '{end|{{@[4]}}'].join('\n'),
        //     text: text,
        //     textWidth: barLength - 10,
        //     rich: {
        //         start: {
        //             textFill: '#fff',
        //             textAlign: 'left'
        //         },
        //         middle: {
        //             textFill: '#fff',
        //             textAlign: 'center'
        //         }, 
        //         end: {
        //             textFill: '#fff',
        //             textAlign: 'right'
        //         }
        //     }
        // })
    };
}

option = {
    tooltip: {
        // formatter: function (params) {
        //     var html = '';
        //     html += '航班:' + params.data.name + '<br />';
        //     html += '起飞时间:' + format(params.value[1], 'yyyy-MM-dd HH:mm:ss') + '<br />';
        //     html += '结束时间:' + format(params.value[2], 'yyyy-MM-dd HH:mm:ss') + '<br />';
        //     html += '起飞时间:' + params.value[1] + '<br />';
        //     html += '结束时间:' + params.value[2] + '<br />';
        //     html += '起飞地点:' + params.value[3] + '<br />';
        //     html += '结束地点:' + params.value[4] + '<br />';
        //     return html;
        //     // return params.marker + params.name + ': ' + params.value[3] + ' ms';
        // }
    },
    title: {
        text: 'Profile',
        left: 'center'
    },
    legend: {
        data: ['bar', 'error']
    },
    dataZoom: [{
        type: 'slider',
        filterMode: 'weakFilter',
        showDataShadow: false,
        top: 400,
        height: 10,
        borderColor: 'transparent',
        backgroundColor: '#e2e2e2',
        handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
        handleSize: 20,
        handleStyle: {
            shadowBlur: 6,
            shadowOffsetX: 1,
            shadowOffsetY: 2,
            shadowColor: '#aaa'
        },
        labelFormatter: ''
    }, {
        type: 'inside',
        filterMode: 'weakFilter'
    }],
    grid: {
        height:300
    },
    xAxis: {
      //  min: startTime,
        scale: true,
        type: 'time',
        axisLabel: {
            formatter: function (val) {
                return val;
                // return Math.max(0, val - startTime) + ' ms';
                // return format(val, 'HH:mm:ss');
            }
        }
    },
    yAxis: {
        data: categories
    },
    series: [{
        type: 'custom',
        renderItem: renderItem,
        itemStyle: {
            normal: {
                opacity: 0.8
            }
        },
        encode: {
            x: [1, 2],
            y: 0,
        },
        data: datas
    }]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
