Vue3使用ECharts

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] // 数据系列的具体数据

    }

  ]

};

下面是一些配置选项的讲解

1. title：

   • text ：标题文本，如 "Sales Report"
   • subtext ：副标题文本，如 "2024 Q1"
   • left 、top 、right 、bottom ：标题的位置，可以是 auto、center、left、right、top、bottom 等。

2. tooltip：

   • trigger ：触发方式，可以是 item（触发数据项）或 axis（触发坐标轴）。
   • formatter：提示框格式化函数，可以是字符串模板或函数。
   • backgroundColor ：背景颜色，如 '#fff' 或 'rgba(0,0,0,0.7)'。

3. legend：

   • data ：图例数据数组，例如 ['Sales', 'Revenue']。
   • orient ：图例布局方向，'horizontal'（水平）或 'vertical'（垂直）。
   • left 、top 、right 、bottom：图例的位置。

4. xAxis 和 yAxis：

   • type ：坐标轴类型，可以是 'value'（数值型）、'category'（类目型）、'time'（时间型）或 'log'（对数型）。
   • data （仅类目型）：坐标轴的刻度标签数组，如 ['Jan', 'Feb', 'Mar']。
   • name ：坐标轴名称，如 'Sales'。
   • axisLabel ：坐标轴标签配置，包括 formatter（标签格式化函数）。

5. series：

   • type ：图表类型，例如 'line'（折线图）、'bar'（柱状图）、'pie'（饼图）。
   • data ：数据数组，如 [120, 200, 150, 80, 70]。
   • name ：系列名称，如 'Sales'。
   • itemStyle ：系列项样式配置，包括 color（颜色）、borderColor（边框颜色）。

6. grid：

   • left 、top 、right 、bottom ：网格的边距，例如 40、60。
   • containLabel ：是否包含坐标轴标签在网格范围内，true 或 false。

7. color：

   • color ：图表的颜色数组，如 ['#3398DB', '#FF5722']，影响系列的颜色。

8. dataZoom：

   • type ：数据缩放类型，'inside'（内部缩放）或 'slider'（滑块缩放）。
   • start 和 end ：缩放范围的起始和结束百分比，如 0 和 100。

9. 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了