[Vue/HTML]ECharts 使用指南：从入门到绘制各种常用图表

San813_LDD

225人浏览 · 2026-06-11 00:02:48

San813_LDD · 2026-06-11 00:02:48 发布

————数据可视化必备，一篇搞定折线图、柱状图、饼图、散点图

什么是 ECharts？

ECharts 是一款由百度开源、Apache 基金会孵化的纯 JavaScript 图表库。它底层依赖轻量级的 Canvas 库 ZRender，提供直观、交互丰富、可高度个性化定制的数据可视化图表。支持折线图、柱状图、饼图、散点图、地图、雷达图、K线图等几十种图表类型，且兼容绝大多数现代浏览器（包括移动端）。

**核心优势**：
- 丰富的图表类型和交互效果（缩放、拖拽、tooltip）
- 大数据量下高性能渲染
- 支持 Canvas 和 SVG 双引擎
- 配置文件完全基于 JSON，上手简单

快速上手

引入 ECharts

**方法一：直接下载或 CDN**

```html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts 示例</title>

    

    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

</head>

<body>

    

    <div id="main" style="width: 800px; height: 500px;"></div>

<script>

        // 此处写初始化代码

    </script>

</body>

</html>

```

**方法二：npm 安装（用于 Vue/React 项目）**

```bash

npm install echarts --save

```

```javascript

import * as echarts from 'echarts';

// 或按需引入：import { init, use } from 'echarts/core';

```

ECharts绘图

折线图：

**效果**：一条带平滑曲线和填充区域的折线图，鼠标悬停显示数据点。

option = {
  title: {
    text: '2025年某商品销量趋势'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value',
    name: '销量（件）'
  },
  series: [
    {
      name: '销量',
      type: 'line',
      data: [120, 200, 150, 80, 70, 110],
      smooth: true,
      lineStyle: { width: 3, color: '#5470c6' },
      areaStyle: { opacity: 0.2 }
    }
  ]
};

柱状图：

多系列柱状图（分组或堆叠）只需在 `series` 数组中添加更多对象，并配置

var option = {
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    xAxis: { type: 'category', data: ['苹果', '华为', '小米', 'OPPO', 'vivo'] },
    yAxis: { type: 'value', name: '市场份额 (%)' },
    series: [{
        name: '2024年Q4',
        type: 'bar',
        data: [28, 22, 18, 15, 12],
        itemStyle: {
            borderRadius: [5, 5, 0, 0],
            color: '#ee6666'
        },
        label: { show: true, position: 'top' }   // 显示数值标签
    }]
};

饼图（Pie Chart）:

展示各部分占总体的比例。

var option = {
    title: { text: '某网站用户来源', left: 'center' },
    tooltip: { trigger: 'item', formatter: '{b}: {d}%' },
    series: [{
        name: '来源',
        type: 'pie',
        radius: '55%',          // 饼图半径（可设为 ['40%', '70%'] 变成环形图）
        data: [
            { value: 1048, name: '搜索引擎', itemStyle: { color: '#5470c6' } },
            { value: 735, name: '直接访问' },
            { value: 580, name: '社交媒体' },
            { value: 484, name: '邮件营销' }
        ],
        emphasis: { scale: true, label: { show: true } },
        label: { show: true, position: 'outside', formatter: '{b}: {d}%' }
    }]
};

散点图（Scatter Plot）：

观察两个变量间的相关性，如身高与体重。

var option = {
    xAxis: { name: '身高 (cm)', min: 140, max: 200 },
    yAxis: { name: '体重 (kg)', min: 40, max: 100 },
    series: [{
        type: 'scatter',
        data: [
            [160, 55], [170, 65], [180, 75], [155, 50],
            [175, 70], [185, 80], [165, 60], [190, 85]
        ],
        symbolSize: 12,
        itemStyle: { color: '#fac858' }
    }]
};

南丁格尔玫瑰图：

在饼图基础上突出量级差异，适合周期性数据。

var option = {
    series: [{
        type: 'pie',
        radius: ['20%', '80%'],
        roseType: 'radius',          // 关键：半径模式
        data: [
            { value: 30, name: '玫瑰1' }, { value: 45, name: '玫瑰2' },
            { value: 28, name: '玫瑰3' }, { value: 60, name: '玫瑰4' }
        ]
    }]
};

仪表盘：

展示完成率、KPI指标。

var option = {
    series: [{
        type: 'gauge',
        center: ['50%', '50%'],
        radius: '70%',
        min: 0,
        max: 100,
        progress: { show: true, width: 18 },
        axisLine: { lineStyle: { width: 18, color: [[0.8, '#91cc75']] } },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        pointer: { show: true, length: '60%', width: 8 },
        detail: { valueAnimation: true, fontSize: 24, offsetCenter: [0, 20] },
        title: { show: false },
        data: [{ value: 78, name: '完成率' }]
    }]
};

大模型微调：（代码评论区回复获取）

学习资源：

- 官方网站：https://echarts.apache.org/zh/index.html

希望这篇指南能帮你快速产出漂亮的图表。如果你有更好的实践或疑问，欢迎评论区交流。

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

单相逆变器模型仿真研究（Simulink仿真实现）

单相逆变器作为电力电能转换的核心装置，可实现直流电与交流电的双向转换，广泛应用于分布式光伏发电、家用储能、不间断电源、小型新能源供电系统等民用与工业场景。为探究单相逆变器的工作特性、运行稳定性及电能输出质量，本文依托电力电子系统仿真技术，开展单相逆变器整体模型仿真研究。本文首先梳理单相逆变器的拓扑结构与工作原理，明确系统核心组成模块及运行机制；其次完成仿真系统的整体方案设计，搭建包含电源、逆变主电