eclipse与Vscode

发财糕

已于 2024-03-06 10:44:23 修改

阅读量963

点赞数 15

文章标签： eclipse java ide 编辑器 vscode

于 2024-03-06 10:43:52 首次发布

发财糕

本文链接：https://blog.youkuaiyun.com/zhangfafa_c/article/details/136447595

版权

本文介绍了如何在Eclipse和VSCode环境下，通过创建CSS、JS和HTML文件，以及粘贴ECharts代码实现数据可视化。步骤包括在VSCode中安装相关插件，创建饼状图实例展示大学学院专业分布数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

eclipse

创建文件

创建三个所需文件，css、image、js

eclipse

创建文件

finish

创建三个所需文件，css、image、js

点击js右键创建两个file文件并命名为echarts.js与echarts.min.js

创建完如图

echarts.js文件

echarts.min.js文件

创建html文件在new中选择最后一个

然后finish

粘贴案例代码

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

粘贴保存运行

运行界面

Vscode

Vscode安装与安装相关插件教程：

教程http://t.csdnimg.cn/MfdIM

创建以下文件

粘贴代码

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

Alt+B运行代码