EChart入门绘制简单的统计图_ecahe统计图-CSDN博客

本文链接：https://blog.csdn.net/shiwu520/article/details/120762399

[Echarts官方API资源]
(https://echarts.apache.org/zh/api.html#echartsInstance.setOption)
入门实现三种基本的统计图
折线图

var optionline = {
	title: {
		text: 'ECharts折线统计图示例'
	},
						
	tooltip: {},
	legend: {
		data: ['检测量']
	},
	xAxis: {
		type: 'category',
		data: xaxis,
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
			name: '检测量',
			type: 'line',
			data: yaxis,
			barWidth: '20'
		}
	]
};

折线图
柱状图

var optionbar = {
	title: {
		text: 'ECharts柱状统计图示例'
	},
						
	tooltip: {},
	legend: {
		data: ['检测量']
	},
	xAxis: {
		type: 'category',
		data: xaxis,
		name: '检测项目',
		nameLocation: 'center'
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
			name: '检测量',
			type: 'bar',
			data: yaxis,
			barWidth: '20'
		}
	]
};

在这里插入图片描述
饼图

var optionpie = {
	title: {
  		text: 'ECharts\n饼\n状\n统\n计\n图\n示\n例',
  		textStyle: {
  			color: 'blue',
  			fontStyle: 'italic',
  			fontWeight: 'bold'
  		},
  	},
  	legend: {
    	orient: "horizontal",
    	left: "left",
    	data: xaxis
  	},
  	series: [{
    	type: "pie",
    	startAngle: 0,
    	data: piedata
    	
  	}]
}

在这里插入图片描述
完整代码
html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ECharts统计图示例</title>
		<style type="text/css">
			.div{
				margin-top: 10px;
				width: 750px;
				height: 450px;
				text-align: center;
				border: 1px solid red;
			}
			.button {
				background-color: green;
			}
		</style>
		<script type="text/javascript">
			
			var buttonlist = ['line','bar','pie'];
			function changeImgGrid(obj){
				var id = obj.id;
				obj.className = 'button';
				document.getElementById('div_'+id).style.display = 'block';
				for (var i=0; i<buttonlist.length; i++){
					if (buttonlist[i] != id){
						document.getElementById(buttonlist[i]).className = "";
						document.getElementById('div_'+buttonlist[i]).style.display = 'none';
					}
				}
			}
		</script>
	</head>
	<body>
		<div style="margin-top: 20px;">
			<button id="line" class="button" onclick="changeImgGrid(this);">折线图</button>
			<button id="bar" onclick="changeImgGrid(this);">柱状图</button>
			<button id="pie" onclick="changeImgGrid(this);">饼图</button>
		</div>
		<div id="div_line" class="div"></div>
		<div id="div_bar" class="div" hidden="true"></div>
		<div id="div_pie" class="div" hidden="true"></div>
	</body>
</html>
<script type="module" src="js/index.js"></script>
<script type="text/javascript" src="js/echarts/build/dist/echarts-all.js"></script>

//初始数据源
var datasourse = {
	"间接胆红素": 23,
	"直接胆红素": 34,
	"肌酐": 54,
	"尿淀粉酶": 21,
	"血淀粉酶": 12,
	"钾离子": 59,
	"钠离子": 90,
	"二氧化碳": 34
};

//定义图表x轴，y轴和饼图的数据列表
//x轴
var xaxis = [];
//y轴
var yaxis = [];
//饼图的数据列表
var piedata = [];
//用初始数据源组装数据列表
for (var keystr in datasourse){
	xaxis.push(keystr);
	yaxis.push(datasourse[keystr]);
	piedata.push(JSON.parse('{"name":"' + keystr + '","value":"' + datasourse[keystr] + '"}'));
}
//获取Dom元素对象，定义三个div分别展示三种图
var divline = document.getElementById('div_line');
var divbar = document.getElementById('div_bar');
var divpie = document.getElementById('div_pie');
//创建eCharts对象
var lineobj = echarts.init(divline);
var barobj = echarts.init(divbar);
var pieobj = echarts.init(divpie);
//图表配置数据
//柱状图配置
var optionbar = {
	title: {
		text: 'ECharts柱状统计图示例'
	},
						
	tooltip: {},
	legend: {
		data: ['检测量']
	},
	xAxis: {
		type: 'category',
		data: xaxis,
		name: '检测项目',
		nameLocation: 'center'
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
			name: '检测量',
			type: 'bar',
			data: yaxis,
			barWidth: '20'
		}
	]
};

//折线图配置
var optionline = {
	title: {
		text: 'ECharts折线统计图示例'
	},
						
	tooltip: {},
	legend: {
		data: ['检测量']
	},
	xAxis: {
		type: 'category',
		data: xaxis,
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
			name: '检测量',
			type: 'line',
			data: yaxis,
			barWidth: '20'
		}
	]
};

//饼图配置
var optionpie = {
	title: {
  		text: 'ECharts\n饼\n状\n统\n计\n图\n示\n例',
  		textStyle: {
  			color: 'blue',
  			fontStyle: 'italic',
  			fontWeight: 'bold'
  		},
  	},
  	legend: {
    	orient: "horizontal",
    	left: "left",
    	data: xaxis
  	},
  	series: [{
    	type: "pie",
    	startAngle: 0,
    	data: piedata
    	
  	}]
}

//画图
lineobj.setOption(optionline);
barobj.setOption(optionbar);
pieobj.setOption(optionpie);