ECharts实现数据可视化
一、Echarts的简介
Echarts的官方介绍为：一个基于javaScript的开源可视化图表库。
Echarts的官方网址：https://echarts.apache.org/zh/index.html
Echarts主要包括各种集成完整的漂亮的图表：折现图、柱状图、饼图。
用户可以从大量的图表当中挑选自己需要的图表，并且引入自己的项目当中，可以流畅的使用在各种浏览器，并且按照官网的配置项，配置唯一的图表
二、Echarts使用教程
1.下载echarts.min.js文件
在echarts使用的时候，需要导入官方提供的echarts.min.js文件，官方提供echarts.min.js文件。
echarts.min.js下载路径：https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js
进入上方的路径，打开页面为：
将本页面中所有的内容复制，用vscode新建一个js文件复制到新建的js文件当中，就可以获得echarts.min.js文件。
检查echarts.min.js是否引入成功。
用vscode 打开下面的页面，看图表是否成功渲染出来，如果能够成功渲染出来则说明echarts.min.js引入成功。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#app {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id='app'></div>
</body>
<script src="../js/echarts.min.js"></script>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('app'));
// 指定图表的配置项和数据
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>
</html>检查运行之后的页面：
2.编写echarts代码
echarts组件主要需要注意三个部分：1.创建渲染实列 2.创建配置项 3 渲染配置项到实例当中
（1）创建渲染实列
创建echarts实例，查找html页面当中的要渲染的标签。
1、该标签必须有唯一标识，（防止一个echarts渲染两个容器）
2、该容器必须有高和宽，只有有高和宽才能成功渲染出来。
html
var myChart = echarts.init(document.getElementById('app'));（2）修改option达到预期的效果
配置项是echarts最重要的部分，它决定着图表渲染出来的效果，配置项需要在echarts官网的众多实列当中选择和自己预期相似的示例，点开示例之后根据API修改配置项达到预期效果：
配置项：
从下图找到option中的组件，一个一个修改自己的组件达到自己想要的效果
（3）创建配置项到实例中
通过setOption(option)就可以将option渲染到容器当中。通过完成上述操作就可以渲染出一个echarts图表。
html
myChart.setOption(option);三、Echarts的基础配置
配置项文件：https://echarts.apache.org/zh/option.html#title
本部分主要讲解几个主要的配置。
需要了解的主要配置：** title series xAxis yAxis grid tooltip legend color**
1,title：标题组件，包含主标题和副标题。
title : {
text : 'Referer of a Website', //标题 修改为 房间价格分布图
subtext : 'Fake Data', // 副标题：标题下面的小标题，可以删除
left : 'center' // 标题部分 位于顶部的位置
}
2.tooltip：提示框组件。
下面的情况是提示框组件，删除的话，就消失
3.legend 图例组件 删除就消失
legend: {
orient: 'vertical',
left: 'left' //位于什么位置，left位于最左侧，right位于最右侧，百分数从左到右的位置
},
4.series
系列列表。每个系列通过 type 决定自己的图表类型
通俗的理解：图标数据，指定什么类型的图标，可以多个图表重叠。
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
其中的type表示图表的类型，name是提示框组件的名称，data是渲染的数据
5.xAxis
直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
type表示x坐标轴的类型，data,表示每一块的数据名称。
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
6.grid 表示是否显示网格。
7.color：调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
html
option = {
title: {
text: '房间价格分布',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '房间价格',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '单人间' },
{ value: 735, name: '双人间' },
{ value: 580, name: '总统套房' },
{ value: 484, name: '普通间' },
{ value: 300, name: '豪华套房' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
四、前后端连通的echarts图表
前端代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/content.css">
<link rel="stylesheet" href="layui/css/layui.css">
<style>
.echartsContainer {
display: flex;
width: 100%;
height: 400px;
justify-content: space-between;
}
.demo1 {
width: 48%;
height: 100%;
}
.demo2 {
width: 48%;
height: 100%;
}
</style>
</head>
<body>
<div class="echartsContainer">
<div class="demo1"></div>
<div class="demo2"></div>
</div>
</body>
<script src="js/jquery.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="layui/layui.js"></script>
<script src="js/login.js" defer></script>
<script src="js/connect.js" defer></script>
<script src="js/echarts.min.js"></script>
</html>javaScript代码：
javascript
<script>
var arr = [];
$.ajax({
url:"GetRoomPrice",
type:"get",
data:{},
async:false,
success:function(res){
arr= res.data
}
})
var chartDom = document.querySelector(".demo1");
var myChart = echarts.init(chartDom);
option = {
title: {
text: '房间价格分布图',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '房间价格',
type: 'pie',
radius: '50%',
data: arr,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option)
</script>
<script>后端代码：
价格饼图
java
package com.qcby.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.qcby.db.MysqlUtil;
/**
* Servlet implementation class GetRoomPrice
*/
@WebServlet("/GetRoomPrice")
public class GetRoomPrice extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public GetRoomPrice() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/json,charest=utf-8");
String sql = "SELECT type as name, MIN(price) AS value FROM room GROUP BY type";
String[] c = {"value","name"};
String reString = MysqlUtil.getJsonBySql(sql, c);
response.getWriter().write(reString);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}数量饼图
java
package com.qcby.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.qcby.db.MysqlUtil;
/**
* Servlet implementation class GetRoomCount
*/
@WebServlet("/GetRoomCount")
public class GetRoomCount extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public GetRoomCount() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/json,charest=utf-8");
String sql = "select count(*) as count,type from room GROUP BY type";
String[] colums = {"count","type"};
String res = MysqlUtil.getJsonBySql(sql,colums);
response.getWriter().write(res);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}数据库的数据如下：
运行结果如下：
