Echarts数据可视化教程(超详细，持续更新中

于 2024-09-05 00:31:38 发布
阅读量1.1k 收藏 15
点赞数 12
文章标签： echarts 信息可视化 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_86400276/article/details/141907521
版权

前言

在这里插入图片描述
1.什么是数据可视化？

  • 把数据以图表(更直观)的形式展现 -->图表

2.数据可视化的好处

  • 清晰有效地传达与沟通信息
  • 更好的观察隐藏在数据中的信息

3.数据可视化的的实现方式

  • 报表类
    • Excel
    • 水晶报表
  • 商业智能BII
    • Microsoft BI
    • Power BI
  • 编码类(最佳灵活、门槛高)
    • Echarts.js
    • D3.js

一、Echarts的介绍？

Echarts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度 个性化定制的数据可视化图表。

  • Echarts能满足绝大多数可视化图表实现
    • 兼容性强
    • 使用方便
    • 功能强大
  • 实现数码可视化最佳选择之一

Echarts的特点

  • 开源免费 (遵循Apache-2.0开源协议，免费使用)

  • 功能丰富(涵盖各行业图表，满足各种需求)

  • 社区活跃

  • 移动端优化和跨平台使用

  • 绚丽的特效和三维可视化等等

  • 丰富的可视化类型

    • 折线图、柱状、饼图、k线图…

  • 多种数据格式支持

    • key-value数据格式
    • 二维表
    • TypedArray格式

  • 流数据的支持

    • 流数据的动态渲染
    • 增量渲染技术

  • 只有你想不到，没有它做不到，详情点击下方网址链接查阅

☞官网地址
在这里插入图片描述
☞Echarts特性介绍地址
在这里插入图片描述

二、Echarts的快速入门

2.1、Echarts的基本使用

获取 Apache ECharts

点击链接进入网页ctrl+s保存，即可下载echarts.js
也可 打开https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。也可通过别的方式。别的方式可查看官方文档！
在这里插入图片描述

  • 步骤1：引入echarts.js文件
  • 步骤2：准备一个呈现图标的盒子
  • 步骤3：初始化echarts实例对象
  • 步骤4：准备配置项 (最重要、最麻烦)
  • 步骤5：将配置项设置给你echarts实例对象

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 步骤1：引入echarts.js文件 -->
  <script src="lib/echarts.js"></script>
</head>

<body>
  <!-- - 步骤2：准备一个呈现图标的盒子 -->
  <div id="table1" style="width: 600px;height: 400px;background-color: antiquewhite;">
  </div>
  <script>
 // 步骤3：初始化echarts实例对象
 // 参数，dom元素，决定图表最终呈现的位置
 var mCharts = echarts.init(document.querySelector('#table1'))
 // 步骤4：准备配置项 \*\*(最重要、最麻烦)\*\*
 var option={
 xAxis :{
 type:'category',
 data:['路飞','索隆','娜美']
 },
 yAxis :{
 type:'value'
 },
 series:[{
 name:'悬赏金',
 type:'bar',
 data:[92,80,72]
 }]
 }
 // 步骤5：将配置项设置给你echarts实例对象
 mCharts.setOption(option)
 </script>
</body>

</html>

完成这五步就可以得到一个图表
在这里插入图片描述

2.2、 Echarts配置项的使用

点击下方链接，进入Echarts官网配置项手册
☞Echarts官网配置项手册

  • 以上步骤，除了配置项会变化之外，其他的代码都是固定的
  • 配置项的学习和使用应该参照官方文案和示例

常用配置项

  • xAxis：直角坐标系中的x轴
  • yAxis：直角坐标系中的y轴
  • series：系列列表，每个系列列表通过type决定自己的图标类型(给y轴提供数据的)
  • title：主标题文本
  • link：主标题文本超链接
  • textStyle主标题文本的样式
    代码如下（示例）：
  var option = {
      title: {
        // 主标题文本
        text: '海贼草帽团悬赏金',
        // 主标题文本点击之后的超链接
        link: 'http://www.baidu.com',
        // 主标题文本样式
        textStyle:{
          color:'red',
        }
      },
      // x轴
      xAxis: {
        //类目轴
        type: 'category',

        data: ['路飞', '索隆', '娜美']
      },
       // y轴
      yAxis: {
        //数值轴
        type: 'value'

      },
      // 系列列表
      series: [{
        name: '悬赏金',
        //图标类型 bar柱状图
        type: 'bar',

        data: [92, 80, 72]
      }]
    }

以上代码运行效果图
在这里插入图片描述

三、Echarts的常用图表

3.1 通用配置

通用配置指的就是任何图表都能使用的配置

3.1.1、标题:title

☞ Echarts中的title配置项手册

  • 文字样式
    textStyle
  • 标题边框
    borderWidth边框宽度、borderColor边框颜色、borderRadius标题圆角
  • 标题的位置
    left(左)、top(上)、right(右)、bottom(下)
3.1.2、提示:tooltip

☞ Echarts中的tooltip配置项手册
tooltip：提示框组件，用于配置鼠标滑过或点击图表时的显示框

3.1.3、工具按钮：toolbox

☞ Echarts中的toolbox配置项手册
toobox:ECharts提供的工具栏
内置有导出图片、数据视图、动态类型切换、数据区域的缩放、重置五个工具

  • 显示工具栏按钮feature
    • savaAsImage导出图片的功能
    • dataView数据视图的功能
    • restore重置的功能
    • dataZoom区域缩放的功能
    • magicType动态图表类型的切换
3.1.4、图例：legend

☞ Echarts中的legend配置项手册
用于筛选系列，需要和series配合使用

  • legend中data是一个数组
  • legend中data的值需要和series数组中某组数据的name值一致

通用配置代码如下（示例）：

<script>
 var mCharts = echarts.init(document.querySelector('#table1'))

 var option = {
 title: {
 text: '海贼草帽团悬赏金',
 link: 'http://www.baidu.com',
 // textStyle标题文本样式
 textStyle: {
 color: 'red',
 },
 // borderWidth标题边框宽度
 borderWidth: 1,
 // borderColor标题边框颜色
 borderColor: 'pink',
 // borderRadius标题边框圆角
 borderRadius:5,
 // left(左)、top(上)、right(右)、bottom(下)控制标题位置
 left:30
 },
 //tooltip提示
 tooltip: {
 // trigger触发的类型
 trigger: 'axis',
 // triggerOn触发的时机
 triggerOn: 'click',
 // formatter格式化
 // 方法一：字符串模板
 // formatter: '{b}的悬赏金是{c}亿'
 // 方法二：回调函数
 formatter:function(arg){
 console.log(arg)
 console.log(arg[0].name+'悬赏金是'+ arg[0].data)
 return arg[0].name+'悬赏金是'+ arg[0].data
 }
 },
 // toolbox工具按钮
 toolbox:{
 feature:{
 // savaAsImage导出图片的功能
 saveAsImage:{},
 // dataView数据视图的功能
 dataView:{},
 // restore重置的功能
 restore:{},
 // dataZoom区域缩放得功能
 dataZoom:{},
 // magicType动态图表类型的切换
 magicType:{
 type:['bar','line']
 }
 }
 },
 xAxis: {
 type: 'category',
 data: ['路飞', '索隆', '娜美']
 },
 yAxis: {
 type: 'value'
 },
 series: [{
 name: '悬赏金',
 type: 'bar',
 data: [92, 10., 10]
 }]
 }
 mCharts.setOption(option)
 </script>

以上代码运行效果图

  1. 标题:title
    在这里插入图片描述
  2. 提示:tooltip
    在这里插入图片描述
  3. 工具按钮：toolbox
    在这里插入图片描述
    在这里插入图片描述
    4.图例：legend
legend:{
   data:['悬赏金','战损']
},

legend完整代码如下（示例）：

 <script>

 var mCharts = echarts.init(document.querySelector('#table1'))
 let yDataArr1 = [92, 10.1, 10]
 let yDataArr2 = [50, 25, 22]
 var option = {
 // title标题
 title: {
 text: '海贼草帽团悬赏金',
 link: 'http://www.baidu.com',
 // textStyle标题文本样式
 textStyle: {
 color: 'red',
 },
 // borderWidth标题边框宽度
 borderWidth: 1,
 // borderColor标题边框颜色
 borderColor: 'pink',
 // borderRadius标题边框圆角
 borderRadius: 5,
 // left(左)、top(上)、right(右)、bottom(下)控制标题位置
 left: 30,
 },
 //tooltip提示
 tooltip: {
 // trigger触发的类型
 trigger: 'axis',
 // triggerOn触发的时机
 triggerOn: 'click',
 // formatter格式化
 // 方法一：字符串模板
 // formatter: '{b}的悬赏金是{c}亿'
 // 方法二：回调函数
 formatter: function (arg) {
 console.log(arg)
 console.log(arg[0].name + '悬赏金是' + arg[0].data)
 return arg[0].name + '悬赏金是' + arg[0].data
 }
 },
 // toolbox工具按钮
 toolbox: {
 feature: {
 // savaAsImage导出图片的功能
 saveAsImage: {},
 // dataView数据视图的功能
 dataView: {},
 // restore重置的功能
 restore: {},
 // dataZoom区域缩放得功能
 dataZoom: {},
 // magicType动态图表类型的切换
 magicType: {
 type: ['bar', 'line']
 }
 }
 },
 //legend 图例
 legend:{
 data:['悬赏金','战损']
 },

 xAxis: {
 type: 'category',
 data: ['路飞', '索隆', '娜美']
 },
 yAxis: {
 type: 'value'
 },
 series: [{
 name: '悬赏金',
 type: 'bar',
 data: yDataArr1
 },
 {
 name: '战损',
 type: 'bar',
 data: yDataArr2
 }]
 }

 mCharts.setOption(option)
 </script>

在这里插入图片描述

3.2、Echarts中的7大图表
  • 图表1：柱状图
  • 图表2：折线图
  • 图表3：散点图
  • 图表4：饼图
  • 图表5：地图
  • 图表6：雷达图
  • 图表7：仪表盘图
3.2.1、图表1：柱状图

☞ Echarts中的柱形图的常见效果配置项手册

  • 柱状图特点
    柱状图，描述的是分类数据，呈现的每一个分类中有多少，通过柱状图，可以很清晰看出每个分类数据的情况！

将数据通过柱状图来实现，以下是柱状图案例：
海贼悬赏金排行榜如下：

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万贝里

实现步骤

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

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/echarts.js"></script>
</head>

<body>
  <div id="table1" style="width: 1800px;height: 600px;"></div>
  <script>
 let mCharts = echarts.init(document.querySelector('#table1'))
 //1.xDataAr是X轴数据
 let xDataArr =['哥尔·D·罗杰','艾德华·纽盖特','海道','.夏洛特·莉莉 ','红发杰克','蒙奇·D·路飞','尤斯塔斯·基德','托拉法尔加·罗','马歇尔·D·汀奇','KING(亚尔贝鲁']
 //2.yDataAr是Y轴数据
 let yDataArr = [55.648, 50.46, 46.11, 43.88, 40.489, 30, 30, 30, 22.476, 13.9]
 var option = {
 xAxis: {
 type:'category',
 data:xDataArr
 },
 yAxis:{
 type:'value',
 },
 series:[{
 name:'海贼悬赏金排行榜',
 // 3. 图表类型:在series的type值设置为bar
 type:'bar',
 data:yDataArr
 }]
 }
 mCharts.setOption(option)
 </script>
</body>
2401_86400276
关注
ECharts 数据可视化 上 基础篇
m0_55170432的博客
04-01 1143
1.0 数据可视化 数据可视化主要目的： 借助于图形化手段，清晰有效地传达与沟通信息。 数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。 1.1 数据可视化的场景 目前互联网公司通常有这么几大类的可视化需求： 通用报表 移动端图表 大屏可视化 图编辑&图分析 地理可视化 1.2 常见的数据可视化库（国内主流用 ECharts） D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源
Echarts数据可视化教程(超详细，持续更新中(1)
2401_84418883的博客
04-28 1188
1.什么是数据可视化？把数据以图表(更直观)的形式展现 -->图表2.数据可视化的好处清晰有效地传达与沟通信息更好的观察隐藏在数据中的信息3.数据可视化的的实现方式报表类Excel水晶报表商业智能BIIPower BI编码类(最佳灵活、门槛高)Echarts.jsD3.jsEcharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度 个性化定制的数据可视化图表。
【Echarts数据可视化】一个项目带你学会酷炫的数据可视化
qq_44588612的博客
04-21 1万+
本文章主要使用echart 和 jQuery实现酷炫的数据可视化项目，对初学者来说，能快速上手数据可视话，编程小白也能根据复制粘贴实现项目哦！！！
echarts入门教程
zhangMY12138的博客
03-28 785
一、echarts介绍 ECharts是由百度团队开发的，可高度个性化定制的数据可视化图表库。它的底层依赖轻量级的Canvas类库ZRender，是一个纯JavaScript的图标库，兼容（IE8/9/10/11，Chrome，Firefox，Safari等）主流浏览器，可以运行在PC和移动设备上。 二、完成一个简单图标 废话不多说，一起来完成一个简单的图表，体验一下ECharts的神奇吧！...
ECharts 数据可视化 入门基本知识 下载安装常用的图表 【1】
最新发布
weixin_43483590的博客
08-13 2549
ECharts一个基于 JavaScript 的开源可视化图表库，即将数据以图形或图像的方式展现成在屏幕上显示出来，这种方式称为数据可视化。数据可视化有助于我们分析数据，帮助我们更深入更直观的理解数据
数据可视化——使用echars图表展示
Pan_peter的博客
06-01 2126
1. 功能强大，支持多种图表类型；2. 可以灵活定制图表风格；3. 支持数据动态更新和响应式布局。1. 对初学者来说，上手难度较大；2. 部分高级功能需要付费使用。1. 提供更详细的文档和教程；2. 增加更多示例代码和模板；3. 开源或者免费提供更多高级功能。1. 操作简单，易于上手；2. 可以添加文字、图片、动画等多种元素；3. 可以输出为PPT或PDF等格式。1. 功能不够专业化，无法满足一些高级需求；2. 交互性较差，难以实现数据动态更新。1. 加入更多专业化图表类型；
Echarts数据可视化教程(超详细，持续更新中....)
热门推荐
stc_ljc的博客
01-04 12万+
Echarts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度 个性化定制的数据可视化图表。持续更新中！！！
ECharts数据可视化
qq_63806300的博客
06-23 5653
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
数据可视化教程来了！
Datawhale
06-13 688
↑↑↑关注后"星标"Datawhale每日干货&每月组队学习，不错过Datawhale开源来自：Datawhale????数据可视化小组开源初衷Matplo...
2024年前端最全Echarts数据可视化教程(超详细，持续更新中，学习前端开发的步骤,
2401_84447390的博客
05-06 1212
项目里用到了react，为什么要选择react，react有哪些好处。有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢。6.蒙奇·D·路飞 30亿贝里（不排名先后顺序）7.尤斯塔斯·基德 30亿贝里（不排名先后顺序）8.托拉法尔加·罗 30亿贝里（不排名先后顺序）//markPoint(配置最大值 、最小值）react和Vue的原理，区别，亮点，作用。9.马歇尔·D·汀奇 22亿4760万贝里。1.哥尔·D·罗杰 55亿6480万贝里。data:[‘悬赏金’,‘战损’]
27【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32-9超宽大屏范例 - 监控指挥中心
03-16
本项目主要介绍如何使用Echarts和Python Flask框架构建一个32:9超宽屏幕的数据可视化大屏，适用于监控指挥中心等场景。数据可视化是将复杂数据集转化为易于理解的图形或图像过程，它有助于快速洞察数据，提升决策...
ECharts实现数据可视化入门教程（超详细）
2401_84092143的博客
04-19 945
ECharts入门教程。
Echarts数据可视化
weixin_46341513的博客
03-06 602
Echarts数据可视化 数据可视化 目的：借助于图像化手段，清晰有效地传达与沟通信息 场景： 通用报表、移动端图表、大屏可视化、图编辑&图分析、地理可视化 常见数据可视化 Echarts.js 开源JavaScript数据可视化库 Echarts简介 是一个使用JavaScript实现的开源可视化库 Echarts官网地址 基本使用 五步曲 1.下载并引入echart.js文件 2.准备一个具备大小的DOM容器 3.初始化echarts实例对象 4.指定配置项和数据 5.将配置项给echarts实
echarts实现数据可视化
m0_45052521的博客
11-18 2万+
目录 1.数据可视化前言 1.1什么是数据可视化 1.2数据可视化的好处 1.3数据可视化的实现方式 2.ECharts的基本使用 2.1ECharts的快速上手 2.2相关配置 3.ECharts常用图表 3.1柱状图 3.2折线图 3.3堆叠图 3.4散点图 3.5直角坐标系常见配置 1.数据可视化前言 1.1什么是数据可视化 数据可视化，简单来说就是把数据以更加直观的方式进行呈现。 例如一组数据 我们可以用图表的形式形式呈现出来 1.2数据可视化的..
echarts数据可视化
weixin_45746689的博客
03-01 4093
目录实现目的实现原理实验环境实验步骤实验一：利用在线调试工具制作简单的折线图实验二：本地利用echarts绘制柱状图制作一个柱状图 实现目的 熟悉echarts数据可视化的使用方法 实现原理 echarts是百度开发的前端可视化类库，现在已经成为Apache软件基金会的顶级项目，在可视化领域使用广泛。本实验主要介绍echarts的基本使用，并生成一些简答的图表。 通常会先将echarts下载下来，在本地导入使用，但百度也提供了一个页面调试工具供我们开发使用，我们可以现在echarts的在线调试页面进行调试，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值