更多的程序员文章收录在
文章目录
只看echarts示例代码可能还是比较迷糊：
用导图分析一下：
后面的配套资源里也有B站的实战项目加图表的讲解。
大前端的技术包括哪些，学习谁家的？
html5 流行以来，其实，前端的地位就一涨再涨。事实上很多公司的前端工程师数量都远远超过了后端的工程师数量，而前端的技术也越来越难，VUE就是很典型的例子。
关于学习的视频呢，第一选择就是B站了。如果我有时间那可能会发布一些与博客相匹配内容的视频。
其它的，有基础的就直接去B站搜，这样学习起来是最快的。
如果说全套的，我一般都推荐黑马的视频。
我选择视频并不是从讲的带劲的角度出发（程序员可能会更喜欢看狂神说系列），基本上我选择视频的原则就是
1声音标准(这一条占的比重非常的大，因为全国各地的口音真的太不相同了但是大家都没有说听不懂中央的新闻联播，而每个地方听其它地方的口音则分别有听不懂，或需要想一想的可能)
2 画面清，能看清代码（时代不同了，以前这个条件算相当的高的，240P，320P的视频我都看了不少，想想以前学习的条件真的是一把辛酸泪）
3 难度适中。（视频这个东西嘛，一般一个系列都会讲的详细，但是太过于详细，大篇大篇的代码呀字段呀，让初学者完全头大）
4 名气（总不能看着看着，这个播主把视频下架了吧？而且是看的人多，你自然也就有更多的同学者，也方便你去问别人问题）
黑马的视频是一般的技术都有，而且他的老师的风格一致，你没有啥适应的过程。
而黑马的视频就更是把VUE,html,js,css直接合并在了JAVAWEB的视频里。请参见《黑马B站视频JAVAWEB部分的知识范围、学习步骤-【思维导图知识范围】》
同样如下图，右侧为比较基础的内容
JavaScrip语言
Javascript是基于对象的脚本语言，主要是基于客户端运行的，用户点击带有Javascript的网页，网页里的Javascript就传到浏览器，由浏览器对此作处理。它的代码可以直接嵌入到HTML命令中，最大特点是可以方便操纵网站上的元素，并与Web浏览器交互，同时JavaScrip可以捕捉用户操作并作出反映。
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常常用来给HTML网页添加动态功能，比如响应用户的各种操作。JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。在HTML基础上，使用Javascript可以开发交互式Web网页。Javascript的出现使得网页和用户之间实现了一种实时的、动态的关系，使网页中包含更多 的活跃元素和更加精彩的内容。在本系统中很多地方使用了javascript技术，比如说，检验用户输入数据的有效性，是否重复，是否为空等等。
环境及工具：
本系列环境(其实JS本身没有啥工具的要求，复杂的webstorm可以，简单的editplus 也是可以)，大家随意看看。
| 环境 | win11 |
|---|---|
| 工具 | hbuilderX |
| 工具2 | WEBstorm |
| 浏览器 | Chrome |
| 项目导入方式 | 目录 导入 |
上效果图
应该说图表里最常见的就是曲线图，折线图，饼图，与柱状图了。
如下图的 三种柱状图
还有这种横向的。因为页面的布局的原因，有人是电脑上，有人是平板上。
定制颜色
首先，我们看工程目录：
要注意的是有两个目录，一个是JS目录，内有三个JS文件。
还有一个目录是JSON目录，如果有需要跟后台调试的小伙伴，那后台没做好之前，你页面要怎么写？就是自己的工程里放JSON文件就好。后期后台的小伙伴写好代码了，再把链接一换就行了。
我的建议是学图表都从饼图开始，因为饼图最所有的图表里最简单的。没有数轴，也没有太多的设置
可以参考这篇：
【WEB前端实战】echarts常见饼图图表，饼图，环形图（轮胎图），玫瑰图实现【附学习教程】
页面代码(柱状图)
一个最容易的柱状图，以及最详细的注释
相应的最详细的逐行注释如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts</title>
</head>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<body style="background-color:#333;"><!-- -->
<div id="_top" style="width:600px;height: 400px;margin-top:100px;margin-left: 300px;">
</div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('_top'));
// 指定图表的配置项和数据
var option = {
//-------------- 标题 title ----------------
title: {
text: '主标题',
textStyle:{ //---主标题内容样式
color:'#fff'
},
subtext:'副标题', //---副标题内容样式
subtextStyle:{
color:'#bbb'
},
padding:[0,0,100,100] //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位
},
//---------------- 图例 legend -----------------
legend: {
type:'plain', //----图例类型，默认为'plain'，当图例很多时可使用'scroll'
top:'1%', //----图例相对容器位置,top\bottom\left\right
selected:{
'销量':true, //----图例选择,图形加载出来会显示选择的图例，默认为true
},
textStyle:{ //----图例内容样式
color:'#fff', //---所有图例的字体颜色
//backgroundColor:'black', //---所有图例的字体背景色
},
tooltip:{ //图例提示框，默认不显示
show:true,
color:'red',
},
data:[ //----图例内容
{
name:'销量',
icon:'circle', //----图例的外框样式
textStyle:{
color:'#fff', //----单独设置某一个图例的颜色
//backgroundColor:'black',//---单独设置某一个图例的字体背景色
}
}
],
},
//-------------- 提示框 -----------------
tooltip: {
show:true, //---是否显示提示框,默认为true
trigger:'item', //---数据项图形触发
axisPointer:{ //---指示样式
type:'shadow',
axis:'auto',
},
padding:5,
textStyle:{ //---提示框内容样式
color:"#fff",
},
},
//------------- grid区域 ----------------
grid:{
show:false, //---是否显示直角坐标系网格
top:80, //---相对位置，top\bottom\left\right
containLabel:false, //---grid 区域是否包含坐标轴的刻度标签
tooltip:{ //---鼠标焦点放在图形上，产生的提示框
show:true,
trigger:'item', //---触发类型
textStyle:{
color:'#666',
},
}
},
//------------- x轴 -------------------
xAxis: {
show:true, //---是否显示
position:'bottom', //---x轴位置
offset:0, //---x轴相对于默认位置的偏移
type:'category', //---轴类型，默认'category'
name:'月份', //---轴名称
nameLocation:'end', //---轴名称相对位置
nameTextStyle:{ //---坐标轴名称样式
color:"#fff",
padding:[5,0,0,-5], //---坐标轴名称相对位置
},
nameGap:15, //---坐标轴名称与轴线之间的距离
//nameRotate:270, //---坐标轴名字旋转
axisLine:{ //---坐标轴 轴线
show:true, //---是否显示
//------------------- 箭头 -------------------------
symbol:['none', 'arrow'], //---是否显示轴线箭头
symbolSize:[8, 8] , //---箭头大小
symbolOffset:[0,7], //---箭头位置
//------------------- 线 -------------------------
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{ //---坐标轴 刻度
show:true, //---是否显示
inside:true, //---是否朝内
lengt:3, //---长度
lineStyle:{
//color:'red', //---默认取轴线的颜色
width:1,
type:'solid',
},
},
axisLabel:{ //---坐标轴 标签
show:true, //---是否显示
inside:false, //---是否朝内
rotate:0, //---旋转角度
margin: 5, //---刻度标签与轴线之间的距离
//color:'red', //---默认取轴线的颜色
},
splitLine:{ //---grid 区域中的分隔线
show:false, //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
lineStyle:{
//color:'red',
//width:1,
//type:'solid',
},
},
splitArea:{ //--网格区域
show:false, //---是否显示，默认false
},
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//内容
},
//---------------------- y轴 ------------------------
yAxis: {
show:true, //---是否显示
position:'left', //---y轴位置
offset:0, //---y轴相对于默认位置的偏移
type:'value', //---轴类型，默认'category'
name:'销量', //---轴名称
nameLocation:'end', //---轴名称相对位置value
nameTextStyle:{ //---坐标轴名称样式
color:"#fff",
padding:[5,0,0,5], //---坐标轴名称相对位置
},
nameGap:15, //---坐标轴名称与轴线之间的距离
//nameRotate:270, //---坐标轴名字旋转
axisLine:{ //---坐标轴 轴线
show:true, //---是否显示
//------------------- 箭头 -------------------------
symbol:['none', 'arrow'], //---是否显示轴线箭头
symbolSize:[8, 8] , //---箭头大小
symbolOffset:[0,7], //---箭头位置
//------------------- 线 -------------------------
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{ //---坐标轴 刻度
show:true, //---是否显示
inside:true, //---是否朝内
lengt:3, //---长度
lineStyle:{
//color:'red', //---默认取轴线的颜色
width:1,
type:'solid',
},
},
axisLabel:{ //---坐标轴 标签
show:true, //---是否显示
inside:false, //---是否朝内
rotate:0, //---旋转角度
margin: 8, //---刻度标签与轴线之间的距离
//color:'red', //---默认取轴线的颜色
},
splitLine:{ //---grid 区域中的分隔线
show:true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
lineStyle:{
color:'#666',
width:1,
type:'dashed', //---类型
},
},
splitArea:{ //--网格区域
show:false, //---是否显示，默认false
}
},
//------------ 内容数据 -----------------
series: [
{
name: '销量', //---系列名称
type: 'bar', //---类型
legendHoverLink:true, //---是否启用图例 hover 时的联动高亮
label:{ //---图形上的文本标签
show:false,
position:'insideTop', //---相对位置
rotate:0, //---旋转角度
color:'#eee',
},
itemStyle:{ //---图形形状
color:'blue',
barBorderRadius:[18,18,0,0],
},
barWidth:'20', //---柱形宽度
barCategoryGap:'20%', //---柱形间距
data: [3020, 4800, 3600, 6050, 4320, 6200,5050,7200,4521,6700,8000,5020]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
当然了，在项目里应该这样写，太多的注释让别人感觉你很小白。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<!-- 引入 echarts.js -->
<script src="./js/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="./js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
</script>
</body>
</html>
如果是异步：也就是数据要从jquery /vue 里再取一次的话：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<!-- 引入 echarts.js -->
<script src="./js/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="./js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
</script>
</body>
</html>
其中这一行也有可能是后台的某链接。
$.get('data.json').done(function (data)
只看代码可能还是比较迷糊：
用导图分析一下：
详细的分析就是如下：
直接 柱 图加颜色呢？（其实反复理解上面的图表组件，就可以明白，饼图与柱图的颜色其实是一样的）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<!-- 引入 echarts.js -->
<script src="./js/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="./js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '异步数据加载示例'
},
color: ['#E066FF', '#FF9F7F', '#FFD700', '#C9C9C9', '#7EC0EE', '#C0FF3E'],
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
</script>
</body>
</html>
值得注意的是： color其实是与series 是同级的，
也即图表的各组件是同级的。
那如何跟后台交互呢？
这里要借用一下JQuery. $.get
跟前台与后台交互其它的值一样。当然，这里为了代码简洁没有JSON解析部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<!-- 引入 echarts.js -->
<script src="./js/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="./js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (radata) {
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: radata
}]
});
});
</script>
</body>
</html>
要注意的是这个data
而这个JSON的结构，并不是符合项目的正规的code ,MSG,data 这样。可以说这是最简洁的前台代码小哥来进行调试图表的数据。
柱状图的json 结构要复杂一点。
篇幅关系。其它的类似饼的图，全放在了配套资源的下载包里
附：前端开发工具介绍
HBuilderX
H 是 HTML 的首字母，Builder 是构造者，X 是 HBuilder 的下一代版本。我们也简称 HX。 HX 是轻如编辑器、强如 IDE 的合体版本。
让我们简单了解下 HX 的特点
轻巧 仅 10 余 M 的绿色发行包 (不含插件)
极速 不管是启动速度、大文档打开速度、编码提示，都极速响应 C++ 的架构性能远超 Java 或 Electron 架构
vue 开发强化 HX 对 vue 做了大量优化投入，开发体验远超其他开发工具 详见
小程序支持 国外开发工具没有对中国的小程序开发优化，HX 可新建 uni-app 或小程序、快应用等项目，为国人提供更高效工具
markdown 利器 HX 是唯一一个新建文件默认类型是 markdown 的编辑器，也是对 md 支持最强的编辑器 HX 为 md 强化了众多功能，请务必点击【菜单 - 帮助 - markdown 语法示例】，快速掌握 md 及 HX 的强化技巧！
清爽护眼 HX 的界面比其他工具更清爽简洁，绿柔主题经过科学的脑疲劳测试，是最适合人眼长期观看的主题界面 详见
强大的语法提示 HX 是中国唯一一家拥有自主 IDE 语法分析引擎的公司，对前端语言提供准确的代码提示和转到定义 (Alt + 鼠标左键)
高效极客工具 更强大的多光标、智能双击… 让字处理的效率大幅提升 了解 HX 的极客技巧，详见，
更强的 json 支持 现代 js 开发中大量 json 结构的写法，HX 提供了比其他工具更高效的操作 详见
扩展性
HX 支持 java 插件、nodejs 插件，并兼容了很多 vscode 的插件及代码块。 还可以通过外部命令，方便的调用各种命令行功能，并设置快捷键。
如果你习惯了其他工具 (如 vscode 或 sublime) 的快捷键，在菜单工具 - 快捷键方案中可以切换。
vscode
VSCode（全称：Visual Studio Code）是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。
VS Code 使用 Monaco Editor 作为其底层的代码编辑器。
在 2019 年的 Stack Overflow 组织的开发者调查中，Visual Studio Code 被认为是最受开发者欢迎的开发环境。
Visual Studio Code 默认支持非常多的编程语言，包括 JavaScript、TypeScript、CSS 和 HTML；也可以通过下载扩展支持 Python、C/C++、Java 和 Go 在内的其他语言。支持功能包括语法高亮、括号补全、代码折叠和代码片段；对于部分语言，可以使用 IntelliSense。Visual Studio Code 也支持调试 Node.js 程序。和 GitHub 的 Atom一样，Visual Studio Code 也基于 Electron 框架构建。
Visual Studio Code 支持同时打开多个目录，并将信息保存在工作区中以便复用。
作为跨平台的编辑器，Visual Studio Code 允许用户更改文件的代码页、换行符和编程语言。
webstorm
● 优点：
- 集成度高：WebStorm 将许多 Web 开发所需要的工具和功能，包括代码编辑器、调试器、版本控制、测试工具等等都直接集成在了软件内，安装完毕可以直接获得这些工具所提供的能力和便捷, 可以方便地完成整个 Web 开发流程。
- 支持多种技术：WebStorm 支持多种前端和后端技术，如 HTML、CSS、JavaScript、React、Angular、Vue.js、Node.js 等等，甚至包括 sass, less, ts 等文件的编译也直接内置在了软件内, 一次安装便可以满足开发者的各种需求。
- 智能代码提示和自动补全：WebStorm 的智能代码提示和自动补全功能可以帮助开发者减少敲击键盘的次数，提高开发效率。
- 调试功能强大：WebStorm 的调试功能非常强大，可以方便地调试前端和后端代码，查找代码中的错误和问题。
- 丰富的插件库：WebStorm 除了自己本身内置有大量的工具和功能, 也有有大量的插件在自己的生态系统内可供选择，可以方便地扩展其功能。
● 缺点： - 价格较高：WebStorm 是一款商业软件，不是开软编辑器, 需要付费使用(支持正版), 价格相对较高，对于个人开发者来说可能有些昂贵.
- 学习曲线较陡峭：WebStorm 功能非常丰富，因此学习曲线较陡峭，需要花费一定的时间和精力去学习使用, 尤其是内置的一些高级功能, 需要我们花费大量的时间和精力去研究.
- 占用资源较多：WebStorm 占用的资源较多，需要你的电脑配置相对比较好一些, 不然没办法流畅的运行.
- 只适用于 Web 开发：WebStorm 是专门为 Web 开发设计的 IDE 工具，因此对于其他类型的开发可能不太适用. 这就是 JetBrains 公司的特点, 做什么都专精一个, 比如他们会有对应 PHPStorm, JavaStorm 来支持其他语言的开发.
配套资源
吐血推荐我的开源项目：
里面的前端技术足够你成大牛
https://gitee.com/course-assistance/javascript_dev
还有就是在JAVAWEB项目当中的应用：
B站的 项目增加图表，饼图，柱图 讲解
【JAVAWEB教程】停车场项目如何加统计图表
扫一扫
1746
到【灌水乐园】发言
