echarts官网
Apache ECharts
Vue3中使用命令安装ECharts
npm install echarts在需要使用的地方导入echarts
import * as echarts from 'echarts'; // 导入 ECharts 库创建储存DOM元素的响应式引用
// 创建一个 Vue 的响应式引用，用于存储对 DOM 元素的引用const chartRef = ref<HTMLDivElement | null>(null);<HTMLDivElement | null>：ref 的泛型参数 <HTMLDivElement | null> 指定了 chartRef 可以持有的值的类型。在这里，chartRef 可以持有 HTMLDivElement 类型的对象或 null。HTMLDivElement 是一个 DOM 元素的类型，指的是一个 <div> 元素；
(null)：表示chartRef初始值是null
创建div用来储存图表
<template> <!-- 使用 ref 将 chartRef 绑定到这个 div 元素 --> <div ref="chartRef" style="width: 100%; height: 50vh;"></div></template>定义ECharts的配置选项
const chartOptions = { title: { text: '简单柱状图示例' // 图表的标题 }, tooltip: {}, // 启用图表的工具提示功能 legend: { data: ['销售量'] // 图例显示的项名称 }, xAxis: { data: ['产品 A', '产品 B', '产品 C', '产品 D', '产品 E'] // X 轴的类目数据 }, yAxis: {}, // Y 轴的配置项，使用默认配置 series: [ { name: '销售量', // 数据系列的名称 type: 'bar', // 图表类型为柱状图 data: [5, 20, 36, 10, 10] // 数据系列的具体数据 } ]};下面是一些配置选项的讲解
title：
text：标题文本，如 "Sales Report"subtext：副标题文本，如 "2024 Q1"left、top、right、bottom：标题的位置，可以是 auto、center、left、right、top、bottom 等。 tooltip：
trigger：触发方式，可以是 item（触发数据项）或 axis（触发坐标轴）。formatter：提示框格式化函数，可以是字符串模板或函数。backgroundColor：背景颜色，如 '#fff' 或 'rgba(0,0,0,0.7)'。 legend：
data：图例数据数组，例如 ['Sales', 'Revenue']。orient：图例布局方向，'horizontal'（水平）或 'vertical'（垂直）。left、top、right、bottom：图例的位置。 xAxis 和 yAxis：
type：坐标轴类型，可以是 'value'（数值型）、'category'（类目型）、'time'（时间型）或 'log'（对数型）。data（仅类目型）：坐标轴的刻度标签数组，如 ['Jan', 'Feb', 'Mar']。name：坐标轴名称，如 'Sales'。axisLabel：坐标轴标签配置，包括 formatter（标签格式化函数）。 series：
type：图表类型，例如 'line'（折线图）、'bar'（柱状图）、'pie'（饼图）。data：数据数组，如 [120, 200, 150, 80, 70]。name：系列名称，如 'Sales'。itemStyle：系列项样式配置，包括 color（颜色）、borderColor（边框颜色）。 grid：
left、top、right、bottom：网格的边距，例如 40、60。containLabel：是否包含坐标轴标签在网格范围内，true 或 false。 color：
color：图表的颜色数组，如 ['#3398DB', '#FF5722']，影响系列的颜色。 dataZoom：
type：数据缩放类型，'inside'（内部缩放）或 'slider'（滑块缩放）。start 和 end：缩放范围的起始和结束百分比，如 0 和 100。 toolbox：
show：是否显示工具箱，true 或 false。feature：工具箱功能，如 saveAsImage（保存为图片）、dataView（数据视图）。 这些选项可以组合使用以实现丰富的图表效果和交互，具体也可以去看官网上的示例Apache ECharts。
初始化ECharts实例和设置图表配置项
// 在组件挂载后执行的生命周期钩子onMounted(() => { // 确保 chartRef 已经被绑定到一个 DOM 元素 if (chartRef.value) { // 初始化 ECharts 实例，传入 DOM 元素 const chartInstance = echarts.init(chartRef.value); // 设置图表的配置项 chartInstance.setOption(chartOptions); }});这样就可以使用简单的ECharts了