vue图表插件ECharts使用指南

以下是一份较为全面的 ECharts 使用指南，包含安装、基本使用步骤、常见图表示例以及配置项说明等内容。

1. 安装 ECharts

可以通过 npm 或 yarn 进行安装，在项目根目录下执行以下命令：

# 使用 npm 安装
npm install echarts --save

# 使用 yarn 安装
yarn add echarts

2. 基本使用步骤

2.1 引入 ECharts

在 Vue 组件中引入 ECharts：

<template>
  <div id="main" style="width: 600px;height:400px;"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';

onMounted(() => {
  // 后续代码将在这里编写
});
</script>

2.2 初始化 ECharts 实例

在 onMounted 钩子函数中，基于准备好的 DOM 元素初始化 ECharts 实例：

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('main'));
  // 后续代码将在这里编写
});

2.3 配置图表选项

ECharts 通过一个配置对象来定义图表的各种属性和数据，例如绘制一个简单的折线图：

onMounted(() => {
  const myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }
    ]
  };
  // 后续代码将在这里编写
});

2.4 渲染图表

使用 setOption 方法将配置项应用到 ECharts 实例上，从而渲染出图表：

onMounted(() => {
  const myChart = echarts.init(document.getElementById('main'));
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
});

3. 常见图表示例

3.1 柱状图

const option = {
  xAxis: {
    type: 'category',
    data: ['Apple', 'Banana', 'Cherry', 'Date']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [5, 20, 36, 10],
      type: 'bar'
    }
  ]
};

3.2 饼图

const option = {
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' }
      ]
    }
  ]
};

3.3 散点图

const option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      symbolSize: 20,
      data: [
        [10.0, 8.04],
        [8.0, 6.95],
        [13.0, 7.58],
        [9.0, 8.81]
      ],
      type: 'scatter'
    }
  ]
};

4. 配置项说明

4.1 title

用于设置图表的标题：

const option = {
  title: {
    text: 'ECharts 示例标题',
    subtext: '副标题信息'
  },
  // 其他配置项...
};

4.2 tooltip

用于设置鼠标悬停时显示的提示框：

const option = {
  tooltip: {
    trigger: 'axis' // 触发类型，'axis' 表示坐标轴触发
  },
  // 其他配置项...
};

4.3 legend

用于设置图例，显示不同系列的名称：

const option = {
  legend: {
    data: ['销量']
  },
  // 其他配置项...
};

4.4 xAxis 和 yAxis

分别用于设置 x 轴和 y 轴的属性：

const option = {
  xAxis: {
    type: 'category', // 坐标轴类型，'category' 表示类目轴
    data: ['周一', '周二', '周三']
  },
  yAxis: {
    type: 'value' // 坐标轴类型，'value' 表示数值轴
  },
  // 其他配置项...
};

4.5 series

用于定义图表的数据系列：

const option = {
  series: [
    {
      name: '销量',
      type: 'bar', // 图表类型，'bar' 表示柱状图
      data: [10, 20, 30]
    }
  ]
};

5. 响应式处理

当容器大小改变时，需要重新调整图表大小，可以使用 window.addEventListener 监听窗口大小变化事件：

onMounted(() => {
  const myChart = echarts.init(document.getElementById('main'));
  const option = {
    // 配置项...
  };
  myChart.setOption(option);

  window.addEventListener('resize', () => {
    myChart.resize();
  });
});

6. 资源与进一步学习

• 官方文档 ：ECharts 官方提供了详细的文档，包含配置项手册、示例代码等，地址为 https://echarts.apache.org/zh/index.html。
• 示例库 ：官方示例库中有大量的图表示例，可以参考学习不同类型图表的配置方法，地址为 https://echarts.apache.org/examples/zh/index.html。