作业：两个实训案例的实现

最新推荐文章于 2024-08-14 20:37:21 发布

李远博

最新推荐文章于 2024-08-14 20:37:21 发布

阅读量164

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2401_83182761/article/details/136804510

版权

一：

案例1：

代码如下：

stackBar.html如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width:600px;height:400px"></div>
    <script>
		var myChart = echarts.init(document.getElementById("main"));
		option = {
			tooltip: {
				trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
			},
			xAxis:{
                type:'category',
                data:['方式1','方式2','方式3','方式4','方式5']
            },
			yAxis:{
				type:'value'
			},
			series:[
				{
					name:'男性',
					type:'bar',
                    stack:'total',
                    label: {
                        show: true
                    },
                    data:[10,22,21,30,11]
				},
                {
					name:'女性',
					type:'bar',
                    stack:'total',
                    label: {
                        show: true
                    },
                    data:[20,10,12,14,23]
				}
			]
		};
		option && myChart.setOption(option);
	</script>
</body>
</html>

效果如下：

standBar.html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/echarts.js"></script>
</head>
<body>
	<div id="main" style="width:800px;height:400px"></div>
	<script>
		var myChart = echarts.init(document.getElementById("main"));
		option = {
			tooltip: {
				trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
			},
			xAxis:{
                type:'value',
            },
			yAxis:{
				type:'category',
				data:['男','女']
			},
			series:[
				{
					name:'个数',
					type:'bar',
                    label: {
                        show: true
                    },
                    data:[58,61]
				}
			]
		};
		option && myChart.setOption(option);
	</script>
</body>
</html>

效果如下：

falls.html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/echarts.js"></script>
</head>
<body>
	<div id="main" style="width:600px;height:400px"></div>
	<script>
		var myChart = echarts.init(document.getElementById("main"));
		option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
      				type: 'shadow'
    			},
				formatter: function (params) {
      				var tar = params[1];
      				return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
    			}
			},
			xAxis:{
				type:'category',
                data:['总和','城市a','城市b','城市c','城市d','城市e']
            },
			yAxis:{
				type:'value'
			},
			series:[
                {
					name:'金额',
					type:'bar',
                    stack:'total',
                    label: {
                        show: true
                    },
					itemStyle: {
        				borderColor: 'transparent',
        				color: 'transparent'
      				},
                    data:[0,270,220,130,40,0]
				},
                {
					name:'金额',
					type:'bar',
                    stack:'total',
                    label: {
                        show: true
                    },
                    data:[500,230,50,90,90,40]
				}
			]
		};
		myChart.setOption(option);
	</script>
</body>
</html>

效果如下：

案例二：

pie.html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width:600px;height:400px"></div>
    <script>
		var myChart = echarts.init(document.getElementById("main"));
		option = {
			tooltip: {
				trigger: 'item',
			},
			series:[
				{
					name:'入会方式',
					type:'pie',
                    data:[
                        {value:20,name:'方式1'},
                        {value:8,name:'方式2'},
                        {value:15,name:'方式3'},
                        {value:23,name:'方式4'},
                        {value:13,name:'方式5'}
                    ]
				}
			]
		};
		option && myChart.setOption(option);
	</script>
</body>
</html>

效果如下：

circular.html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width:600px;height:400px"></div>
    <script>
		var myChart = echarts.init(document.getElementById("main"));
		option = {
			tooltip: {
				trigger: 'item',
			},
			series:[
				{
					name:'入会方式',
					type:'pie',
                    radius: ['40%', '100%'],
                    data:[
                        {value:20,name:'方式1'},
                        {value:8,name:'方式2'},
                        {value:15,name:'方式3'},
                        {value:23,name:'方式4'},
                        {value:13,name:'方式5'}
                    ]
				}
			]
		};
		option && myChart.setOption(option);
	</script>
</body>
</html>

效果如下：