第一步 下载
这一步我们将在Visual Studio Code的官网上下载软件
官网： Visual Studio Code - Code Editing. Redefined
第二步 扩展
完成前面协议且更改路径，如果不是中文则进入扩展下载Chinese（简体中文）
我们点击安装，安装后右下角直接可以刷新
然后我们继续扩展其他组件
第一个 JavaScript
第二个 open in browser
第三个 HTML
之后我们在回到扩展界面的已安装界面有四个组件
第三步 正篇
我们点击文件——将文件夹添加到工作区...
这一步我们可以新建也可以选择别的已经建好的文件（我也是小白建议新建）
创完成后在自己建的文件夹上右击——新建文件夹...（比如我在222上右击 不要跑到别处了之后基本都在Visual Studio Code里）
创下如下文件夹
随后找到这两个文件复制到 js 文件夹中（这步比较关键，没有文件找老师要）
再新建文件
改名如下（包括扩展名）
然后基本就完成了
代码附上
//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>
Java篇
先New一个项目 名字随取建议英文字母开头
再在刚建的项目上面右键New一个文件
老步骤
老步骤 复制到 js 里
关键来了 在你建在项目上右击
找到
复制案例或打完代码后右击
效果
2071
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
