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>