ECharts学习笔记

蔚落 2023-10-17 13:53 44阅读 0赞

最近有个项目是做图标展示的，现在流行的插件一般有Highcharts,ECharts。考虑到ECharts是开源的，又是百度的产品，就选择了它。

首先下载echarts的包，地址http://echarts.baidu.com/index.html。然后把echarts.min.js加到项目中。

页面上建一个div，如：

设置它的样式：

height: 340px;

然后编写js：

//第一个图表
    var container = document.getElementById('chart1');
    // 基于准备好的dom，初始化echarts实例
    chart1 = echarts.init(container);
    
    var incount = data.series.incount;
    var outcount = data.series.outcount;
    var date = data.date;
    
    option = {
    	title : {
    		text : '各时段进出人次',
    		x : 'center',
    		textStyle : {
    			fontSize : 24,
    			fontWeight : 'normal',
    			color : '#23FFBB'
    		}
    	},
    	tooltip : {
    		showDelay: 0,
    		hideDelay: 0,
    		transitionDuration:0,
    		padding: 15,
    		position : function(p) {
    			return [p[0] + 10, p[1] - 10];
    		},
    		formatter:'{b} 点<br/>{a}：{c0}'//<br/>{a1}：{c1}<br/>{a2}：{c2}
    	},
    	toolbox: {  
    		show: true,
    		x: 'left',
    		feature: {  
    			magicType: {show: true, type: ['line', 'bar']},  
    			restore: {show: true},  
    			saveAsImage: {show: true}  
    		}  
    	},
    	legend: {
    		show: true,
    		x : 'center',
    		y : 'bottom',
    		itemGap : 20,
    		data : [{
    			name : '进',	
    			textStyle : {
    				fontSize : 14,
    				color : '#99CCCC'
    			}
    		},{
    			name : '出',
    			textStyle : {
    				fontSize : 14,
    				color : '#99CCCC'
    			}
    		}],
    		selected: {  
    			'进': true,  
    			'出': true
    		},
    		itemWidth: 20,             // 图例图形宽度
    		itemHeight: 20            // 图例图形高度
    	},
    	xAxis : {
    		type : 'category',
    		axisLine : {
    			lineStyle : {
    				width: 2,
    				color : '#99CCCC'
    			}
    		},
    		axisLabel : {
    			formatter : '{value} 点'
    		},
    		boundaryGap : false,
    		data : date
    	},
    	yAxis : [ {
    		show : true,
    		type : 'value',
    		axisLine : {
    			lineStyle : {
    				width: 2,
    				color : '#99CCCC'
    			}
    		},
    		splitLine : {
    			show : false
    		},
    		axisLabel : {
    			formatter : '{value} 人'
    		}
    	} ],
    	series : [{
    		name : '进',
    		type : 'line',
    		barWidth : 25,//固定柱子宽度
    		symbol : 'none',
    		data : incount,
    		itemStyle : {
    			normal : {
    				color : '#23FFBB',
    				lineStyle: {        // 系列级个性化折线样式
    					width: 2
    				},
    				label : {
    					show : true,
    					position : 'top',
    					textStyle : {
    						fontSize : '15'
    					}
    				}
    			}
    		}
    	},{
    		name : '出',
    		type : 'line',
    		barWidth : 25,//固定柱子宽度
    		symbol : 'none',
    		data : outcount,
    		itemStyle : {
    			normal : {
    				color : '#FFD54E',
    				lineStyle: {        // 系列级个性化折线样式
    					width: 2
    				},
    				label : {
    					show : true,
    					position : 'top',
    					textStyle : {
    						fontSize : '15'
    					}
    				}
    			}
    		}
    	}]
    };
    
    chart1.setOption(option);

得到如下图

![Image 1][]![Image 1][]![Center][]  
上面是一个线形图，我们再编写一个柱状图：

//第二个图表
    var container = document.getElementById('chart1');
    // 基于准备好的dom，初始化echarts实例
    chart1 = echarts.init(container);
    
    option = {
    	title : {
    		text : '当天借还量',
    		x : 'center',
    		textStyle : {
    			fontSize : 24,
    			fontWeight : 'normal',
    			color : '#23FFBB'
    		}
    	},
    	tooltip : {
    		//trigger: 'axis',
    		showDelay: 0,
    		hideDelay: 0,
    		transitionDuration:0,
    		padding: 15,
    		position : function(p) {
    			return [p[0] + 10, p[1] - 10];
    		},
    		formatter:'{b} 点<br/>{a}：{c0}'//<br/>{a1}：{c1}<br/>{a2}：{c2}
    	},
    	toolbox: {
    		show : true,
    		x: 'left',                // 水平安放位置，默认为全图右对齐，可选为：
    		feature : {
    			magicType : {show: true, type: ['line', 'bar']},//, 'stack', 'tiled'
    			restore : {show: true},
    			saveAsImage : {show: true}
    		}
    	},
    	legend: {
    		show: true,
    		x : 'center',
    		y : 'bottom',
    		itemGap : 20,
    		data : [{
    			name : '借',	
    			textStyle : {
    				fontSize : 14,
    				color : '#99CCCC'
    			}
    		},{
    			name : '还',
    			textStyle : {
    				fontSize : 14,
    				color : '#99CCCC'
    			}
    		},{
    			name : '续借',
    			textStyle : {
    				fontSize : 14,
    				color : '#99CCCC'
    			}
    		}],
    		selected: {  
    			'借': true,  
    			'还': true,
    			'续借': true
    		},
    		backgroundColor: 'rgba(0,0,0,0)',//背景透明
    		borderWidth: 0,
    		padding: 2,                // 图例内边距，单位px，默认各方向内边距为5，
    		itemWidth: 20,             // 图例图形宽度
    		itemHeight: 20            // 图例图形高度
    	},
    	xAxis : {                //x轴
    		axisLine : {
    			lineStyle : {
    				width: 2,
    				color : '#99CCCC'
    			}
    		},
    		axisLabel : {
    			formatter : '{value} 点'
    		},
    		data : data.date
    	},
    	yAxis : [{             //y轴
    		type : 'value',
    		axisLine : {
    			lineStyle : {
    				width: 2,
    				color : '#99CCCC'
    			}
    		},
    		splitLine : {
    			show : false
    		},
    		axisLabel : {
    			formatter : '{value} 本'
    		}
    	}],
    	series : [{
    		name: '借',
    		type : 'bar',
    		barWidth : 20,//固定柱子宽度
    		data : data.type1_total,
    		itemStyle : {
    			normal : {
    				color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#37CFFC'},{offset: 1, color: '#3784D9'}]),
    				label : {
    					show : true,
    					position : 'top',
    					textStyle : {
    						fontSize : '15'
    					}
    				}
    			}
    		}
    	},{
    		name: '还',
    		type : 'bar',
    		barWidth : 20,//固定柱子宽度
    		data : data.type2_total,
    		itemStyle : {
    			normal : {
    				color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#9DFFAA'},{offset: 1, color: '#19FFBD'}]),
    				label : {
    					show : true,
    					position : 'top',
    					textStyle : {
    						fontSize : '15'
    					}
    				}
    			}
    		}
    	},{
    		name: '续借',
    		type : 'bar',
    		barWidth : 20,//固定柱子宽度
    		data : data.type3_total,
    		itemStyle : {
    			normal : {
    				color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#FFEDB3'},{offset: 1, color: '#FFD54E'}]),
    				label : {
    					show : true,
    					position : 'top',
    					textStyle : {
    						fontSize : '15'
    					}
    				}
    			}
    		}
    	}]
    };
    // 使用刚指定的配置项和数据显示图表。
    chart1.setOption(option);

上面的series中的itemStyle的color采用的是渐变色。

得到下图：

![Image 1][]![Center 1][]

随浏览器大小变化，加上下面代码即可：

$(window).resize(function() {
    	if(chart1)setTimeout(chart1.resize, 1);
    });

也可以写成：

windows.οnresize=chart1.resize;

数据都是从后台读取出来的，大家可以使用ajax的方式来实现。

网上还有很多其他案例，大家可以参照着学习。  
官方的开发文档：http://echarts.baidu.com/echarts2/doc/doc.html

样例展示：http://echarts.baidu.com/echarts2/doc/example.html

[Image 1]: 
[Center]: https://img-blog.csdn.net/20170627104558546?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGlhbnRhbmdfMTk4Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20170627104616086?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGlhbnRhbmdfMTk4Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center