数据可视化-安装 Visual Studio Code （配图保姆级）
特点：VS Code是一个轻量级的源代码编辑器，其主要功能并不是渲染可视化，但强在插件众多，安装方便，使用简洁。特点：Jupyter是一个基于Web的交互式计算环境，可以直接在浏览器里编辑代码，可以实现分布操作，提供了丰富的数据可视化库和工具，但功能较单一。Eclipse是一个集成开发环境，支持以java为主的多种语言，其本身也不支持数据可视化功能，需要安装插件，但插件安装复杂，胜在内置环境运行。
目录
拓展-Visual Studio Code，eclipse，jupyter数据可视化效果对比
一、下载并安装Visual Studio Code
首先，我们需要下载它的安装包，官网链接：Download Visual Studio Code - Mac, Linux, Windows（文件很小，直接下载即可）
我的环境是Windows，这里直接下载了
找到你下载的文件，双击运行
跟着图片设置
安装路径不固定，推荐安装在C盘以外的任何盘，记住你的安装路径，后面需要
这里的path就是环境变量，文章后面会讲如何手动配置环境变量
最后点击安装即可
二、配置系统环境变量
前面我们讲到了记住你的安装路径，找到它双击打开
双击bin打开，并复制文件路径 我的是D:\Microsoft VS Code\bin，大家可自行对照
右击桌面上的此电脑 > 点击属性 > 点击相关设置里的高级系统设置
单击环境变量
找到用户变量和系统变量里的path，双击path编辑
点击新建，粘贴刚才复制的路径，确定
上下path路径操作一致，完成后一直点确定，环境变量配置成功
三、Visual Studio Code安装插件
双击桌面上的Visual Studio Code
找到左边的四个方块就是拓展，点击搜索chinese，找到第一个简体中文点蓝色按钮安装
点击右下角弹出的蓝色按钮即简体中文安装成功 重启软件也能达到预期效果
后面的插件需要什么安装什么，只做数据可视化就可以只安装以下插件
至此，安装完成
拓展-Visual Studio Code，eclipse，jupyter数据可视化效果对比
Visual Studio Code
特点：VS Code是一个轻量级的源代码编辑器，其主要功能并不是渲染可视化，但强在插件众多，安装方便，使用简洁。在网页中展示效果，渲染效果好，动态视觉强。
eclipse
特点：Eclipse是一个集成开发环境，支持以java为主的多种语言，其本身也不支持数据可视化功能，需要安装插件，但插件安装复杂，胜在内置环境运行。
jupyter
特点：Jupyter是一个基于Web的交互式计算环境，可以直接在浏览器里编辑代码，可以实现分布操作，提供了丰富的数据可视化库和工具，但功能较单一。
总结：VS Code和Eclipse更适合通过编写代码来实现数据可视化，而Jupyter则更适合通过交互式计算和Notebook来实现数据可视化，其主要功能各有差异，根据需求选择即可。
案例代码，需要的朋友可以自取：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 800px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
title: {
text: '世界人口总量',
subtext: '数据来自网络',
},
tooltip: {
trigger: 'axis',
},
legend: {
data: ['2011年', '2012年'],
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true },
},
},
calculable: true,
xAxis: [
{
type: 'value', //设置柱状图
boundaryGap: [0, 0.01],
},
],
yAxis: [
{
type: 'category',
data: ['A国', 'B国', 'C国', 'D国', 'E国', '世界人口(万)'],
},
],
series: [
{
name: '2011年',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230],
},
{
name: '2012年',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807],
},
],
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>对比
| Visual Studio Code/Visual Studio for Mac | Eclipse | Jupyter | |
|---|---|---|---|
| 可视化插件/功能 | 有限的可视化插件支持，主要针对调试时的数据可视化 | 强大的可视化插件，支持直观的用户界面设计和调试 | 无内置可视化功能，但通过插件和库支持丰富的数据可视化 |
| 用户界面设计 | 不直接支持用户界面设计 | 提供直观的界面设计工具，通过拖拽控件和设定属性创建用户界面 | 主要用于数据分析和可视化，不直接支持用户界面设计 |
| 调试支持 | 提供调试程序用户界面支持，允许可视化变量、字段或属性的值 | 集成调试器，可直观查看代码执行过程中的信息 | 主要用于数据分析和可视化，调试功能相对较弱 |
| 数据库连接 | 可能通过插件支持数据库连接 | 支持多种数据库连接方式，可直接通过插件操作数据库 | 主要用于数据分析和可视化，可能通过库支持数据库连接 |
| 数据可视化类型 | 主要针对调试数据的可视化，如变量和字段的值 | 可视化界面设计和调试数据的可视化 | 支持多种数据可视化类型，如聚类输出、分布饼图等 |
| 集成开发环境 | 完整的集成开发环境，支持多种编程语言 | 完整的集成开发环境，以Java为主，但也支持其他语言 | 主要用于Web应用开发和数据科学，提供交互式编程环境 |
| 学习曲线 | 对于初学者友好，易于上手 | 对于初学者可能有一定的学习曲线，但功能强大 | 对于数据科学家和数据分析师友好，易于进行交互式数据分析 |
| 社区支持 | 拥有庞大的用户社区和丰富的资源 | 拥有活跃的开发者社区和大量的教程 | 在数据科学和机器学习领域拥有广泛的社区支持 |
瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手
更多推荐
16
0- 0
已为社区贡献2条内容
所有评论(0)