E-Charts

Introduction

A Declarative Framework for Rapid Construction of Web-based Visualization, for more details you can check here.

How to Setup

HTML Structure

<div id="e_chart_6" class="" style="height:294px;"></div>

Dependency

JS

<!-- EChartJS JavaScript -->
<script src="vendors/echarts/dist/echarts-en.min.js"></script>
<script src="dist/js/areacharts-data.js"></script>

Initialize Echarts JS

Line Chart

if( $('#e_chart_6').length > 0 ){
	var e_chart_6 = echarts.init(document.getElementById('e_chart_6'));
	var option6 = {
		tooltip: {
			show: true,
			trigger: 'axis',
			backgroundColor: '#fff',
			borderRadius:6,
			padding:6,
			axisPointer:{
				lineStyle:{
					width:0,
				}
			},
			textStyle: {
				color: '#324148',
				fontStyle: 'normal',
				fontWeight: 'normal',
				fontFamily: 'inherit',
				fontSize: 12
			}	
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			axisLine: {
				show:false
			},
			axisTick: {
				show:false
			},
			axisLabel: {
				textStyle: {
					color: '#5e7d8a'
				}
			}
		},
		yAxis: {
			type: 'value',
			axisLine: {
				show:false
			},
			axisTick: {
				show:false
			},
			axisLabel: {
				textStyle: {
					color: '#5e7d8a'
				}
			},
			splitLine: {
				lineStyle: {
					color: '#eaecec',
				}
			}
		},
	   
		series: [
			{
				data:[120, 132, 101, 134, 90, 230, 210],
				type: 'line',
				stack: 'a',
				symbolSize: 6,
				itemStyle: {
					color: '#00acf0',
				},
				lineStyle: {
					color: '#00acf0',
					width:2,
				}
			}
		]
	};
	e_chart_6.setOption(option6);
	e_chart_6.resize();
}

Bar Chart

if( $('#e_chart_6').length > 0 ){
	var eChart_6 = echarts.init(document.getElementById('e_chart_6'));
	var option = {
		color: ['#00acf0'],
		tooltip: {
			show: true,
			trigger: 'axis',
			backgroundColor: '#fff',
			borderRadius:6,
			padding:6,
			axisPointer:{
				lineStyle:{
					width:0,
				}
			},
			textStyle: {
				color: '#324148',
				fontStyle: 'normal',
				fontWeight: 'normal',
				fontFamily: 'inherit',
				fontSize: 12
			}	
		},
		
		xAxis: [{
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			axisLine: {
				show:false
			},
			axisTick: {
				show:false
			},
			axisLabel: {
				textStyle: {
					color: '#5e7d8a'
				}
			}
		}],
		yAxis: {
			type: 'value',
			axisLine: {
				show:false
			},
			axisTick: {
				show:false
			},
			axisLabel: {
				textStyle: {
					color: '#5e7d8a'
				}
			},
			splitLine: {
				lineStyle: {
					color: '#eaecec',
				}
			}
		},
		series: [{
			data: [120, 200, 150, 80, 70, 110, 130],
			type: 'bar',
			barMaxWidth: 30,
			itemStyle: {
				normal: {
					barBorderRadius: [6, 6, 0, 0] ,
				}
			},
		}]
	};
	eChart_6.setOption(option);
	eChart_6.resize();
}

Area Chart

if( $('#e_chart_6').length > 0 ){
	var e_chart_6 = echarts.init(document.getElementById('e_chart_6'));
	var option6 = {
		tooltip: {
			show: true,
			trigger: 'axis',
			backgroundColor: '#fff',
			borderRadius:6,
			padding:6,
			axisPointer:{
				lineStyle:{
					width:0,
				}
			},
			textStyle: {
				color: '#324148',
				fontStyle: 'normal',
				fontWeight: 'normal',
				fontFamily: 'inherit',
				fontSize: 12
			}	
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			axisLine: {
				show:false
			},
			axisTick: {
				show:false
			},
			axisLabel: {
				textStyle: {
					color: '#5e7d8a'
				}
			}
		},
		yAxis: {
			type: 'value',
			axisLine: {
				show:false
			},
			axisTick: {
				show:false
			},
			axisLabel: {
				textStyle: {
					color: '#5e7d8a'
				}
			},
			splitLine: {
				lineStyle: {
					color: '#eaecec',
				}
			}
		},
	   
		series: [
			{
				data:[120, 132, 101, 134, 90, 230, 210],
				type: 'line',
				stack: 'a',
				symbolSize: 6,
				itemStyle: {
					color: '#00acf0',
				},
				lineStyle: {
					color: '#00acf0',
					width:2,
				},
				areaStyle: {
					color: '#ffbf36',
				},
			}
		]
	};
	e_chart_6.setOption(option6);
	e_chart_6.resize();
}

Donut Chart

if( $('#e_chart_6').length > 0 ){
	var eChart_6 = echarts.init(document.getElementById('e_chart_6'));
	var dataStyle = {
		normal: {
			label: {
				show: false
			},
			labelLine: {
				show: false
			},
			shadowBlur: 40,
			borderWidth: 10,
			shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
		}
	};
	var placeHolderStyle = {
		normal: {
			color: '#22af47',
			label: {
				show: false
			},
			labelLine: {
				show: false
			}
		},
		emphasis: {
			color: '#22af47'
		}
	};
	var option5 = {
		backgroundColor: '#fff',
		title: {
			text: '匹配度',
			x: 'center',
			y: 'center',
			textStyle: {
				fontWeight: 'normal',
				fontSize: 24,
				color: "#fff",
			}
		},
		tooltip: {
			show: true,
			backgroundColor: '#fff',
			borderRadius:6,
			padding:6,
			axisPointer:{
				lineStyle:{
					width:0,
				}
			},
			textStyle: {
				color: '#324148',
				fontStyle: 'normal',
				fontWeight: 'normal',
				fontFamily: 'inherit',
				fontSize: 12
			}	
		},
		series: [{
				name: 'Line 1',
				type: 'pie',
				clockWise: false,
				radius: ['40%', '50%'],
				center:['50%','50%'],
				itemStyle: dataStyle,
				hoverAnimation: false,
				startAngle: 90,
				label:{
					borderRadius:'10',
				},
				data: [{
						value: 54.6,
						name: 'b',
						itemStyle: {
							normal: {
								color: '#00acf0'
							}
						}
					},
					{
						value: 45.4,
						name: '',
						tooltip: {
							show: false
						},
						itemStyle: placeHolderStyle
					},
				]
			},
			{
				name: 'Line 2',
				type: 'pie',
				clockWise: false,
				radius: ['80%', '70%'],
				center:['50%','50%'],
				itemStyle: dataStyle,
				hoverAnimation: false,
				startAngle: 90,
				data: [{
						value: 56.7,
						name: 'a',
						itemStyle: {
							normal: {
								color: '#00acf0'
							}
						}
					},
					{
						value: 43.3,
						name: '',
						tooltip: {
							show: false
						},
						itemStyle: placeHolderStyle
					},
				]
			},
		]
	};
	eChart_6.setOption(option5);
	eChart_6.resize();
}
	

Pie Chart

if( $('#e_chart_6').length > 0 ){
	var eChart_6 = echarts.init(document.getElementById('e_chart_6'));
	var option = {
		tooltip: {
			show: true,
			backgroundColor: '#fff',
			borderRadius:6,
			padding:6,
			axisPointer:{
				lineStyle:{
					width:0,
				}
			},
			textStyle: {
				color: '#324148',
				fontStyle: 'normal',
				fontWeight: 'normal',
				fontFamily: 'inherit',
				fontSize: 12
			}	
		},
		series: [
			{
				name:'',
				type:'pie',
				radius : '55%',
				color: ['#00acf0', '#ffbf36', '#f83f37', '#22af47'],
				data:[
					{value:435, name:''},
					{value:679, name:''},
					{value:848, name:''},
					{value:348, name:''},
				],
				labelLine: {
					show:false
				}
			}
		]
	};
	eChart_6.setOption(option);
	eChart_6.resize();
}