Visual Studio Code和eclipse新建Echarts简单案例（简单的对比）

小白学data

于 2024-03-04 16:04:27 发布

阅读量583

点赞数 10

文章标签： vscode ide 编辑器

本文链接：https://blog.csdn.net/weixin_68473774/article/details/136447629

版权

一、以Visual Studio Code新建

1、打开 Visual Studio Code 新建工作区

新建一个Echarts1文件夹

2、然后在当目录下新建 scc和js，image文件夹

然后去下载Echarts.js

链接：https://pan.baidu.com/s/1OmNWBTHuuxPZfo-QE7b0ng
提取码：efde

3、把Echarts.js放在js目录下

4、在Echar目录下新建一个一个thml文件

5、安装一个open in browser 插件

6、运行 (注意：一定要先保存！！！后在运行哦)

案例1

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

然后右击选择 open in default Browser 或者快捷键 ALT+B

如下所示

之后就会跳转到默认浏览器，呈现效果

所示

二、以eclipse新建

1、新建一个Echar项目

2、然后在当目录下新建 scc和js，image文件夹（点击folder）

3、把Echarts.js放在js目录下

4、然后在主目录下新建一个thml文件

（1）点击 Other

（2）点击后往下找到web，选择 HTML File

(3) 直接下一步，可以得到如图所示的内容

5、测试

这里就直接用上面的代码 (注意：一定要先保存！！！后在运行哦)

然后右击选择 open With 的 Web Browser运行

呈现出如下效果即可

三、Visual Studio Code和eclipse简单的对比（当前自己的理解）

1、在Visual Studio Code中的Echarts可视化可以很好的呈现出很多动态效果，而eclipse中的echarts可视化只能显示单一的静态的效果，如果有动态的效果，既不会报错也不会显示为动态效果，只会显示为静态。

2、 Eclipse 的用户界面相对来说比较复杂，需要一些时间来适应。，功能并不是很多，而Visual Studio Coded的用户界面非常简洁，易于使用,功能强大，而且样式多样，工具齐全，可以通过扩展来增强编辑器的功能。

3、VSCode 是一个轻量级的代码编辑器，适合快速编辑和调试代码;而 Eclipse 是一个功能强大的集成开发环境，适合开发大型应用程序。

小白学data

关注

10
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
Visual Studio Code和eclipse新建Echarts简单案例（简单的对比）

1、在Visual Studio Code中的Echarts可视化可以很好的呈现出很多动态效果，而eclipse中的echarts可视化只能显示单一的静态的效果，如果有动态的效果，既不会报错也不会显示为动态效果，只会显示为静态。，功能并不是很多，而Visual Studio Coded的用户界面非常简洁，易于使用,功能强大，而且样式多样，工具齐全，可以通过扩展来增强编辑器的功能。2、然后在当目录下新建 scc和js，image文件夹（点击folder）4、在Echar目录下新建一个一个thml文件。
复制链接

扫一扫