目录

一、下载并安装Visual Studio Code

二、配置系统环境变量

三、Visual Studio Code安装插件

拓展-Visual Studio Code,eclipse,jupyter数据可视化效果对比

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应用开发和数据科学,提供交互式编程环境
学习曲线 对于初学者友好,易于上手 对于初学者可能有一定的学习曲线,但功能强大 对于数据科学家和数据分析师友好,易于进行交互式数据分析
社区支持 拥有庞大的用户社区和丰富的资源 拥有活跃的开发者社区和大量的教程 在数据科学和机器学习领域拥有广泛的社区支持

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐