echart如何实现异步数据加载？

最新推荐文章于 2024-04-24 22:50:52 发布

人工智能教学实践

最新推荐文章于 2024-04-24 22:50:52 发布

阅读量956

点赞数 2

分类专栏：软件工程人工智能文章标签：开发语言

本文链接：https://blog.csdn.net/douyu0814/article/details/133011157

版权

人工智能同时被 2 个专栏收录

121 篇文章 1 订阅

订阅专栏

软件工程

98 篇文章 1 订阅

订阅专栏

标准显示

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '会员入会渠道分布情况',
                subtext: '',
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['男', '女'],
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
            calculable: true,
            xAxis: [
                {
                    type: 'value',  //设置柱状图
                    boundaryGap: [0, 0.01],
                },
            ],
            yAxis: [
                {
                    type: 'category',
                    data: ['自愿', '微信推广', '团购促销', '节日活动'],
                },
            ],
            series: [
                {
                    name: '男',
                    type: 'bar',
                    data: [2, 0, 1, 2],
                },
                {
                    name: '女',
                    type: 'bar',
                    data: [3, 2, 2, 2],
                },
            ],
        };

        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

</html>

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

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

// 异步加载数据
$.get('data.json').done(function(data) {
  // 填入数据
  myChart.setOption({
    xAxis: {
      data: data.categories
    },
    series: [
      {
        // 根据名字对应到相应的系列
        name: '销量',
        data: data.data
      }
    ]
  });
});

人工智能教学实践

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
echart如何实现异步数据加载？

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

扫一扫