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>