vue 使用echarts图表 常用配置详解

官网:Apache ECharts

一、下载依赖:

cnpm install echarts

二、导入ECharts库:

import * as echarts from 'echarts'

三、在组件中定义一个引用(ref)。声明变量chartInstance。

(ref)用于存储ECharts实例。 chartInstance这个变量用来存储 ECharts 图表实例,以便你在组件的生命周期内可以进行图表的初始化、更新和销毁操作。:

const chartInstance = ref(null);
let chartInstance;

四、在组件的模板中创建一个元素

这将作为ECharts图表的容器。为了确保ECharts在正确的时机进行初始化和销毁,你可以使用Vue的生命周期钩子函数:


五、在组件中,使用onMounted钩子来初始化ECharts图表实例:

onMounted(() => {
  // 初始化ECharts图表
  chartInstance = echarts.init(chartContainer.value);

  // 根据需要设置图表的配置项和数据
  const options = {
    // ...
  };
  
  // 渲染图表
  chartInstance.setOption(options);
});

六、最后,确保在组件被卸载时销毁ECharts实例,以防止内存             泄漏:

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
});

七、ECharts中的option对象是一个配置项对象

用于定义图表的外观、数据、交互等各方面的设置。下面详细解释option对象中常见的一些数据配置:

const options = {
  // 标题配置
  title: {
    text: '图表标题',
    subtext: '副标题'
  },
  // 提示框配置,用于显示交互时的信息
  tooltip: {
    trigger: 'axis',  // 鼠标触碰触发类型,可以是 'axis', 'item' 等
    // ...
  },
  // 图例配置,用于标识数据系列
  legend: {
    data: ['系列1', '系列2'] // 图例项的名称
  },
  // x轴配置
  xAxis: {
    type: 'category',  // x轴类型,可以是 'category', 'value', 'time' 等
    data: ['数据点1', '数据点2', '数据点3'] // x轴的数据项,例如类别型轴的数据点
  },
  // y轴配置
  yAxis: {
    type: 'value',  // y轴类型,可以是 'value', 'category', 'time' 等
    // ...
  },
  // 数据系列配置,用于定义不同的数据系列
  series: [
    {
      name: '系列1', // 数据系列的名称,将显示在图例中
      type: 'bar',  //  数据系列的类型,指定展示的图表类型,如 'bar'或 'line'
      data: [10, 20, 30] // 数据系列的具体数据
    },
    {
      name: '系列2',
      type: 'line',
      data: [15, 25, 35]
    }
  ]
};

八、常用配置项的详细解释 :

  • title(标题配置):

    • text: 主标题文字,用于在图表顶部显示主要的标题信息。
    • subtext: 副标题文字,通常在主标题下面显示额外的说明或描述。
  • tooltip(提示框配置):

    • trigger: 触发类型,指定何时显示提示框,如 'axis'(坐标轴触发)或 'item'(数据项触发)。
    • axisPointer: 指示器配置,用于控制提示框的样式,如 'line'(直线指示器)或 'shadow'(阴影指示器)。
    • show: 是否显示提示框。

    • position: 提示框位置,可以是像素坐标 [x, y] 或百分比 [x%, y%],默认根据触发点位置自动确定。

    • formatter: 提示框内容的格式化函数,支持字符串模板和函数两种形式,可以自定义显示的内容。

    • backgroundColor: 提示框的背景颜色。如:'#fff'

    • borderColor: 提示框的边框颜色。

    • textStyle: 提示框文字样式,包括颜色和字体大小。

      • color: 文字颜色。
      • fontSize:  字体大小。 如:12
    • extraCssText: 额外的 CSS 样式,可以用于自定义提示框的样式。 如:'width: 100px; height: 50px;'

  • legend(图例配置):

    • data: 图例项的名称,用于标识数据系列,显示在图表的顶部或底部。
  • xAxis(x轴配置):

    • type: x轴类型,指定x轴是何种类型,如 'category'(类别型)或 'value'(数值型)。
    • data: x轴的数据项,根据x轴类型不同,可以是类别型轴的数据点或数值型轴的刻度。
  • yAxis(y轴配置):

    • type: y轴类型,指定y轴是何种类型,如 'value'(数值型)或 'category'(类别型)。
  • series(数据系列配置):

    • name: 数据系列的名称,将显示在图例中,用于区分不同的数据系列。列。
    • type: 数据系列的类型,指定展示的图表类型,如 'bar'(柱状图)或 'line'(折线图)。
    • data: 数据系列的具体数据,根据图表类型不同,可以是柱状图的高度、折线图的点等

除了上述配置项外,ECharts还提供了更多的配置选项,用于控制图表的外观、交互、标签、样式等。你可以根据不同的需求,通过配置option对象来调整图表的展示效果。在实际使用中,你可以根据ECharts的文档查找更多的配置选项并进行定制。

你可能感兴趣的:(vue,vue.js,echarts,javascript)