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了
