Echarts通过Ajax实现动态数据加载

最新推荐文章于 2024-08-13 12:00:00 发布

锵锵忒

最新推荐文章于 2024-08-13 12:00:00 发布

阅读量2k

点赞数 3

分类专栏：前端文章标签： Echarts通过Ajax数据加载 Echarts通过Ajax实现动态数据加载

本文链接：https://blog.csdn.net/jiang18238032891/article/details/89531717

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

Echarts通过Ajax实现动态数据加载

用jquery的ajax来异步加载echarts图表数据，下面已一个简单的饼状图为例：

这是从官网上下的一个小例子：

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
   //图标容器，要有宽高
       <div id="container" style="height: 100%"></div>
       //引入的js
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       
       <script type="text/javascript">
       //获取容器节点
var dom = document.getElementById("container");
var myChart = echarts.init(dom,'light');//light是主体
//初始化参数
var option = {
    title : {
        text: '你是傻子吗？',
        subtext: '调查问卷结果',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series : [
        {//显示数据
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],//每一项的显示效果
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
	//显示
    myChart.setOption(option, true);

       </script>
   </body>
</html>

上面可以看到data中的数据是静态的，下面用Ajax填充数据

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom,'light');
option = {
    title : {
        text: '',//这是标题，为空，下面填入
        subtext: '调查问卷结果',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[ ], //这里的数据为空，下面填入
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

    myChart.setOption(option, true);

$(function() {
			getData();
		})
		function getData() {
			$.ajax({
				type : "POST",
				url : "",//数据后台地址
				data : {},//参数
				success : function(res) {
				var data = JSON.parse(res);
					//添加标题
					option.title.text=data.title;
					//添加数据
					option.series[0].data=data.data;
					//激活显示
					myChart.setOption(option, true);
				}
			})
		}
       </script>
   </body>
</html>