使用html和bootstrap以及jquery来实现echarts主题定制功能

首先需要引入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>

使用html和bootstrap以及jquery来实现echarts主题定制功能