Echarts图表的动态数据显示

以ECharts中的饼图为例：

1，我们首先来看Echarts中饼图的源代码：
可以看到我们要动态显示的就是data数据了

 legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    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: '搜索引擎'}
            ],

2，我们利用ajax获取到返回的json数据（二维数组格式），

因为饼图源代码是一个一维数组里面包含对象，所以我们先创建对象，然后把对象放进一维数组就ok。然后把数组放在饼图的源代码data：处。

 data: [
		{value: 335, name: '直接访问'},
		{value: 310, name: '邮件营销'},
		{value: 234, name: '联盟广告'},
        {value: 135, name: '视频广告'},
        {value: 1548, name: '搜索引擎'}]

$(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "./inupdownout/in.php",
            //type: "POST",
            dataType: "JSON",
            async:false,
            success: function (s) {
                //注意返回的是从数据库中查询的所有结果，一个二维数组，横着 是 X的属性， 竖着是 第几个X；所以这里用s[0]，表示第一个。s[0].user  取出第一个的user
                // alert(s[0].goods_code);   //s. 这个是success: function(s)值  
 
             	piedata=[];
             	pieid=[];
             	for(var i=0;i<s.length;i++){
                    var obj=new Object();
                 	obj={value:s[i].id, name:s[i].names};
                 	piedata[i]=obj;
                 	pieid[i]=s[i].id;
             	}
        }
       });
 });

legend: {
        orient: 'vertical',
        left: 'left',
        data: pieid,
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data:piedata,

over，就可以根据数据库来实现动态改变饼图的值了。