Echarts示例

一.概念

ECharts（Enterprise Charts）是百度开源的一个基于JavaScript的可视化图表库。它提供了多种常见的数据可视化图表，包括折线图、柱状图、散点图、饼图、雷达图等等。使用ECharts，用户可以通过简单的配置和接口调用来创建交互式和可定制的图表。

ECharts具有以下特点：

1. 简单易用：ECharts使用简单的配置选项即可创建各种图表，并提供丰富的接口和事件来满足用户的需求。
2. 强大的交互能力：ECharts支持图表的交互，包括数据筛选、数据联动和图表切换等功能，使用户能够以不同的方式对数据进行分析和展示。
3. 完全开源：ECharts是一个完全开源的项目，用户可以根据自己的需求进行修改和扩展。
4. 跨平台支持：ECharts可以在各种平台上运行，包括PC端、移动端和大屏可视化。
5. 大数据支持：ECharts对于大规模数据的可视化有良好的支持，可以进行数据的聚合和分级显示。

ECharts广泛应用于数据分析、数据可视化、BI系统、大屏展示等领域。它已经成为一个流行的图表库，并且得到了广大开发者和用户的认可。

先看一下我们的展示图

我们需要实现四个功能：

 1.最受欢迎六个菜品

 2.三餐营收占比

 3.近七天营业额

 4.月营业额

 

二.在typescript+vue3项目中使用echarts

  之前学校让做的饿了么后台管理系统，添加了一个统计功能，实现一下菜品信息和营业额的展示，下面我在该项目中使用一下echarts

1.安装echarts

 我们需要在项目中安装echarts作为依赖

npm install echarts

2.配置echarts

我们在src/echart/echarts.ts中配置

// 引入 echarts 核心模块。
import * as echarts from 'echarts/core';
//引入柱状图和折线图组件。
import { BarChart,LineChart,PieChart } from 'echarts/charts';
// 引入标题、提示框、网格、数据集和数据转换器组件。
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    // 数据集组件
    DatasetComponent,
    // 内置数据转换器组件 (filter, sort)
    TransformComponent
} from 'echarts/components';
//引入标签布局和通用过渡动画特性。
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器。
import { CanvasRenderer } from 'echarts/renderers';
 
import type {
    // 系列类型的定义后缀都为 SeriesOption
    BarSeriesOption,
    LineSeriesOption
} from 'echarts/charts';
 
import type {
    // 组件类型的定义后缀都为 ComponentOption
    TitleComponentOption,
    TooltipComponentOption,
    GridComponentOption,
    DatasetComponentOption
} from 'echarts/components';
import type {
    ComposeOption,
} from 'echarts/core';
 
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = ComposeOption<
    | BarSeriesOption
    | LineSeriesOption
    | TitleComponentOption
    | TooltipComponentOption
    | GridComponentOption
    | DatasetComponentOption
>;
 
/** 
    注册必须的组件，包括标题、提示框、网格、数据集、数据转换器，
    以及柱状图、折线图、标签布局、通用过渡动画和 Canvas 渲染器。
*/
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LineChart,
    PieChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);
// 导出
export default echarts;

 3.在我们需要的页面组件中引入

通过以上配置就可以实现我们所需要的功能了！