echarts异步数据加载和更新

最新推荐文章于 2025-05-23 17:52:50 发布

翻译最新推荐文章于 2025-05-23 17:52:50 发布 · 置顶 · 3.3w 阅读

php 专栏收录该内容

27 篇文章

订阅专栏

本文介绍如何在ECharts中实现数据的异步加载。通过使用setOption方法更新图表配置，可以实现在图表初始化后动态加载数据并更新图表。文中提供了具体的代码示例，包括通过GET请求加载静态数据文件及通过POST请求从服务器获取动态数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts中的数据是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

var myChart = echarts.init(document.getElementById('main'));

$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

或者先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。

var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    }]
});

异步加载

$('#submit').click(function(){
     		var startTime = $("#start").val();
     		var endTime = $("#end").val();
  			var type = $('input:radio[name="type"]:checked').val();
     		$.post('/management/index.php?g=screen&m=index&a=proAjax', 
     				{ start:startTime, end:endTime, type:type },function(data){
     					myChart.setOption({
     				        xAxis: {
     				            data: data.category
     				        },
     				        series: [{
     				            // 根据名字对应到相应的系列
     				            name: '日新增项目量',
     				            data: data.data
     				        }]
     				    });
     		});
     		
     	})

对应/management/index.php?g=screen&m=index&a=proAjax的方法---基于thinkphp

public function proAjax(){
    	

    	$chart = $this->selectPro();//获取数据
    	
    	$this->ajaxReturn($chart,'JSON');
    }

注：异步加载中data的数据是数组，不是字符串