echarts性能图添加decal

import React, { useState, useEffect, useRef } from 'react';
import * as echarts from 'echarts';


const MyChartComponent: React.FC = () => {
    const chartRef = useRef<HTMLDivElement | null>(null);
    const [chartInstance, setChartInstance] = useState<echarts.ECharts | null>(null);
    var data = [];
    var dataCount = 100;//数据量大于10000的时候图表就显示不全了
    var startTime = +new Date();
    var categories = ['categoryA', 'categoryB', 'categoryC'];
    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
    categories.forEach(function (category, index) {
        var baseTime = startTime;
        for (var i = 0; i < dataCount; i++) {
            var typeItem = types[Math.round(Math.random() * (types.length - 1))];
            var duration = Math.round(Math.random() * 10000);
            data.push({
                name: typeItem.name,
                value: [index, baseTime, (baseTime += duration), duration],
                itemStyle: {
                    color: typeItem.color
                    // decals:
                }
            });
            baseTime += Math.round(Math.random() * 2000);
        }
    });
    function renderItem(params, api) {
        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;
    
        var rectShape = 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
            }
        );
    
        // Generate multiple diagonal lines as decal
        var decal = [];
        var lineWidth = 2; // Width of each line
        var spacing = 8; // Spacing between lines
    
        for (var i = lineWidth / 2; i < rectShape.width + rectShape.height; i += spacing) {
            decal.push({
                show: true,
                symbol: [
                    'M', rectShape.x - rectShape.height + i, rectShape.y + rectShape.height,
                    'L', rectShape.x + i, rectShape.y - rectShape.height
                ].join(','),
                symbolSize: lineWidth,
                color: '#000',
                backgroundColor: '#fff'
            });
        }
    
        return {
            type: 'rect',
            transition: ['shape'],
            shape: rectShape,
            style: api.style({
                decal: decal
            })
        };
    }
    

  
    useEffect(() => {
        if (chartRef.current && !chartInstance) {
            const chart = echarts.init(chartRef.current);
            setChartInstance(chart);
        }
    }, [chartInstance]);


    useEffect(() => {
        if (chartInstance) {


            const option = {
                aria: {
                    label: {
                        enabled: true
                    },
                    enabled: true,
                    decal: {
                        // show: true,
                        // symbol: 'circle', // 使用默认的圆形贴花
                        // symbolSize: 0.5, // 贴花大小
                        // color: 'rgba(255, 0, 0, 0.5)', // 贴花颜色
                        // backgroundColor: 'black' // 贴花背景色

                        show: true,
                        symbol: 'path://M0,0 L1,1 M1,0 L0,1', // Define a diagonal line pattern
                        symbolSize: [4, 4], // Size of the pattern
                        color: 'black' // Colo
                    }
                },
                tooltip: {
                    formatter: function (params) {
                        return params.marker + params.name + ': ' + params.value[3] + ' ms';
                    }
                },
                title: {
                    text: 'Profile',
                    left: 'center'
                },
                dataZoom: [
                    {
                        type: 'slider',
                        filterMode: 'weakFilter',
                        showDataShadow: false,
                        top: 400,
                        labelFormatter: ''
                    },
                    {
                        type: 'inside',
                        filterMode: 'weakFilter'
                    }
                ],
                grid: {
                    height: 300
                },
                xAxis: {
                    min: startTime,
                    scale: true,
                    axisLabel: {
                        formatter: function (val) {
                            return Math.max(0, val - startTime) + ' ms';
                        }
                    }
                },
                yAxis: {
                    data: categories
                },
                series: [
                    {
                        type: 'custom',
                        renderItem: renderItem,
                        itemStyle: {
                            opacity: 0.8
                        },
                        encode: {
                            x: [1, 2],
                            y: 0
                        },
                        data: data
                    }
                ]
            };

            chartInstance.setOption(option);
        }
    }, [chartInstance]);


    useEffect(() => {
        return () => {
            if (chartInstance) {
                chartInstance.dispose();
            }
        };
    }, [chartInstance]);

    return (
        <div ref={chartRef} style={{ width: '100%', height: '500px' }} />
    );
};

export default MyChartComponent;








// ---