ECharts快速上手

前言

ECharts，全称Enterprise Charts，是百度基于 JavaScript 实现的一个开源可视化图表库，主要特点就是可视化类型丰富、动画炫酷、使用简单，广泛应用于数据报表展示、商业智能分析等多个领域。接下来，本文将带领大家快速走进ECharts的世界，从环境搭建到基础使用，一起体验其强大而便捷的数据可视化能力。

一、环境准备

在开始使用ECharts之前，确保你的开发环境中已经包含了基本的HTML、CSS和JavaScript环境。然后，通过以下步骤引入ECharts库：

下载并引入ECharts ：你可以在ECharts官网下载最新版本的ECharts库，或者直接通过CDN方式引入：快速上手 - 使用手册 - Apache ECharts)

xml 复制代码

Html
<!-- 引入ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>

二、创建ECharts容器

在HTML文件中创建一个用于承载图表的<div>元素，并为其分配一个id，以便于JavaScript中获取该元素：

Html 复制代码

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

三、初始化ECharts实例

在JavaScript部分，首先获取上述div元素，然后调用echarts.init()方法来初始化一个ECharts实例：

Javascript 复制代码

// 获取图表容器
var myChart = document.getElementById('main');

// 初始化ECharts实例
var chartInstance = echarts.init(myChart);

四、准备配置项和绘制图表

配置图表需要创建一个包含相应选项的对象。例如，绘制一个简单的折线图：

Javascript 复制代码

// 配置图表数据和选项
var option = {
    title: {
        text: '示例折线图'
    },
    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'
    }]
};

// 使用setOption方法加载图表配置项
chartInstance.setOption(option);

上述option的属性对于第一次认识ECharts的掘友们显然是陌生的，对于属性的陌生，查看官方文档往往能解决大部分问题。下面我们来到：配置项官方文档

之前我们对ECharts实例进行初始化时使用的init方法可以在第二项API中找到，而配置项文档中主要是对option内的一些属性进行讲解的，我们可以很清楚的看到上述在进行配置项配置时我们所用的四个属性都能在左侧找到。大家有其他不懂属性也可以自行查看，这里节省时间我就直接列出上面所用到属性的大致意思了。

属性解释：

title为标题，也就是数据表的标题
xAxis 看代码就很容易知道这是图表中的x轴
yAxis 顾名思义就是图表的y轴了
series 是一个核心的配置项，它是一个数组，用于定义图表中的多个数据系列。每个系列可以是不同类型的图形（如折线、柱状图、饼图、散点图等），也就是这里的type属性,设置成line就是折线图，每个系列都包含一组特定的数据和与之相关的样式、标签和其他属性，也就是说，我们可以在这里设置图表的相关样式。

以上代码将会在页面上生成一个标题为"示例折线图"，横坐标为一周七天，纵坐标为数值，数据点以折线形式展现的图表。如下：

我们只需要将series中的type属性改成 bar,就可以很轻松的得到柱状图，如下：

ECharts提供了很多各式各样的图表，具体还需要个人在需要使用的时候进行探索。

其他示例图我就不一一展示了，下面来介绍一下在Vue3中如何使用ECharts，其实大体和上面都是一样的。

Vue3中使用ECharts

一、安装依赖

css 复制代码

npm install echarts --save

二、引入ECharts

在你打算使用ECharts的Vue组件中导入它：

Javascript 复制代码

// 使用ES6模块导入方式
import * as echarts from 'echarts';

// 或者按需加载特定模块（适用于大型项目优化）
import { init, LineChart } from 'echarts';

三、创建图表容器

在对应的Vue组件模板中添加一个用于承载ECharts图表的div元素，并设置其ID以便于JavaScript代码定位：

css 复制代码

<template>
  <div id="myEcharts" style="width: 100%; height: 400px;"></div>
</template>

四、准备配置项和配置图表

在Vue中，我们应该更加严谨，利用Vue的生命周期钩子函数，在onMounted 中调用 initChart 函数，在组件挂载到DOM上时，再执行初始化图表的过程。在 onUnmounted 生命周期钩子函数中调用 dispose 方法,也就是在组件卸载时清理图表实例，释放资源。

JS 复制代码

// 获取DOM节点引用
let myEcharts = echarts;

onMounted(() => {
  initChart();
});

onUnmounted(() => {
  myEcharts.dispose();
});

// 初始化图表
function initChart() {
  let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
  chart.setOption({
    title: {
      text: '示例折线图'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'bar'
    }]
  });
}

我们显然也能得到我们需要的数据表，如下：

留言

上述文章是由于本人最近在写一个小项目记账本，在进行开发到图表这一阶段时，由于不知道如何处理图表，临时去网上学习了一些有关数据可视化的知识，ECharts的内容显然不止上面这么一点，它的知识点十分庞大，我这里只是介绍了一些基本的使用，在后续我还会继续分享一些在进行项目开发中学习到的有关ECharts的一些使用指南，会将它们统一放在 ECharts使用指南 这一专栏中，希望能给大家带来一点帮助。