1.数据可视化 idea+tomcat+Echarts

基于JDK1.8, idea2020.3, tomcat-8.5.78

1.安装jdk,配置环境变量

1.win + R 输入sysdm.cpl,打开系统属性
2.点击环境变量
在这里插入图片描述
3.编辑系统环境变量

变量名:

JAVA_HOME

java的安装路径 :(路径不可直接复制,记得换成你的jdk安装路径)

C:\Program Files\Java\jdk1.8.0_321

在这里插入图片描述
4.打开Path : 新添加两个路径(直接复制即可)
注意:如果Path不是以下图片竖着填,各路径需要英文分号隔开!!!

%JAVA_HOME%\bin
%JAVA_HOME%\jre\bin

在这里插入图片描述
5.添加以下环境变量(复制即可)
变量名:

CLASSPATH

变量值:

.;%JAVA_HOME%\lib\tools.jar;%JAVA_HOME%\lib\dt.jar

在这里插入图片描述
测试(如下图则为成功):

java -version

在这里插入图片描述

配置JDK环境变量到此配置完成!!

2.安装idea(不在赘述)

3.安装tomcat

apache官网下载

1.将tomcat8.5 解压到硬盘
2.配置环境变量
变量名:

TOMCAT_HOME

变量值:(路径不可直接复制,记得换成你的 tomcat 路径)

D:\apache-tomcat-8.5.78

在这里插入图片描述
4.打开Path : 新添加一个路径(直接复制即可)

%TOMCAT_HOME%\bin

在这里插入图片描述
5.测试双击 tomcat—> bin—> startup.bat
在这里插入图片描述
在浏览器输入:http://localhost:8080/ 出现如下则为成功。
在这里插入图片描述
cmd命令行界面输入startup出现如下也是成功:
在这里插入图片描述
注:双击startup.bat命令窗口乱码解决方案:
如果双击startup.bat能够正常启动,但是乱码的话,可以到tomcat目录找到conf文件夹中的logging.properties,将这里的UTF-8改GBK,再双击startup.bat命令窗口就不会乱码了。

4.设置账号密码(这里可有可无)

进入
http://localhost:8080/manager/status
localhost:8080/manager/html
localhost:8080/host-manager/html
等页面时需要账户密码

下面设置账户密码:
tomcat进入管理界面
找到tomcat目录的conf文件夹下的tomcat-users.xml,双击打开
tomcat的这部分默认是注释掉的,我们在下面添加:

 <role rolename="admin-gui"/>
 <role rolename="manager-gui"/>
 <user username="你的名字" password="你的密码" roles="admin-gui,manager-gui"/>
 </tomcat-users>

5.安装配置maven

1.将下载下载好的压缩包,解压至你想要安装的目录下。
2.复制Maven的根目录
3.配置Maven环境
win + R 输入sysdm.cpl,打开系统属性,配置环境变量
变量名:MAVEN_HOME
变量值(你自己的maven路径):D:\IDEA\tomcat\apache-maven-3.6.3-bin\apache-maven-3.6.3
Path中新建:%MAVEN_HOME%\bin
4.测试

mvn -v

如下则为成功:
在这里插入图片描述
5.对Maven进行修改(配置国内服务器等):
打开Maven的安装目录>conf文件夹>setting.xml将国内服务器代码放到下列位置
在这里插入图片描述

<mirror>
		 <id>nexus-aliyun</id>
		 <mirrorOf>*</mirrorOf>
		 <name>Nexus aliyun</name>
		 <url>http://maven.aliyun.com/nexus/content/groups/public</url>
	</mirror>

改默认仓库的位置(先建立文件夹)

 <localRepository>D:\Software\.m2\repository</localRepository>

6.在Idea上配置Maven工具

在这里插入图片描述
在这里插入图片描述

7.在idea下新建web工程

(上面的Maven配置不好无法进行这一步)

1.File > new > project > maven > create from archetype->maven-archetype-webapp,点击next即可
请添加图片描述
2.勾选override后选择自己maven所在位置,配好。
在这里插入图片描述
3.finish即可,等待创建完成

8.将tomcat配置到idea

在这里插入图片描述
在这里插入图片描述
选择Tomcat解压位置:
在这里插入图片描述
点击Fix:
在这里插入图片描述
选择如下(名字可修改,一般修改为项目名):
在这里插入图片描述

点击OK退出后运行测试(如下则成功):
在这里插入图片描述

9.新建html文件,进行Echarts可视化

1.下载Echarts.min.js
2.将echarts.min.js放入到新建的js文件夹里
在这里插入图片描述
2.在main下webapp新建test.html,测试

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 1.安装echarts后,引入js文件 -->
  <script src="./node_modules/echarts/dist/echarts.min.js"></script>
  <title>Document</title>
</head>
<body>
  <!-- 定义显示图标的div -->
  <div id="echart" style="width: 600px;height: 600px;"></div>
  <script>
    // 初始化 echarts 实例
    var echart = echarts.init(document.getElementById('echart'))
    // 配置图表所需的数据
    var option = {
      title: {
        text: 'echart测试'
      },
      xAxis: {
        data: ['java', 'C++', 'C', 'Python']
      },
      yAxis: {},
      series: {
        type: 'bar',
        data: [123,456,324,555]
      }
    }
    // 调用 setOption 方法绘制图表
    echart.setOption(option)
  </script>
</body>
</html>

3.运行 (记得路径一定要对)在这里插入图片描述
或者浏览器输入 http://localhost:8080/你设置的名称/名称.html
在这里插入图片描述
运行结果如下图:
在这里插入图片描述

  • 11
    点赞
  • 87
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
网约车大数据综合项目是一个集成了各种数据分析和可视化技术的项目,其中数据可视化是其中非常重要的一部分。数据可视化通过图表、地图等形式,将大量的数据信息以直观、易懂的方式展现出来,帮助项目团队和决策者更好地理解和利用数据。 Flask是一款轻量级的Python Web框架,ECharts是一个由百度开发的基于JavaScript的数据可视化库,它们可以很好地配合使用来实现数据可视化的需求。在网约车大数据综合项目中,我们可以利用Flask框架搭建Web应用程序的后端,通过Python语言处理数据,并结合ECharts库来实现前端数据可视化的功能。 具体来说,我们可以使用Flask来构建Web应用的后台服务器,接收用户的请求,并调用相应的数据处理函数。同时,利用ECharts库提供的丰富图表类型和交互功能,将经过处理的数据转换成直观的图表展示,例如折线图、柱状图、地图等。这样,用户就可以通过浏览器访问我们的Web应用,实时查看和分析网约车的相关数据,包括订单量、车辆分布、用户乘车轨迹等内容。 通过数据可视化flask echarts,我们不仅可以帮助项目团队更好地理解和利用网约车的大数据信息,还可以为决策者提供直观、准确的数据支持,帮助他们制定更科学合理的运营策略和规划。这将有助于提升网约车行业的整体运营效率和用户体验,进而推动行业的可持续发展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_胡杨_

感谢打赏,会多多更新的。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值