Echarts示例

示例"/>

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 {// 系列类型的定义后缀都为 SeriesOptionBarSeriesOption,LineSeriesOption
} from 'echarts/charts';import type {// 组件类型的定义后缀都为 ComponentOptionTitleComponentOption,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.在我们需要的页面组件中引入

<template><!-- 为ECharts准备一个具备大小（宽高）的Dom --><el-card shadow="hover" id="main1" style="width: 600px; height: 300px;float: left;"></el-card><el-card shadow="hover" id="main2" style="width: 600px; height: 300px;float: left;"></el-card><el-card shadow="hover" id="main3" style="width: 600px; height: 330px;float: left;"></el-card><el-card shadow="hover" id="main4" style="width: 600px; height: 330px;float: left;"></el-card></template><script lang="ts">//按需引入import { defineComponent, onMounted } from "vue";//引入创建的echarts.ts文件import echarts from "../echart/echart";export default defineComponent({setup() {/*** 在使用init方法初始化图表之前，确保DOM元素已经被正确加载。在Vue组件中，* 可以使用onMounted钩子函数来确保在DOM准备就绪后再执行初始化操作。*///如果不使用这个钩子可能会报错onMounted(() => {/**!是非空断言运算符，表示确保找到了匹配的元素，如果找不到元素或其值为null 或 undefined，会引发错误。document.getElementById("main") 是调用 getElementById 方法，传入参数 “main”，用于获取具有 id 为 “main” 的元素。echarts.init() 方法用于初始化一个 echarts 图表实例。*/// 基于准备好的dom，初始化echarts实例var chartDom = document.getElementById("main1")!;var myChart = echarts.init(chartDom);var chartDom1 = document.getElementById("main2")!;var myChart1 = echarts.init(chartDom1);var chartDom2 = document.getElementById("main3")!;var myChart2 = echarts.init(chartDom2);var chartDom3 = document.getElementById("main4")!;var myChart3 = echarts.init(chartDom3);//还可以这样一起写// var myChart = echarts.init(document.getElementById("main")!);// 指定图表的配置项和数据var option = {title: {text: "菜品销量(最受欢迎6个菜)",},tooltip: {},xAxis: {data: ["红烧肉", "鱼香肉丝", "宫保鸡丁", "回锅肉", "水煮肉片", "大盘鸡"],},yAxis: {},series: [{name: "销量",type: "bar",// data: [5, 20, 36, 10, 10, 20],data:[{value:54,itemStyle:{color:'#409eff'}},{value:42,itemStyle:{color:'#409eff'}},{value:65,itemStyle:{color:'#409eff'}},{value:54,itemStyle:{color:'#409eff'}},{value:59,itemStyle:{color:'#409eff'}},{value:76,itemStyle:{color:'#409eff'}},]},],};// 指定图表的配置项和数据var  option2 = {title: {text: "三餐营收占比",},tooltip: {},legend: {data: ["销量"],},series: [{type: 'pie',data: [{value: 122312,name: '午饭营收',},{value: 50123,name: '早餐营收'},{value: 81231,name: '晚餐营收'}]}]};//折线图var  option3 = {title: {text: "近七天营业额",},tooltip: {},xAxis: {type: 'category',data: ['11.01', '11.02', '11.03','11.04','11.05','11.06','11.07']},yAxis: {type: 'value'},series: [{data: [7211,6421,8213,10012,6001,5991,9123],type: 'line'}]};//横向柱状图var option4 = {title: {text: "月营业额",},tooltip: {},dataset: {source: [['money', 'month'],[231203, '一月'],[213213, '二月'],[151312, '三月'],[194123, '四月'],[283131, '五月'],[183123, '六月'],[251231, '七月'],[173123, '八月'],[273123, '九月'],[293123, '十月'],[183211, '十一月'],[201231, '十二月']]},xAxis: {},yAxis: { type: 'category' },series: [{type: 'bar',encode: {// 将 "money" 列映射到 X 轴。x: 'money',// 将 "month" 列映射到 Y 轴。y: 'month'}}]};// 使用刚指定的配置项option和数据显示图表myChart。myChart.setOption(option);// 使用刚指定的配置项option和数据显示图表myChart。myChart1.setOption(option2);//折线图myChart2.setOption(option3);//横向1-12月营业额myChart3.setOption(option4)});return {};},});</script><style scoped></style>

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