ECharts.js

公司要作一個統計的圖表，在前端的數據須要用圖表的形式展現。

用這個庫緣由有二：

       1.有官方的API而且是中文的，方便閱讀。

       2.一直在更新bug不多，目前到了ECharts.3的版本。（樣式很是的豐富。）

ECharts.js官方地址。

一.使用方法：

        1.下載js文件，並引用。

        （1）引用：       

        js文件有不一樣的版本，可自行下載。地址：http://echarts.baidu.com/download.html

        

        （2）引用：       

<script type="text/javascript" src="echarts.js"></script>

        2.準備放置的容器：

<div id="container" style="width: 900px;height:450px;margin: 0 auto;border: 1px solid #CCCCCC;"></div>

         3.初始化圖表：

<script type="text/javascript">
        //指定圖標的配置和數據
        	var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
        	option = {
            title:{
                text:'ECharts 數據統計'
            },
            tooltip:{},
            legend:{
                data:['用戶來源']
            },
            xAxis:{
                data:["Android","IOS","PC","Ohter"]
            },
            yAxis:{

            },
            series:[{
                name:'訪問量',
                type:'line',
                data:[500,200,360,100]
            }]
        };
        //初始化echarts實例
        var myChart = echarts.init(document.getElementById('container'));

        //使用制定的配置項和數據顯示圖表
        myChart.setOption(option);
    </script>

效果圖：

這是折線圖

改成柱狀圖：

改變series的type的值：line爲bar        如圖：

效果如圖：

二.細節：

        1.首先echarts的圖形化呈現主要是經過配置方法來實現的(setOption),而後是對圖形標籤進行初始化，最後把配置方法(setOption)賦值到初始化圖形中，詳情點擊。

經常使用的如圖：

        

這些是一些比較基礎的一些，也是必需要掌握的。

        2.我的列子（其中一些屬性我都標註出來了，能夠直接在js代碼塊中去看）：

html：

<div id="container" style="width: 900px;height:450px;margin: 0 auto;border: 1px solid #CCCCCC;"></div>

js：

<script type="text/javascript">
       	window.onload=function(){
       		var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
            var a=['5', '1', '5', '8', '13', '17', '30', '4', '5', '2'];
            var arr1=[];

            for (var i=0;i<a.length;i++){
                var num=0;
                for(var j=0;j<=i;j++){
                    num+=parseInt(a[j])
                }
                arr1.push(num)
            }
			option = null;
			option = {
			    title: {
			        text: ''
			    },
			    
			    tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'cross'
			        }
			    },
			    toolbox: {
			        show: true,
			         feature: {
				            dataView: {show: true, readOnly: false},//提示切換數據視圖
				            magicType: {show: true, type: ['line', 'bar']},//切換折線圖
				            restore: {show: true},//還原
				            saveAsImage: {show: true},//保存圖片
				            dataView:{//切換數據視圖的樣式，若是沒有頁面會比較雜亂
				        	
				        	optionToContent: function(opt) {
						    var axisData = opt.xAxis[0].data;
						    var series = opt.series;
						    var table = '<table style="width:100%;text-align:center"><tbody><tr>'
						                 + '<td>時間</td>'
						                 + '<td>' + series[0].name + '</td>'
						                 + '<td>' + series[1].name + '</td>'
						                 + '</tr>';
						    for (var i = 0, l = axisData.length; i < l; i++) {
						        table += '<tr>'
						                 + '<td>' + axisData[i] + '</td>'
						                 + '<td>' + series[0].data[i] + '</td>'
						                 + '<td>' + series[1].data[i] + '</td>'
						                 + '</tr>';
						    }
						    table += '</tbody></table>';
						    return table;
						    }	
				        }
				        },
				        
				 
			        /*feature: {
			            saveAsImage: {}
			        }*/
			    },
			    legend: {
			        data:['達到正確率人數','到此共人數']//線柱提示
			    },
			    xAxis:  {//x軸
			        type: 'category',
			        name: '答題正確率/%',
			        boundaryGap: true,
			        axisPointer: {
			            sanp:false
			        },
			        data: ['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%']
			    },
			    yAxis:{//y軸
			        type: 'value',
			        name:'人',
			        min: 0,//最小
			        max: 100,//最大
			        interval: 10,//分爲幾份
			        axisLabel: {
			            formatter: '{value} 人'//改變代碼格式使value能夠使用			        
			            },
			        axisPointer: {
			            snap: false
			        }
			    },
			   visualMap: {//改變其中某段的樣式
			        show: false,
			        dimension: 0,
			        pieces: [{
			            lte: 5,
			            color: 'green'
			        }, {
			            gt: 5,
			            lte: 6,
			            color: 'red'
			        }, {
			            gt: 6,
			            lte: 14,
			            color: 'green'
			        }]
			    },
			    series: [
			        {
			            name:'達到正確率人數',
			            type:'bar',//柱狀圖
			            yAxisIndex: 0,
			            smooth: true,
			            label: {
		                normal: {
		                    show: true,
		                    position: 'top'
		                }
		            },
			            data: ['5', '1', '5', '8', '13', '17', '30', '4', '5', '2']
			        },
			        {
			            name:'到此共人數',
			            type:'line',//折線圖
			            yAxisIndex: 0,
			            smooth: true,//線是滑線
			            label: {
		                normal: {//顯示數字
		                    show: false,
		                    position: 'top',
		                    color:'red'
		                }
		            },
			            data: arr1
			        }
			    ]
			    
			};
			
			if (option && typeof option === "object") {
			    myChart.setOption(option, true);
			}
		}
       </script>