当前位置： 首页 > article >正文

ECharts实现数据可视化

article 2025/3/30 17:04:23

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

}

数据库的数据如下：
在这里插入图片描述

运行结果如下：
在这里插入图片描述


http://www.kler.cn/a/601068.html

相关文章：

  • xiaozhi-esp32-server在linux下源码安装
  • msyql--基本操作之运维篇
  • SOLIDEDGE 至 STL 转换：数字化设计制造的关键衔接
  • 使用UDP消息与iptables实现TCP端口敲门安全技术
  • Rust从入门到精通之进阶篇：20.项目实践
  • 算法-动态规划二
  • 软件性能效率测试工具有哪些?专业第三方软件检测机构推荐
  • PyTorch 深度学习实战（24）：分层强化学习（HRL）
  • Sqoop-试题
  • 结合DrRacket学习《如何设计程序，第二版》
  • 基于Python的机器学习入门指南
  • Blender配置渲染设置并输出动画
  • 在转换不同格式时，保持正确的宽高比可以避免画面变形
  • Python FastApi（5）：请求体、查询参数和字符串校验
  • k8s存储介绍（四）hostpath
  • 智能汽车图像及视频处理方案，支持视频实时拍摄特效能力
  • uv - pip 接口
  • 【多媒体交互】Unity+普通摄像头实现UI事件分析
  • VUE项目初始化
  • MATLAB 绘制空间分布图 方法总结