分类: web前端 | 标签: echart

jquery封装echart插件

发表于: 2024-08-17 19:48:28 | 字数统计: 330 | 阅读时长预计: 1分钟

使用的jquery3版本

封装echart-plugins.js

(function ($) {
  $.fn.echart = function (options) {
    var $this = this;
    var chart = echarts.init($this[0]);

    function renderChart() {
      chart.setOption(options);
    }

    function updateOptions(newOptions) {
      options = $.extend({}, options, newOptions);
      renderChart();
    }

    function resize() {
      chart.resize();
    }

    renderChart();

    // 返回一个对象，包含更新选项和调整大小的方法
    return {
      updateOptions: updateOptions,
      resize: resize,
    };
  };
})(jQuery);

使用封装好的echart插件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="./echartplugins.js"></script>
</head>

<body>
    <div id="chartContainer" style="width: 600px; height: 400px;"></div>
    <script>
        // 示例用法
        $(document).ready(function () {
            var options = {
                title: {
                    text: '示例图表'
                },
                tooltip: {},
                xAxis: {
                    data: ['A', 'B', 'C', 'D', 'E']
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10]
                }]
            };

            var chart = $('#chartContainer').echart(options);

            // 示例：更新图表选项
            setTimeout(function () {
                chart.updateOptions({
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [15, 25, 30, 20, 5]
                    }]
                });
            }, 3000);
        });
    </script>
</body>

</html>

------ 本文结束，感谢您的阅读 ------

本文作者: 贺刘芳
本文链接: https://heliufang.github.io/posts/134dc9cc/
版权声明: 本文采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。