echarts图表数据信息动态获取

第一步准备一个json文件echarts.json（名字无所谓），用来模拟从后台获取数据 

{
    "name":["直达","营销广告","搜索引擎","邮件营销","联盟广告","视频广告","百度","谷歌","必应","其他"],
    "data":[
    	{"value":335, "name":"直达"},
    	{"value":310, "name":"邮件营销"},
    	{"value":234, "name":"联盟广告"},
    	{"value":135, "name":"视频广告"},
    	{"value":1048, "name":"百度"},
    	{"value":251, "name":"谷歌"},
    	{"value":147, "name":"必应"},
    	{"value":102, "name":"其他"}
    ],
    "little":[
        {"value":335, "name":"直达","selected":"true"},
    	{"value":679, "name":"营销广告"},
    	{"value":1548, "name":"搜索引擎"}
    ]
}

　　

第二步在页面直接引用JS文件

<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"src="js/jquery.min.js"></script>

　　

第三步在body中准备一个容器，写好样式，用来显示图表

<div id="container"></div>

<style>
#container{
width: 800px;
height: 600px;
border: 1px solid #ccc;
margin: 0 auto;
}
</style>

　　

最后一步在js中初始化echarts对象，实现动态加载数据。

        <script type="text/javascript">
            var container = document.getElementById('container');
            // 初始化加载对象myContainer
            var myContainer = echarts.init(container);
            //未获取数据前，显示loading加载动画
            myContainer.showLoading();
            function bindData() {
                //为了效果明显，我们做了延迟读取数据
                setTimeout(function() {
                    //异步加载数据,get请求我们刚刚准备的json文件,正式开发中调用相应的接口
                    $.get('echarts.json', function(res) {
                        console.log(res)
                        //获取数据后，隐藏loading动画
                        myContainer.hideLoading();
                        myContainer.setOption(
                        	option = {
                            	tooltip: {
						        trigger: 'item',
						        formatter: "{a} <br/>{b}: {c} ({d}%)"
						    },
						    legend: {
						        orient: 'horizontal',
						        x: 'left',
						        data:res.name
						    },
						    series: [
						    	{
						            name:'访问来源',
						            type:'pie',
						            selectedMode: 'single',
						            radius: ['0', '30%'],
						
						            label: {
						                normal: {
						                    position: 'inner'
						                }
						            },
						            labelLine: {
						                normal: {
						                    show: false
						                }
						            },
						            data:res.little
						       },
						        {
						            name:'访问来源',
						            type:'pie',
						            radius: ['40%', '55%'],
						            label: {
						                normal: {
						                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
						                    backgroundColor: '#eee',
						                    borderColor: '#aaa',
						                    borderWidth: 1,
						                    borderRadius: 4,
						                    // shadowBlur:3,
						                    // shadowOffsetX: 2,
						                    // shadowOffsetY: 2,
						                    // shadowColor: '#999',
						                    // padding: [0, 7],
						                    rich: {
						                        a: {
						                            color: '#999',
						                            lineHeight: 22,
						                            align: 'center'
						                        },
						                         abg: {
						                             backgroundColor: '#333',
						                             width: '100%',
						                             align: 'right',
						                             height: 22,
						                             borderRadius: [4, 4, 0, 0]
						                         },
						                        hr: {
						                            borderColor: '#aaa',
						                            width: '100%',
						                            borderWidth: 0.5,
						                            height: 0
						                        },
						                        b: {
						                            fontSize: 16,
						                            lineHeight: 33
						                        },
						                        per: {
						                            color: '#eee',
						                            backgroundColor: '#334455',
						                            padding: [2, 4],
						                            borderRadius: 2
						                        }
						                    }
						                }
						            },
						            data:res.data
						        }
						    ]                         
                        });
                    })
                }, 1000);
            }
            bindData();
        </script>