Apache EChart前端图表

Alphamilk2024-08-05 8:55

目录

[一、了解Apache EChart](#一、了解Apache EChart)

[1.1 什么是Apache Echart](#1.1 什么是Apache Echart)

[1.2 为什么要使用图表](#1.2 为什么要使用图表)

[1.3 常见的图表以及特点](#1.3 常见的图表以及特点)

[二、Apache EChart的基本使用](#二、Apache EChart的基本使用)

[2.1 下载echarts.js](#2.1 下载echarts.js)

[2.2 echart基本使用案例](#2.2 echart基本使用案例)

三、多类型图表的使用

[3.1 柱状图(type:'bar')](#3.1 柱状图(type:'bar'))

--基本柱状图

--多系列柱状图

--堆叠柱状图

--动态排序柱状图

[3.2 折线图（type:'line'）](#3.2 折线图（type:'line'）)

--基本折线图

--多系列折线图

--堆叠折线图

--平滑曲线图

--阶梯折线图

[3.3 饼图(type:'pie')](#3.3 饼图(type:'pie'))

--基本饼图

--圆环图

--玫瑰图

[3.4 散点图(type:'scatter')](#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下载

bash 复制代码 
npm install echarts

2.2 echart基本使用案例

html 复制代码 
<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')

--基本柱状图
html 复制代码 
<!-- 基本柱状图 -->
<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>
--多系列柱状图

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

html 复制代码 
<!-- 基本柱状图 -->
<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选项让其堆叠在一起，方便观察数据的变化。

html 复制代码 
<!-- 基本柱状图 -->
<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 值的系列将堆叠在一组。

--动态排序柱状图
html 复制代码 
<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'）

--基本折线图
html 复制代码 
<!-- 折线图 -->
<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>
--多系列折线图
html 复制代码 
<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,但是注意为了区分多系列折线图，一般建议使用区域填充色以表明堆叠的情况。

html 复制代码 
<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>
--平滑曲线图
html 复制代码 
<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')

--基本饼图
html 复制代码 
<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>
--圆环图
html 复制代码 
<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>
--玫瑰图
html 复制代码 
<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')

--基本散点图
html 复制代码 
<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>
相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张，YOLO道路事故目标检测实战训练教程！
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情，跳到评论页面，携带对象参数写法：
前端
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml44 小时前
智能化健身房管理：Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶4 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
热门推荐
01如何才能让手机厂商主动拥抱华为，接入鸿蒙系统？02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04Macbook pro M1 安装Ubuntu教程05(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明06【经验分享】Ubuntu22.04安装微信(linux官方版)07文件或文件夹名称中有空格如何批量去除08全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）09RAG 实践- Ollama+RagFlow 部署本地知识库10基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测