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

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

• 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了

总结

到此这篇关于Vue3项目中使用ECharts的文章就介绍到这了,更多相关Vue3使用ECharts内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论