利用Echarts写的柱状图-CSDN博客

本文链接：https://blog.csdn.net/jav0a0/article/details/90714891

本文介绍了如何使用Echarts库来绘制柱状图，包括展示效果图和具体的HTML代码实现。推荐从开源网站bootcdn下载所需的echarts.min.js和jquery.min.js资源。

摘要由CSDN通过智能技术生成

利用Echarts写的柱状图

效果图如下

利用Echarts写的柱状图

html 代码如下

<!DOCTYPE html>
<html style="height: 100%">
<head>
   <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<title>柱状图</title>
		<script type="text/javascript" src="jquery.min.js" ></script>//在网上现在一个jquery.min.js文件
		<style>
		html,body{
		    height: 100%;
		}
		body{
		    font-family: PingFangSC-Regular, sans-serif;
		    font-size: 16px;
		    background: #ffffff;
		}
		body,html,div,p,input,img,span,h1,h2,h3,h4,ul,li,section,footer,header,label,select,button,a,i,e,b,dl,dd{
		    margin: 0;
		    padding: 0;
		}
		a{
		    text-decoration: none;
		}
		b{
		    font-weight: normal;
		}
		a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
		li{
		    list-style: none;
		}
		em,i{
		    font-style: normal;
		}

		</style>
	</head>	
   <body style="height: 100%; margin: 0">
       <div id="container" style="width:80