echarts 图例问题

ecahrts 饼图的图例可以弄成滚动的吗，不要翻页形式的，我现在只能写成这种

应该可以自定义图例，自己写样式。formatter 函数里可以自己写

echarts图表自定义图例_July++的博客-CSDN博客_echarts自定义图例在echarts中自定义图例样式就跟表格一样清晰的展示数据<div id="myChart1" ref="myChart1" :style="{ width: '100%'}"></div>//在获取到图表数据后再调用此方法进行图表渲染 drawLine() { let myChart = ""; let option = { title: { text: "0.00".

https://blog.csdn.net/weixin_41056945/article/details/121380840


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
</head>
<style>
    .wrap {
        width: 1000px;
        height: 400px;
        margin-bottom: 200px;
        margin: 20px auto;
        margin-bottom: 200px;
        position: relative;

    }

    #legend_Wrap {
        width: 286px;
        height: 90px;
        overflow-y: auto;
        position: absolute;
        top: 0px;
        color: white;
        font-size: 11px;
    }

    #legend_Wrap::-webkit-scrollbar {
        width: 0px;
        height: 0px;
    }

    .legend-icon {
        display: inline-block;
        width: 20px;
        height: 15px;
        margin: 3px 5px;
        vertical-align: middle;
    }

    .legend-item {
        cursor: pointer;
    }
</style>

<body>
    <div class="wrap">
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="main" style="width: 1000px;height:400px;margin-bottom: 200px;margin:20px auto;margin-bottom: 200px;">
        </div>
        <!-- 图例 -->
        <div id="legend_Wrap"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
    <script type="text/javascript">
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom, 'dark');
        var colors = ['blue', 'yellow', 'pink', 'red', 'orange'];
        var data = [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
        ]
        var option = {
            title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
            },
            color: colors,
            tooltip: {
                trigger: 'item'
            },
            /*  legend: {
                 orient: 'vertical',
                 left: 'left'
             }, */
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        option && myChart.setOption(option);
        // 创建图例
        let legend_Wrap = document.getElementById('legend_Wrap')
        let str = ``;
        for (var i = 0; i < data.length; i++) {
            str += `
            <div class='legend-item'>
            <span class='legend-icon' style='background: ${colors[i]}'>
            </span>
            <span class='legend-text'>${data[i].name}</span>
            </div>`
        }
        legend_Wrap.innerHTML = str;
      
    </script>
</body>

</html>