ECharts 主题定制：使用 HTML、Bootstrap 和 jQuery 实现

首先需要引入 echarts 库和 bootstrap 库，以及 jquery 库：

<!-- 引入 echarts 库 -->
<script src='https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js'></script>

<!-- 引入 bootstrap 库 -->
<link rel='stylesheet' href='https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css'>
<script src='https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js'></script>

<!-- 引入 jquery 库 -->
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'></script>

在页面中创建一个 div 容器来显示 echarts 图表：

<div id='chart' style='width: 100%; height: 500px;'></div>

使用 echarts 库创建一个基本的图表：

var myChart = echarts.init(document.getElementById('chart'));
var option = {
    // 图表配置项
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
myChart.setOption(option);

使用 bootstrap 库创建一个下拉菜单，用来选择不同的主题：

<div class='dropdown'>
    <button class='btn btn-secondary dropdown-toggle' type='button' id='dropdownMenuButton' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
        Choose Theme
    </button>
    <div class='dropdown-menu' aria-labelledby='dropdownMenuButton'>
        <a class='dropdown-item' href='#' data-theme='light'>Light</a>
        <a class='dropdown-item' href='#' data-theme='dark'>Dark</a>
    </div>
</div>

使用 jquery 库来监听下拉菜单的选择事件，根据选择的主题来定制图表的样式：

$('.dropdown-item').click(function() {
    var theme = $(this).data('theme');
    var themeOption = getThemeOption(theme);
    myChart.setOption(themeOption);
});

function getThemeOption(theme) {
    if (theme == 'light') {
        return {
            backgroundColor: '#f5f5f5',
            textStyle: {
                color: '#333'
            },
            series: {
                lineStyle: {
                    color: '#c23531'
                }
            }
        };
    } else if (theme == 'dark') {
        return {
            backgroundColor: '#333',
            textStyle: {
                color: '#fff'
            },
            series: {
                lineStyle: {
                    color: '#fff'
                }
            }
        };
    }
}

最终的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>ECharts Theme Customization with Bootstrap and jQuery</title>
    <!-- 引入 echarts 库 -->
    <script src='https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js'></script>
    <!-- 引入 bootstrap 库 -->
    <link rel='stylesheet' href='https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css'>
    <script src='https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js'></script>
    <!-- 引入 jquery 库 -->
    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
</head>
<body>
    <div class='container'>
        <div class='row'>
            <div class='col-md-6'>
                <div id='chart' style='width: 100%; height: 500px;'></div>
            </div>
            <div class='col-md-6'>
                <div class='dropdown'>
                    <button class='btn btn-secondary dropdown-toggle' type='button' id='dropdownMenuButton' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
                        Choose Theme
                    </button>
                    <div class='dropdown-menu' aria-labelledby='dropdownMenuButton'>
                        <a class='dropdown-item' href='#' data-theme='light'>Light</a>
                        <a class='dropdown-item' href='#' data-theme='dark'>Dark</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var myChart = echarts.init(document.getElementById('chart'));
        var option = {
            // 图表配置项
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };
        myChart.setOption(option);

        $('.dropdown-item').click(function() {
            var theme = $(this).data('theme');
            var themeOption = getThemeOption(theme);
            myChart.setOption(themeOption);
        });

        function getThemeOption(theme) {
            if (theme == 'light') {
                return {
                    backgroundColor: '#f5f5f5',
                    textStyle: {
                        color: '#333'
                    },
                    series: {
                        lineStyle: {
                            color: '#c23531'
                        }
                    }
                };
            } else if (theme == 'dark') {
                return {
                    backgroundColor: '#333',
                    textStyle: {
                        color: '#fff'
                    },
                    series: {
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                };
            }
        }
    </script>
</body>
</html>

ECharts 主题定制：使用 HTML、Bootstrap 和 jQuery 实现