Echarts柱状图—bar

柱状图代码实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>bar</title>
    <!--引入echarts.js -->
	<script src="../echartsjs/echarts.min.js"></script>
</head>
<body>
	<!--为Echarts准备一个具备宽高的dom -->
<div id="m" style="width: 900px;height: 600px;"></div>
<script type="text/javascript">

// 基于准备好的dom,初始化echarts实例	
var myChart = echarts.init(document.getElementById("m"));

// 指定图标的配置项和数据
var option = {
    // 标题
	title: {
		text: '学生个人兴趣爱好'
	},
    // 工具箱
	toolbox: {
                // 显示图片
		show: true,    
		feature: {
			// saveAsImage:保存图片
			saveAsImage: {
				show:true
			}
		}
	},
       
    // 图例 
    legend: {
        data: ['兴趣爱好人数']
    },
    
    // x轴
	xAxis: {
		data: ["跑步", "打游戏", "旅游", "看书", "敲代码", "玩手机"]
	},

	// y轴
	yAxis: {},

    // 数据
	series: [{
		name: '兴趣爱好人数',
		type: 'bar',
		data: [18, 22, 21, 20, 16, 14,]
	}]
};

// 使用刚指定的配置项和数据显示图表,通过.setOption方法调用
myChart.setOption(option);
</script>
</body>
</html>

运行效果:
在这里插入图片描述

发布了118 篇原创文章 · 获赞 42 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/qq_41490561/article/details/104496596