【echarts】实例

数据调用

其中data为数组：例：data=data:[{“name”:“陶”,“value”:10},{“name”:“黄”,“value”:20},{“name”:“季”,“value”:30},{“name”:“费”,“value”:20},{“name”:“奚”,“value”:40}]
viewBing(data.edu,‘main’,“学历统计”);
viewZhu(data.edu,‘main1’,“学历统计”,“人数”);

一、饼形图

1、html

<div id="main" style="width: 600px;height: 400px;"></div>
<!-- <div id="main2" style="width: 600px;height: 400px;"></div> -->

2、模板
数据类型：data=data:[{“name”:“陶”,“value”:10},{“name”:“黄”,“value”:20},{“name”:“季”,“value”:30},{“name”:“费”,“value”:20},{“name”:“奚”,“value”:40}]
id：标签的id
title：标题

function viewBing(data,id,title){
	  		//基于准备好的dom，初始化echarts实例
		 	var myChart=echarts.init(document.getElementById(id)); 
		 	//指定图表的配置项和数据
		 	/* var data = genData(40);
		 	console.dir(data.legendData) */
		 	option = {
			    title : {
			        text:title, //标题
			        //subtext: '纯属虚构',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        type: 'scroll',
			        orient: 'vertical',
			        right: 10,
			        top: 20,
			        bottom: 20,
			        //data:data.legendData
			        //selected: data.selected
			    },
			    series : [
			        {
			            name: '姓名',
			            type: 'pie',
			            radius : '55%',
			            center: ['40%', '50%'],
			            data:data,
			            //data:[{"name":"陶","value":10},{"name":"黄","value":20},{"name":"季","value":30},{"name":"费","value":20},{"name":"奚","value":40}],
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};  	
			//使用刚指定的配置项和数据显示图表
			myChart.setOption(option，true);
	  	}

二、柱形图

1、html

<div id="main" style="width: 600px;height: 400px;"></div>
<!-- <div id="main2" style="width: 600px;height: 400px;"></div> -->

2、模板

function viewZhu(data,id,title,name){
			var arr=new Array();
			var arr1=new Array();
			$.each(data,function(key,value){
				arr.push(value.name);
				arr1.push(value.value);
			});
			//基于准备好的dom，初始化echarts实例
		 	var myChart=echarts.init(document.getElementById(id)); 
			option = {
			    color: ['#3398DB'],
			    tooltip : {
			        trigger: 'axis',
			        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			        }
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis : [
			        {
			            type : 'category',
			            //data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			            data:arr,
			            axisTick: {
			                alignWithLabel: true
			            }
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value'
			        }
			    ],
			    series : [
			        {
			            //name:'人数',
			            name:name,
			            type:'bar',
			            barWidth: '60%',
			            //data:[10, 52, 200, 334, 390, 330, 220]
			            data:arr1
			        }
			    ]
			};
			//使用刚指定的配置项和数据显示图表
			myChart.setOption(option，true);
		}

3、颜色渐变折线图

var myChart;
    function zhexin(){
    		var date=["陶","黄","季","费","奚"];
    		var data=[10,20.5,30.5,10.5,40.5];
    		//初始化
    		//var myChart=echarts.init(document.getElementById("zhexian"));
    		if(myChart !="" && myChart != null && myChart!=undefined){
				myChart.dispose();
			}
		myChart=echarts.init(document.getElementById("zhexian"));
    		option = {
			grid: {
				show:true,
				top:'3%',
		        left: '2%',
		        right: '4.5%',
		        bottom: '3%',
		        containLabel: true,
		        //backgroundColor:'#ccc',
		        //shadowColor:'#ccc',
		        //borderColor:'#ccc'
		    },
		    tooltip: {
	            trigger: 'axis',
	            axisPointer: {
		            type: 'cross',
		            label: {
		                backgroundColor: '#6a7985'
		            }
		        }/* ,
	            formatter: function (params) {
	                return params[0].axisValue + '<br />' + params[0].data+type;
	            } */
	        },
		    animation: false,
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: date,
		        inverse:true//反序
		    },
		    yAxis: {
		        type: 'value',
		        //inverse:true
		    },
		    series: [{
		    	name:name,
		        data: data,
		        type: 'line',
		        color: '#8cd5c2',
		        areaStyle: {normal: {
                                color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#8cd5c2'},
                                            {offset: 0.5, color: '#76EEC6'},
                                            {offset: 1, color: '#fff'}
                                        ]
                                )
                            }}
		    }]
		};
    		//使用刚指定的配置项和数据显示图表
    		myChart.setOption(option,true);
    	}