前端统计图 echarts实现简单柱状图
1. 引入 ECharts
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head>
2. 绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
这样你的第一个图表就诞生了!
案列:
前端代码:
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--360浏览器优先以webkit内核解析--> <title>高句丽介绍</title> <link rel="shortcut icon" href="favicon.ico"> <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/> <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/> <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/> <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/> <style lang="css"> td { align: center; valign: middle; text-align: center; vertical-align: middle; } </style> </head> <body class="gray-bg"> <div class="wrapper wrapper-content"> <div class="row"> <div class="col-sm-9"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h4>资源数量统计表</h4> </div> <div class="ibox-content"> <table border="1" cellspacing="0" style="height: 200px;width: 100%;font-size: 0.5em" > <thead> <tr> <td>类型</td> <td>总数</td> <!-- <td>已发布</td> <td>未发布</td>--> </tr> </thead> <tbody> <tr th:each="a : ${list}"> <td th:text="${a.type}"></td> <td th:text="${a.total}"></td> <!--<td th:text="<