第一步:检查电脑是否安装了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文件是在文件夹中打开的即可。
运行结果: