用Vue3 + ECharts5构建数据可视化小项目：从入门到实战

2023-07-09 09:13:11

使用 Vue3 和 ECharts5 构建数据可视化项目

创建项目

踏入数据可视化的世界的第一步是创建一个项目。为此，我们可以使用现代构建工具 Vite。它可以快速处理 JavaScript、CSS 和 HTML 代码。通过在命令行中输入以下内容，我们可以创建新的 Vite 项目：

npm create vite@latest my-project

安装依赖

为了使用 Vue3 和 ECharts5，我们需要安装它们。打开你的终端并输入以下命令：

npm install vue@3 echarts

创建图表

ECharts5 提供了丰富的图表类型，从折线图到饼图。为了创建一个线形图，我们可以使用以下代码：

const myChart = echarts.init(document.getElementById('myChart'));

const option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [{
    type: 'line',
    data: [100, 200, 300, 400, 500, 600, 700]
  }]
};

myChart.setOption(option);

集成图表

将图表集成到 Vue3 项目中非常简单。我们可以使用以下代码：

<template>
  <div id="myChart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    const myChart = echarts.init(document.getElementById('myChart'));

    const option = {
      xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {},
      series: [{
        type: 'line',
        data: [100, 200, 300, 400, 500, 600, 700]
      }]
    };

    myChart.setOption(option);
  }
};
</script>

交互

ECharts5 还提供了交互功能，如缩放和提示。要实现缩放，我们可以使用以下代码：

myChart.on('wheel', (params) => {
  if (params.deltaY < 0) {
    myChart.setOption({
      xAxis: {
        scale: true
      }
    });
  } else {
    myChart.setOption({
      xAxis: {
        scale: false
      }
    });
  }
});

常见问题解答