0
0

2024年前端最全Echarts数据可视化教程(超详细，持续更新中，学习前端开发的步骤,

React

  • 介绍一下react
  • React单项数据流
  • react生命周期函数和react组件的生命周期
  • react和Vue的原理，区别，亮点，作用
  • reactJs的组件交流
  • 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
  • 项目里用到了react，为什么要选择react，react有哪些好处
  • 怎么获取真正的dom
  • 选择react的原因
  • react的生命周期函数
  • setState之后的流程
  • react高阶组件知道吗？
  • React的jsx，函数式编程
  • react的组件是通过什么去判断是否刷新的
  • 如何配置React-Router
  • 路由的动态加载模块
  • Redux中间件是什么东西，接受几个参数
  • redux请求中间件如何处理并发

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  1.   },
  2.   // 系列列表
  3.   series: [{
  4.     name: '悬赏金',
  5.     //图标类型 bar柱状图
  6.     type: 'bar',
  8.     data: [92, 80, 72]
  9.   }]
  10. }
  2. **以上代码运行效果图**  
  3.  ![在这里插入图片描述](https://img-blog.csdnimg.cn/dd1e75c7ba4f4acc8aaa0f71b3d4409d.png#pic_center)
  5. ## 三、Echarts的常用图表
  7. ##### 3.1 通用配置
  9. 通用配置指的就是任何图表都能使用的配置
  11. ###### 3.1.1、标题:title
  13. **☞** [Echarts中的title配置项手册](https://bbs.csdn.net/topics/618166371)
  15. * 文字样式  
  16.   `textStyle`
  17. * 标题边框  
  18.  borderWidth边框宽度、borderColor边框颜色、borderRadius标题圆角
  19. * 标题的位置  
  20.  left(左)、top(上)、right(右)、bottom(下)
  22. ###### 3.1.2、提示:tooltip
  24. **☞** [Echarts中的tooltip配置项手册](https://bbs.csdn.net/topics/618166371)  
  25.  tooltip：提示框组件，用于配置鼠标滑过或点击图表时的显示框
  27. * 触发的类型：trigger  
  28.  item(移入到轴内部触发)、axis(在轴上就会触发)
  29. * 触发的时机：triggerOn  
  30.  mouseover(鼠标滑过的时候展示)，click(点击的时候触发)
  31. * 格式化：formatter  
  32.  支持字符串模板、回调函数  
  33.  **☞**[formatter使用字符串模板、回调函数方法和注意事项](https://bbs.csdn.net/topics/618166371)
  35. ###### 3.1.3、工具按钮：toolbox
  37. **☞** [Echarts中的toolbox配置项手册](https://bbs.csdn.net/topics/618166371)  
  38.  toobox:ECharts提供的工具栏  
  39.  内置有导出图片、数据视图、动态类型切换、数据区域的缩放、重置五个工具
  41. * 显示工具栏按钮feature
  42.     + savaAsImage导出图片的功能
  43.     + dataView数据视图的功能
  44.     + restore重置的功能
  45.     + dataZoom区域缩放的功能
  46.     + magicType动态图表类型的切换
  48. ###### 3.1.4、图例：legend
  50. **☞** [Echarts中的legend配置项手册](https://bbs.csdn.net/topics/618166371)  
  51.  用于筛选系列，需要和series配合使用
  53. * legend中data是一个数组
  54. * legend中data的值需要和series数组中某组数据的name值一致
  56. **通用配置代码如下（示例）：**
  2. **以上代码运行效果图**
  4. 1. 标题:title  
  5.  ![在这里插入图片描述](https://img-blog.csdnimg.cn/94237fc4458747f68c778a9df7b61d9f.png#pic_center)
  6. 2. 提示:tooltip  
  7.  ![在这里插入图片描述](https://img-blog.csdnimg.cn/ddbc9f9b46a547968600ca2a23c3bfe3.png#pic_center)
  8. 3. 工具按钮：toolbox  
  9.  ![在这里插入图片描述](https://img-blog.csdnimg.cn/97bdfaebf388455b961bf832370e78b0.png#pic_center)  
  10.  ![在这里插入图片描述](https://img-blog.csdnimg.cn/6b42bb63b43e45e49bba668d487b0b67.png#pic_center)  
  11.  4.图例：legend

legend:{
data:[‘悬赏金’,‘战损’]
},

  2. **legend完整代码如下（示例）：**
  2. ![在这里插入图片描述](https://img-blog.csdnimg.cn/514f417fe9cb4b428751d5298ef6f7d7.png#pic_center)
  4. ##### 3.2、Echarts中的7大图表
  6. * 图表1：柱状图
  7. * 图表2：折线图
  8. * 图表3：散点图
  9. * 图表4：饼图
  10. * 图表5：地图
  11. * 图表6：雷达图
  12. * 图表7：仪表盘图
  14. ###### 3.2.1、图表1：柱状图
  16. **☞** [Echarts中的柱形图的常见效果配置项手册](https://bbs.csdn.net/topics/618166371)
  18. * 柱状图特点  
  19.  柱状图，描述的是分类数据，呈现的每一个分类中有多少，通过柱状图，可以很清晰看出每个分类数据的情况！
  21. `将数据通过柱状图来实现，以下是柱状图案例：`  
  22.  海贼悬赏金排行榜如下：

1.哥尔·D·罗杰 55亿6480万贝里
2.艾德华·纽盖特 50亿4600万贝里
3.海道 46亿1100万贝里
4.夏洛特·莉莉 43亿8800万贝里
5.红发杰克 40亿4890万贝里
6.蒙奇·D·路飞 30亿贝里（不排名先后顺序）
7.尤斯塔斯·基德 30亿贝里（不排名先后顺序）
8.托拉法尔加·罗 30亿贝里（不排名先后顺序）
9.马歇尔·D·汀奇 22亿4760万贝里
10.KING(亚尔贝鲁) 13亿9000万贝里

  2. **实现步骤**
  4. 1. Echarts最基本的代码结构：  
  5.  引入js文件。DOM容器，初始化对象，设置option
  6. 2. X轴数据：  
  7.  数组1 : [‘哥尔·D·罗杰’,‘.艾德华·纽盖特’,‘海道’,‘.夏洛特·莉莉 ‘,‘红发杰克’,’.蒙奇·D·路飞’,‘尤斯塔斯·基德’,‘托拉法尔加·罗’,‘马歇尔·D·汀奇’,‘KING(亚尔贝鲁’]
  8. 3. Y轴的数据:  
  9.  数组2：[55.648,50.46,46.11,43.88,40.489,30,30,30,22.476,13.9]
  10. 4. 图表类型:  
  11.  在series下设置type:bar
  13. **代码如下（示例）：**

Document

  2. **以上代码运行效果图**  
  3.  ![在这里插入图片描述](https://img-blog.csdnimg.cn/c3797138197e4038b6336761baf133ad.png#pic_center)
  5. ###### Echarts中的柱形图的常见效果
  7. **☞** [Echarts中的柱形图的常见效果配置项手册](https://bbs.csdn.net/topics/618166371)  
  8.  **1.标记:** markPoint(配置最大值 、最小值) 、markLine(配置平均值)  
  9.  **2.显示:** label设置show为true(数值显示) 、barWidth(柱宽度）、x轴和y轴配置互换一下(横向柱状图)，rotate(旋转)  
  10.  `在series配置代码如下(实例)`

series:[{
name:‘海贼悬赏金排行榜’,
type:‘bar’,
data:yDataArr,
label:{
// show为true数值显示
show:true,
// rotate旋转
rotate:60,
// position数值显示位置
// position:‘top’
},
// barWidth柱宽度(没一列宽度)
barWidth:‘80%’,
//markPoint(配置最大值 、最小值）
markPoint:{
data:[{
type:‘max’,
name:‘最大值’
},{
type:‘min’,
name:‘最小值’
}]
},
//markLine(配置平均值 ）
markLine:{
data:[{
type:‘average’,
name:‘平均值’
}]
}
}]

  2. 以上代码运行效果图  
  3.  ![在这里插入图片描述](https://img-blog.csdnimg.cn/38cc6c00859a463c814a52b220871094.png#pic_center)
  5. ###### 3.2.2、图表2：折线图
  7. **实现步骤**
  9. ### 最后
  11. 为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。
  13. **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
  15. ![](https://img-blog.csdnimg.cn/img_convert/ebac2ab824bae173dc22054a17212598.png)
  17. ![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)
标签： 前端 echarts 信息可视化
本文转载自: https://blog.csdn.net/2401_84447390/article/details/138496792
版权归原作者 2401_84447390 所有， 如有侵权，请联系我们删除。
登录后发布评论

“2024年前端最全Echarts数据可视化教程(超详细，持续更新中，学习前端开发的步骤,”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。