大数据可视化准备工作

贺知煜

已于 2024-03-11 23:52:53 修改

阅读量462

点赞数 3

CC 4.0 BY-SA版权

文章标签： vscode

于 2024-03-04 11:13:51 首次发布

本文链接：https://blog.youkuaiyun.com/a040607/article/details/136447065

第一步

下载 vs studio code 搜索官网地址

下载地址：Download Visual Studio Code - Mac, Linux, Windows

第二步

选择平台下载安装

第三步

安装后启动，选择左边第五个按键（扩展下载）

下载中文汉化包，下载好后即右下角弹出窗口

点击刷新，即是汉化版

然后依次下载 HTML snippcts , javascript , open in browser

第四步

与eclipse对比先演示eclipse 版本

Eclipse 安装前步骤需安装java 并且配置环境

Java jdk 下载打开浏览器输入网址 Oracle | Cloud Applications and Cloud Platform，进入Oracle官网

在官网首页菜单栏，点击Products，在Software中找到Java，单击该选项

下翻到此界面点击 Orcle jdk

选择jdk版本以及型号在jdk17 版本之后无需手动配置环境。

下载完成后安装

win10 java 环境配置演示

eclipse 操作步骤新建项目project

选择java project

创建三个folder 命名为 js ,css ,image

导入echarts.js ，echarts.min.js 到 js 中

链接：https://pan.baidu.com/s/1mvoaXY6T77c_7Z_OHZ_9zQ
提取码：0000

创建文件html 文件

案例演示

注：头部src后面接js的绝对路径

代码案例 (网上借鉴)

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