Apache EChart前端图表

已于 2024-08-04 14:35:58 修改
阅读量931 收藏 11
点赞数 14
分类专栏： 项目 文章标签： 前端
于 2024-08-04 14:35:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dogxixi/article/details/140847615
版权

目录

一、了解Apache EChart

1.1 什么是Apache Echart

1.2 为什么要使用图表

1.3 常见的图表以及特点

二、Apache EChart的基本使用

2.1 下载echarts.js

2.2 echart基本使用案例

三、多类型图表的使用

3.1 柱状图(type:'bar')

 --基本柱状图

  --多系列柱状图

 --堆叠柱状图

 --动态排序柱状图

3.2 折线图（type:'line'）

 --基本折线图

--多系列折线图

--堆叠折线图

 --平滑曲线图

 --阶梯折线图

3.3 饼图(type:'pie')

--基本饼图

  --圆环图

 --玫瑰图

3.4 散点图(type:'scatter')

 --基本散点图

一、了解Apache EChart

1.1 什么是Apache Echart

1.2 为什么要使用图表

  1. 可视化效果：图表将数据转换为图形，使复杂的数据变得直观易懂。
  2. 提高用户体验：图表简化了数据解读过程，提升了用户对信息的理解速度。
  3. 简化数据解读：通过图形化展示，用户可以快速识别数据的关键趋势和模式。
  4. 促进沟通：图表有助于在团队成员间进行更有效的沟通，易于分享和理解数据。

1.3 常见的图表以及特点

柱状图：

特点：

  • 柱状图使用垂直或水平的矩形条（柱子）来表示不同类别之间的数值比较。
  • 每个柱子的高度或长度代表其对应的数值大小。
  • 柱状图清晰地展示了不同分类之间的差异，使得数据对比更加直观。

折线图：

特点：

  • 折线图使用一系列数据点连接成线段，用于显示数据随时间变化的趋势。
  • 它能够有效地展示数据的趋势和模式，特别是在一段时间内的变化趋势。
  • 折线图中的每个点代表一个数据值，线段则表示这些数据值之间的连续性。

饼图：

特点：

  • 饼图通过将圆形分割成不同的扇形区域来表示各个部分占总体的比例。
  • 每个扇形的面积与它所代表的部分在总和中的比例相对应。
  • 饼图适合于展示各个组成部分在整体中的占比情况。

散点图：

 

特点：

  • 散点图使用二维坐标系中的点来表示数据集中的每一对数值。
  • 点的位置反映了两个变量之间的关系，通常用于探索变量之间的相关性。
  • 如果数据点聚集在一起，则表明变量之间可能存在某种关系；如果数据点分布广泛，则表明变量之间没有明显的关系。

二、Apache EChart的基本使用

2.1 下载echarts.js

通过官网进行下载或者npm下载

npm install echarts

2.2 echart基本使用案例

<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  }
}
</script>

效果展示：

基本参数选项的解释

title

  • text: 设置图表标题的文字。在这里，标题为“ECharts 入门示例”。

tooltip

  • 空对象 {} 表示采用默认的提示框样式和行为。如果需要自定义提示框的内容、样式等，可以通过向 tooltip 对象中添加属性来实现。

xAxis

  • data: 设置 X 轴的数据，即条形图的分类标签。在这里，数据为 ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']。

  • 默认情况下，ECharts 会自动创建一个类目轴（category axis）用于显示这些分类。

yAxis

  • 空对象 {} 表示采用默认的 Y 轴设置。如果需要自定义 Y 轴的刻度范围、标签等，可以通过向 yAxis 对象中添加属性来实现。

series

  • series 是一个数组，其中的每个对象代表一个数据系列。

  • name: 数据系列的名称，在图例中显示。在这里，系列名称为“销量”。

  • type: 图表类型。在这里，类型为 bar，表示条形图。

  • data: 数据系列的数据值。在这里，数据为 [5, 20, 36, 10, 10, 20]，对应 X 轴上的六个分类。

三、多类型图表的使用

3.1 柱状图(type:'bar')

 --基本柱状图

<!-- 基本柱状图 -->
<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 绘制图表
    myChart.setOption({
      title: {
        text: '基本柱状图'
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  }
}
</script>

  --多系列柱状图

相比于基本柱状图，只需要多增加一列数据即可


<!-- 基本柱状图 -->
<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 绘制图表
    myChart.setOption({
      title: {
        text: '多系列柱状图'
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '销量',
          type: 'bar',
          data: [7, 10, 26, 30, 20, 30],
          itemStyle: {
            color: 'gold'
          }
        }
      ]
    });
  }
}
</script>

 --堆叠柱状图

通过设置一个stack选项让其堆叠在一起，方便观察数据的变化。

<!-- 基本柱状图 -->
<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 绘制图表
    myChart.setOption({
      tooltip: {},
      title: {
        text: '堆叠柱状图'
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
          stack:'x'
        },
        {
          name: '销量增量',
          type: 'bar',
          data: [2, 3, 6, 0, 10, 5],
          itemStyle: {
            color: 'gold'
          },
          stack:'x'
        }
      ]
    });
  }
}
</script>

 使用 EChart 实现堆叠柱状图的方法非常简单，只需要给一个系列的 stack 值设置一个字符串类型的值，这一个值表示该系列堆叠的类别。也就是说，拥有同样 stack 值的系列将堆叠在一组。

 --动态排序柱状图

<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 绘制图表
    myChart.setOption({
      tooltip: {},
      title: {
        text: '动态排序柱状图'
      },
      xAxis: {
        max: 'dataMax'
      },
      yAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E','F'],
        inverse: true,
        animationDuration: 300,
        animationDurationUpdate: 300,
        // 设置柱状图最大显示数量从0开始
        max: 3 
      },
      series: [
        {
          realtimeSort: true,
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 25, 10],
        
        },
      ]
    });
  }
}
</script>

  1. 柱状图系列的 realtimeSort 设为 true，表示开启该系列的动态排序效果
  2. yAxis.inverse 设为 true，表示 Y 轴从下往上是从小到大的排列
  3. yAxis.animationDuration 建议设为 300，表示第一次柱条排序动画的时长
  4. yAxis.animationDurationUpdate 建议设为 300，表示第一次后柱条排序动画的时长
  5. 如果想只显示前 n 名，将 yAxis.max 设为 n - 1，否则显示所有柱条
  6. xAxis.max 建议设为 'dataMax' 表示用数据的最大值作为 X 轴最大值，视觉效果更好
  7. 如果想要实时改变标签，需要将 series.label.valueAnimation 设为 true
  8. animationDuration 设为 0，表示第一份数据不需要从 0 开始动画（如果希望从 0 开始则设为和 animationDurationUpdate 相同的值）
  9. animationDurationUpdate 建议设为 3000 表示每次更新动画时长，这一数值应与调用 setOption 改变数据的频率相同
  10. 以 animationDurationUpdate 的频率调用 setInterval，更新数据值，显示下一个时间点对应的柱条排序

3.2 折线图（type:'line'）

 --基本折线图

<!-- 折线图 -->
<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 绘制图表
    myChart.setOption({
      tooltip: {},
      title: {
        text: '销量基本折线图'
      },
      xAxis: {
        data: ['8-2', '8-3', '8-4', '8-5', '8-6', '8-7'],
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'line',
          data: [5, 20, 36, 10, 10, 20]
        },
      ]
    });
  }
}
</script>
--多系列折线图

<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 绘制图表
    myChart.setOption({
      tooltip: {},
      title: {
        text: '多系列折线图'
      },
      xAxis: {
        data: ['8-2', '8-3', '8-4', '8-5', '8-6', '8-7'],
      },
      yAxis: {
      },
      series: [
        {
          name: '销量',
          type: 'line',
          data: [5, 20, 36, 10, 25, 10],
          
        },
        {
          name: '销量',
          type: 'line',
          data: [3, 10, 6, 4, 5, 12],
          itemStyle: {
            color: 'red'
          }
        },
      ]
    });
  }
}
</script>
--堆叠折线图

与堆叠柱状图类似都是加入stack,但是注意为了区分多系列折线图，一般建议使用区域填充色以表明堆叠的情况。

<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 绘制图表
    myChart.setOption({
      tooltip: {},
      title: {
        text: '堆叠折线图'
      },
      xAxis: {
        data: ['8-2', '8-3', '8-4', '8-5', '8-6', '8-7'],
      },
      yAxis: {
      },
      series: [
        {
          name: '销量',
          type: 'line',
          data: [5, 20, 36, 10, 25, 10],
          stack:'x',
          areaStyle: {}
        },
        {
          name: '销量增量',
          type: 'line',
          data: [3, 10, 6, 0, 5, 12],
          stack:'x',
          areaStyle: {}
        },
      ]
    });
  }
}
</script>
 --平滑曲线图

<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 绘制图表
    myChart.setOption({
      tooltip: {},
      title: {
        text: '平滑曲线图'
      },
      xAxis: {
        data: ['8-2', '8-3', '8-4', '8-5', '8-6', '8-7'],
      },
      yAxis: {
      },
      series: [
        {
          name: '销量',
          type: 'line',
          data: [5, 20, 36, 10, 25, 10],
          smooth: true
        },
      
      ]
    });
  }
}
</script>
 --阶梯折线图

在 ECharts 中，系列的 step 属性用来表征阶梯线图的连接类型，它共有三种取值：'start'、'middle' 和 'end'，分别表示在当前点，当前点与下个点的中间点，下个点拐弯。

3.3 饼图(type:'pie')

--基本饼图

<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 绘制图表
    myChart.setOption({
      tooltip: {},
      title: {
        text: '基本饼图'
      },
    
      series: [
        {
          name: '总消费',
          type: 'pie',
          data: [
            {
              value: 324,
              name: '电子产品'
            },
            {
              value: 234,
              name:'食品'
            },{
              value: 154,
              name:'生活用品'
            },
            {
              value: 1048,
              name:'其他'
            }
        ],
        },
      
      ]
    });
  }
}
</script>
  --圆环图

<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 绘制图表
    myChart.setOption({
      tooltip: {},
      title: {
        text: '圆环图'
      },
      series: [
        {
          name: '总消费',
          type: 'pie',
          data: [
            {
              value: 324,
              name: '电子产品'
            },
            {
              value: 234,
              name:'食品'
            },{
              value: 154,
              name:'生活用品'
            },
            {
              value: 1048,
              name:'其他'
            }
        ],
        radius: ['40%', '70%']
        },
      ]
    });
  }
}
</script>
 --玫瑰图

<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 绘制图表
    myChart.setOption({
      tooltip: {},
      title: {
        text: '玫瑰图'
      },
      series: [
        {
          name: '总消费',
          type: 'pie',
          data: [
            {
              value: 324,
              name: '电子产品'
            },
            {
              value: 234,
              name:'食品'
            },{
              value: 154,
              name:'生活用品'
            },
            {
              value: 1048,
              name:'其他'
            }
        ],
         roseType: 'area'
        },
      ]
    });
  }
}
</script>

3.4 散点图(type:'scatter')

 --基本散点图

<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 绘制图表
    myChart.setOption({
      tooltip: {},
      title: {
        text: '基本散点图'
      },
      xAxis: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {},

      series: [
        {
         type:'scatter',
         data: [220, 182, 191, 234, 290, 330, 310]
        },
      ]
    });
  }
}
</script>

Alphamilk
关注
  • 14
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
《前端》Echart图表
BelleDiao的博客
02-19 447
ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> &lt...
EChart图表
weixin_44564948的博客
06-09 861
EChart图表 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：Visual Studio 2015 * SQL Server 作者：叶 撰写时间：2019年01月01日 ~~~~~~~~~~~~~~~~...
echarts：Apache ECharts是用于浏览器的功能强大的交互式图表和数据可视化库
02-05
Apache ECharts Apache ECharts是一个免费的，功能强大的图表和可视化库，它提供了一种简单的方法来向您的商业产品中添加直观，交互式和高度可定制的图表。 它使用纯JavaScript编写，并基于 ，这是一个全新的轻量级画布库。 | 获取Apache ECharts 您可以选择以下方法之一： 从官方网站 从官方网站下载 npm install echarts --save CDN： 文件 讲解 API 选件手册 得到帮助 漏洞报告和功能请求的 电子邮件提出一般问题 订阅以更新项目 建立 构建echarts源代码： 执行echarts的根目录中的指示信息：（需要
Apache ECharts
qq_46030254的博客
06-10 308
Apache ECharts 是一款基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。1). 柱形图2). 饼形图3). 折线图不管是哪种形式的图形，最本质的东西实际上是数据，它其实是对数据的一种可视化展示。
Apache ECharts快速入门
有趣的代码
10-01 2173
Apache ECharts 快速入门
使用Apache ECharts来绘制曲线图
qq_40138803的博客
05-29 1163
通过Apache ECharts轻松简单绘制好看的各种图表
前端数据可视化—Echart——笔记整理
Thaley的博客
02-03 3284
前端数据可视化Echart——笔记整理（黑马课程）
前端EChart图表转换为图片保存到服务器路径
热门推荐
一棵小树
09-19 1万+
前端EChart图表转换为图片保存到服务器路径下 前端代码： var topValue=document.getElementsByName("top")[0].value;
【前端模板】040 Echart图例使用.zip
最新发布
03-19
大数据处理框架：如Apache Hadoop、Apache Spark等，用于处理大规模数据集的分布式计算框架。 数据存储技术：包括传统的关系型数据库（如MySQL、PostgreSQL）、NoSQL数据库（如MongoDB、Cassandra）以及数据湖...
十、Echart图表 之 dataZoom区域缩放 基本使用与配置大全
weixin_55181759的博客
11-02 1万+
✨参照官网，dataZoom中有两个对象如下，这样写是因为type分为与两种缩放方式，当type类型不同时，里面配置的属性略有不同，请根据实际需求使用✨其他属性请参考一下内容💕解释xAxisIndex、yAxisIndex、、的含义及用法，以xAxisIndex为例filter。
Apache ECharts简介和相关操作
哥的时代，为你保驾护航
11-01 898
Apache ECharts 是一款基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。常见效果展示：1.柱形图：2.饼形图：3.折线图不管是那种图形，其本质就是数据使用Echarts，重点在于研究当前图表所需的数据格式。通常是需要后端提供符合格式要求的动态数据，然后响应给前端来展示图表。
Apache ECharts 可视化函数库｜GitCode
GitCode
09-09 460
Apache ECharts 是一个免费的、功能强大的图表和可视化库，提供了一种将直观、交互式和高度可定制的图表添加到你的商业产品的简单方法。它是用纯 JavaScript 编写的，基于 zrender，这是一个全新的轻量级画布库。近期 Apache Echarts 发布了 5.2.0 最新版本，新增了几个特性，下面分全局过渡动画、极坐标柱状图标签进行介绍。 全局过渡动画 在之前的版本中，过渡动画有一定的局限性: 只能用于相同类型的图形的位置、尺寸、形状，而且只能作用在相同类型的系列上。从 5.2.0 开始
（前端）使用Apache ECharts绘制可视化图表
weixin_64388392的博客
11-22 1083
使用Apache ECharts绘制前端可视化图表（动态折线图示例）
Apache ECharts简单介绍及入门案例
m0_51487124的博客
08-09 531
Apache ECharts 是一款基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。官网地址：https://echarts.apache.org/zh/index.html1). 柱形图2). 饼形图3). 折线图**总结：**不管是哪种形式的图形，最本质的东西实际上是数据，它其实是对数据的一种可视化展示。
ApacheEcharts(图表插件echarts5.43)安装包以及安装教程
weixin_72851290的博客
08-22 548
将文件复制到工程目录下，在heard中，引入文件。双击打开dist，在此文件夹中找到echarts.js。点击目录处的ECharts。
Apache ECharts 一个基于 JavaScript 的开源可视化图表库
weixin_45992894的博客
06-02 1000
Apache ECharts 一个基于 JavaScript 的开源可视化图表库 你可以通过以下几种方式获取 Apache EChartsTM： 从 Apache ECharts 官网下载界面 获取官方源码包后构建。 在 ECharts 的 GitHub 获取。 通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts” 通过 jsDelivr 等 CDN 引入 ECharts ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Alphamilk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值