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

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

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


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


<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} 
{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填充数据


<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} 
{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>

OK,大功告成

你可能感兴趣的:(js)