ECharts实现数据可视化

一、Echarts的简介
二、Echarts使用教程
- 1.下载echarts.min.js文件
- 2.编写echarts代码
- - （1）创建渲染实列
  - （2）修改option达到预期的效果
  - （3）创建配置项到实例中
三、Echarts的基础配置
四、前后端连通的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引入成功。

<!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、该容器必须有高和宽，只有有高和宽才能成功渲染出来。

  var myChart = echarts.init(document.getElementById('app'));

（2）修改option达到预期的效果

配置项是echarts最重要的部分，它决定着图表渲染出来的效果，配置项需要在echarts官网的众多实列当中选择和自己预期相似的示例，点开示例之后根据API修改配置项达到预期效果：
在这里插入图片描述
配置项：

从下图找到option中的组件，一个一个修改自己的组件达到自己想要的效果

（3）创建配置项到实例中

通过setOption(option)就可以将option渲染到容器当中。通过完成上述操作就可以渲染出一个echarts图表。

  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：调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。

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图表

前端代码：

  <!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代码：

<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>

后端代码：
价格饼图

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 {}}

数量饼图

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 stubdoGet(request, response);}}