vue.js中使用echarts实现数据动态刷新功能

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js中使用echarts实现数据动态刷新功能相关的知识，希望对你有一定的参考价值。

参考技术A 在vue使用echarts时，可能会遇到这样的问题，就是数据变化时，echarts不更新
这是因为Echarts是数据驱动的，这意味着只要我们重新设置数据，那么图表就会随之重新渲染
如果想要支持数据的自动刷新，必然需要一个监听器能够实时监听到数据的变化然后告知Echarts重新设置数据。
Vue提供了“watch”：

echarts实现动态传入数据刷新可执行

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="../js/tld/echarts3.min.js"></script>
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        var myChart;

        function display() {
            myChart = echarts.init(document.getElementById(\'main\'));
            myChart.setOption({
                title: {
                    text: \'异步数据加载示例\'
                },
                tooltip: {},
                legend: {
                    data: [\'销量\']
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: \'销量\',
                    type: \'bar\',
                    data: [1, 2, 3, 4, 5, 6]
                }]
            });

            // 初始 option
            option = {
                title: {
                    text: \'异步数据加载示例\'
                },
                tooltip: {},
                legend: {
                    data: [\'销量\']
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: \'销量\',
                    type: \'bar\',
                    data: []
                }]
            };
        }

        function fetchData(cb) {
            // 通过 setTimeout 模拟异步加载
            cb({
                categories: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                data: [Math.random(5), Math.random(20), Math.random(36), Math.random(10), Math.random(10), Math.random(20)]
            });
        }

        function abc() {
            fetchData(function(data) {
                myChart.setOption({
                    xAxis: {
                        data: data.categories
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: \'销量\',
                        data: data.data
                    }]
                });
            });
        }
    </script>
    <input type="button" value="display" onclick="display()" />
    <input type="button" value="refresh" onclick="abc()" />

</body>

</html>

 

点击refresh按钮：

再次点击refresh按钮

以上是关于vue.js中使用echarts实现数据动态刷新功能的主要内容，如果未能解决你的问题，请参考以下文章

echarts结合百度地图怎么能实现动态刷新，而不需要刷新整个页面

vuetab按钮切换动态数据间隙按钮位置掉低的问题

echarts vue.js怎么改变标题文字颜色

Echarts 动态刷新数据

vue中用echarts 动态刷新数据没变化解决

vue.js 使用计时器自动重新加载/刷新数据