vscode中Echarts的直接使用---Windows系统

阿罗的小小仓库

已于 2023-12-07 19:39:13 修改

阅读量3.3k

点赞数 12

文章标签： echarts 前端 javascript

于 2023-07-03 19:31:44 首次发布

本文链接：https://blog.csdn.net/weixin_51659315/article/details/131417363

版权

第一步：检查电脑是否安装了JDK

JDK(Java Development Kit) 是 Java 语言的软件开发工具包(SDK)。

SE(JavaSE)，standard edition，标准版，是我们通常用的一个版本，从JDK 5.0开始，改名为Java SE。

1、Windows检查方法：命令提示符--->输入：java -version

java -version

如果是如下图所示，则没有安装，需要安装。

2、安装教程：JDK安装教程（有图详解）_叼着奶瓶瓶敲代码的博客-CSDN博客

3、安装成功过后的输出为：

第二步：下载ECharts

ECharts 下载

1、进入ECharts中文网：Apache ECharts

2、进入下载中的Dist，

3、下载 echarts.min.js 文件

第三步：下载安装vscode

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

安装教程：vscode下载与安装_vscode下载安装_TimeBack-xy的博客-CSDN博客

第四步：vscode中使用ECharts画图示例

1. 创建文件：

打开vscode-->File-->New File...，命名为：ceshi.html

文件创建完成：

2：输入代码：

注意：红框处为你的echarts.min.js文件的地址，如果相对位置弄不清楚，建议直接放绝对位置。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts体验</title>

    <script src="js/echarts.min.js"></script>   <!-- 引入echarts.js -->
</head>

<body>
    <div id='div1' style='width: 800px; height: 600px'></div>
    <script>
        var mycharts = echarts.init(document.getElementById("div1"));
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },

            tooltip: {},
            legend: {
                data:['价格']
            },
            xAxis: {
                data:["苹果","草莓","榴莲","葡萄","荔枝","蓝莓"]
            },
            yAxis: {},
            series:[{
                name: '价格',
                type: 'bar',
                data: [5,20,36,10,10,20]
            }]
        };
        mycharts.setOption(option);
    </script>

</body>
</html>

3.运行代码：

在需要运行的html页面右键，选择open in default browser或者open in default browser。前者是用默认浏览器打开，后者是可以选择自己想用的浏览器打开。

如果右击后，没有该选项可以安装。

首先，点击扩展图标：

搜索open in default browser，并安装

安装成功后，再运行即可。

若是安装后，右击依旧没有选项。点开文件夹，确认html文件是在文件夹中打开的即可。

运行结果：

阿罗的小小仓库

关注

12
点赞
踩
55

收藏

觉得还不错? 一键收藏
7
评论
vscode中Echarts的直接使用---Windows系统

JDK(Java Development Kit) 是 Java 语言的(SDK)。SE(JavaSE)，standard edition，标准版，是我们通常用的一个版本，从JDK 5.0开始，改名为Java SE。：命令提示符--->输入：java -version如果是如下图所示，则没有安装，需要安装。
复制链接

扫一扫