首页 前端知识 使用 Echarts 和 Select 实现同图表切换不同数据

使用 Echarts 和 Select 实现同图表切换不同数据

2024-06-01 10:06:40 前端知识 前端哥 65 848 我要收藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts + Select Example</title>
    <!-- 引入 Echarts 的 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
    <!-- 引入 Select 的 CDN -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
</head>
<body>
    <!-- 选择器 -->
    <select id="mySelect">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
    <!-- 图表容器 -->
    <div id="myChart" style="width: 600px; height: 400px;"></div>

    <script>
        // 初始化 Select 组件
        $(document).ready(function() {
            $('#mySelect').select2();
        });

        // 初始化 Echarts 图表
        var myChart = echarts.init(document.getElementById('myChart'));

        // 监听 Select 组件的变化事件
        $('#mySelect').on('change', function() {
            var selectedValue = $(this).val();

            // 根据选择的值更新图表数据
            var option = {
                xAxis: {
                    data: ['A', 'B', 'C']
                },
                yAxis: {},
                series: [{
                    name: 'Series 1',
                    type: 'bar',
                    data: [10, 20, 30]
                }]
            };

            if (selectedValue === 'option2') {
                option.series[0].data = [30, 20, 10];
            } else if (selectedValue === 'option3') {
                option.series[0].data = [15, 25, 35];
            }

            // 更新图表
            myChart.setOption(option);
        });

        // 初始图表数据
        var option = {
            xAxis: {
                data: ['A', 'B', 'C']
            },
            yAxis: {},
            series: [{
                name: 'Series 1',
                type: 'bar',
                data: [10, 20, 30]
            }]
        };

        // 渲染图表
        myChart.setOption(option);
    </script>
</body>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10381.html
标签
评论
发布的文章

npmjs官网(查询依赖包)

2024-06-07 00:06:56

npx使用及原理

2024-06-07 00:06:36

npm 包管理工具

2024-06-07 00:06:33

vue 思极地图开发

2024-06-07 00:06:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!