Visual Studio Code, eclipse软件可视化使用方法

Hadint。

已于 2024-03-04 11:29:25 修改

阅读量556

点赞数 10

文章标签： vscode ide 编辑器

于 2024-03-04 11:28:57 首次发布

本文链接：https://blog.csdn.net/h_adint/article/details/136446848

版权

一.Visual Studio Code

二.eclipse

一.Visual Studio Code

1.下载安装包

下载网址:https://code.visualstudio.com/Download

2.安装扩展

扩展——中文语言包

安装完成——右下角刷新

扩展——JaveScript

扩展——HTML

扩展——open in browser

4.代码实例

创建工作分区

注意：文件不能创建再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: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {  //设置坐标轴指示器，坐标轴触发有效
                    type: 'shadow'  //设置坐标轴默认为直线，可选为:'line'|'shadow'
                }
            },
            legend: {
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告',
                    '搜索引擎', '百度', '谷歌', '必应', '其他']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '直接访问',
                    type: 'bar',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '邮件营销',
                    type: 'bar',
                    stack: '广告',  //设置堆积效果
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'bar',
                    stack: '广告',  //设置堆积效果
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'bar',
                    stack: '广告',  //设置堆积效果
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '搜索引擎',
                    type: 'bar',
                    data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                    markLine: {
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        },
                        data: [
                            [{ type: 'min' }, { type: 'max' }]
                        ]
                    }
                },
                {
                    name: '百度',
                    type: 'bar',
                    barWidth: 5,
                    stack: '搜索引擎',  //设置堆积效果
                    data: [620, 732, 701, 734, 1090, 1130, 1120]
                },
                {
                    name: '谷歌',
                    type: 'bar',
                    stack: '搜索引擎',  //设置堆积效果
                    data: [120, 132, 101, 134, 290, 230, 220]
                },
                {
                    name: '必应',
                    type: 'bar',
                    stack: '搜索引擎',  //设置堆积效果
                    data: [60, 72, 71, 74, 190, 130, 110]
                },
                {
                    name: '其他',
                    type: 'bar',
                    stack: '搜索引擎',  //设置堆积效果
                    data: [62, 82, 91, 84, 109, 110, 120]
                }
            ]
        };


        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>

</html>

效果

案例二

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

效果

二.eclipse

1.创建工作区导入js包

2.代码实例

//1案例
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 900px; height: 600px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {  //配置标题组件
                backgroundColor: 'yellow',  //设置主标题的背景颜色
                text: '某大学三大学院的专业分布',  //设置主标题的文字
                textStyle: {  //设置主标题文字样式
                    color: 'green',  //设置主标题文字的颜色
                    fontFamily: '黑体',  //设置主标题文字的字体
                    fontSize: 28  //设置主标题文字的大小
                },
                x: 'center'  //设置主标题左右居中
            },
            tooltip: {  //配置提示框组件
                trigger: 'item',  //设置提示框的触发方式
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {  //配置图例组件
                orient: 'vertical',  //设置图例垂直方向
                x: 32,  //设置图例的水平方向
                y: 74,  //设置图例的垂直方向
                data: ['1-软件技术', '1-移动应用开发', '2-大数据技术与应用', '2-移动互联应用技术',
                    '2-云计算技术与应用', '3-投资与理财', '3-财务管理']
            },
            toolbox: {  //配置工具箱组件
                show: true,  //设置工具箱是否显示
                x: 555,  //设置工具箱的水平位置
                y: 74,  //设置工具箱的垂直位置
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: false,
            series: [
                {
                    name: '专业名称',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: ['10%', '30%'],

                    label: {
                        position: 'inner'
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1200, name: '计算机学院' },
                        { value: 900, name: '大数据学院' },
                        { value: 600, name: '财金学院', selected: true }  //初始时为选中状态
                    ]
                },
                {
                    name: '专业名称',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: ['40%', '55%'],
                    data: [
                        { value: 800, name: '1-软件技术' },
                        { value: 400, name: '1-移动应用开发' },
                        { value: 500, name: '2-大数据技术与应用' },
                        { value: 200, name: '2-移动互联应用技术' },
                        { value: 200, name: '2-云计算技术与应用' },
                        { value: 400, name: '3-投资与理财' },
                        { value: 200, name: '3-财务管理' }
                    ]
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>

</html>

结果

Anaconda Navigator

选择并打开Jupyter

Hadint。

关注

10
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Visual Studio Code, eclipse软件可视化使用方法

扩展——中文语言包安装完成——右下角刷新扩展——JaveScript扩展——HTML扩展——open in browser4.代码实例创建工作分区注意：文件不能创建再js文件夹目录下效果案例二。
复制链接

扫一扫