正文

ECharts图表库下载安装指南：官网CDN引入npm安装完整教程从零学会绘制折线图柱状图饼图

/0 浏览量
0903

ECharts图表库下载安装指南：官网CDN引入npm安装完整教程从零学会绘制折线图柱状图饼图

先跟你聊聊ECharts到底是个啥

想象一下，你手里有一堆数据，比如公司过去五年的销售额、网站每天的访问量、不同产品的占比分布……如果直接用Excel拉个表格给人看，对方估计不到三秒就关掉。但要是把这些数字变成一张漂亮的图表，一眼就能看出趋势、对比、占比，那种”原来如此”的感觉是不是特别爽？

ECharts就是干这个的。它是百度开源的一套可视化库，专门用来在网页上画各种图表——折线图、柱状图、饼图、散点图、地图，甚至三维图表它都能搞定。说它强大，是因为它支持海量的数据量、各种复杂的交互效果，而且文档写得非常友好，对中文开发者特别贴心。

说实话，我第一次接触ECharts的时候，以为要安装一堆复杂的环境，结果发现它的使用方式比我想象中简单太多了。下面我就带你一步步从零开始，把这个工具玩转。

第一种方式：CDN引入——最快上手的方式

如果你只是想快速在页面上展示一个图表，不需要构建工具，不需要Node环境，那么CDN引入是最省事的。

什么是CDN？

CDN（Content Delivery Network，内容分发网络）简单说就是把你的文件放到很多台服务器上，用户访问时自动选择离他最近的服务器来下载。使用CDN引入ECharts的好处是：你不用本地安装任何东西，直接在HTML页面里写一行代码，浏览器就会从网络上加载ECharts的库文件。

官方CDN地址

ECharts在官网提供了多种CDN引入方式，最常用的是这两个地址：

  • 官方CDN：https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js
  • BootCDN：https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js

版本号可能会更新，建议去ECharts官网确认最新的稳定版本。

完整的HTML示例

让我给你一个可以直接复制粘贴运行的完整例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts入门示例</title>
    <!-- 引入ECharts CDN -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 图表容器，必须指定尺寸 -->
    <div id="main" style="width: 800px; height: 400px;"></div>

    <script>
        // 初始化ECharts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 配置项
        var option = {
            title: {
                text: 'ECharts入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用配置项显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

把这段代码保存为 index.html，然后用浏览器打开，你就会看到一个简单的柱状图出现在页面上了。就是这么简单。

CDN方式的优缺点

优点：

  • 零安装，复制粘贴就能用
  • 适合快速原型、小型项目、个人博客
  • 不需要配置任何构建工具

缺点：

  • 图表的样式和大小一旦写死在HTML里，修改起来不太方便
  • 多人协作时，版本管理比较混乱
  • 无法按需加载，文件体积偏大

第二种方式：npm安装——适合正式项目

如果你的项目是用Vue、React、Angular或者任何现代化的前端框架构建的，那么npm安装是更规范的做法。

安装ECharts

首先确保你已经安装了Node.js。打开终端，进入你的项目目录，执行：

npm install echarts

安装完成后，在项目中导入ECharts：

import * as echarts from 'echarts';

或者如果你只想按需引入：

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/pie';

Vue项目中的完整示例

假设你正在用Vue 3写一个项目，以下是完整的用法：

<template>
  <div class="chart-container">
    <div ref="chartRef" class="chart"></div>
  </div>
</template>

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

const chartRef = ref(null);
let chartInstance = null;

onMounted(() => {
  // 初始化实例
  chartInstance = echarts.init(chartRef.value);

  // 配置项
  const option = {
    title: {
      text: '2024年销售额统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['华东区', '华南区', '华北区']
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value',
      name: '销售额（万元）'
    },
    series: [
      {
        name: '华东区',
        type: 'bar',
        data: [120, 132, 101, 134, 90, 230],
        itemStyle: { color: '#5470c6' }
      },
      {
        name: '华南区',
        type: 'bar',
        data: [220, 182, 191, 234, 290, 330],
        itemStyle: { color: '#91cc75' }
      },
      {
        name: '华北区',
        type: 'bar',
        data: [150, 212, 201, 154, 190, 330],
        itemStyle: { color: '#fac858' }
      }
    ]
  };

  chartInstance.setOption(option);
});

onUnmounted(() => {
  // 组件销毁时销毁实例，避免内存泄漏
  if (chartInstance) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  padding: 20px;
}
.chart {
  width: 100%;
  height: 400px;
}
</style>

这个例子展示了Vue项目中完整的生命周期管理：挂载时初始化图表，卸载时销毁实例。这是很多初学者容易忽略的地方。

零基础绘制折线图

折线图适合展示数据随时间变化的趋势。比如公司每月的收入变化、天气温度变化、股票价格走势等等。

基本折线图代码

// 初始化
var chartDom = document.getElementById('line-chart');
var myChart = echarts.init(chartDom);

// 配置项
var option = {
  title: {
    text: '某城市近7日气温变化',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['最高气温', '最低气温'],
    bottom: 10
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} °C'
    }
  },
  series: [
    {
      name: '最高气温',
      type: 'line',
      data: [11, 11, 15, 13, 12, 13, 10],
      smooth: true,
      areaStyle: {
        opacity: 0.3
      },
      itemStyle: {
        color: '#5470c6'
      }
    },
    {
      name: '最低气温',
      type: 'line',
      data: [2, 2, 3, 1, 2, 3, 1],
      smooth: true,
      itemStyle: {
        color: '#91cc75'
      }
    }
  ]
};

myChart.setOption(option);

几个关键配置项解释

  • smooth: true：让折线变得圆滑，去掉尖锐的折角
  • areaStyle：给折线图填充区域颜色，让视觉效果更丰富
  • boundaryGap: false：让线条从y轴开始绘制，而不是在刻度之间
  • tooltip.trigger: 'axis'：鼠标悬停时显示整条轴的数据，而不是单个点

带数据标注的折线图

有时候需要在每个数据点上显示具体数值，比如展示每日营收：

series: [{
  name: '日营收（万元）',
  type: 'line',
  data: [120, 132, 101, 134, 90, 230, 210],
  smooth: true,
  label: {
    show: true,
    position: 'top',
    formatter: '{c} 万'
  },
  markPoint: {
    data: [
      { type: 'max', name: '最大值' },
      { type: 'min', name: '最小值' }
    ]
  },
  markLine: {
    data: [
      { type: 'average', name: '平均值' }
    ]
  }
}]

markPoint 用来标记最大值和最小值，markLine 用来画平均值线。这些标注功能在汇报数据时非常实用。

零基础绘制柱状图

柱状图适合做数据对比。比如不同产品的销量对比、不同地区的业绩排名、不同时间段的访问量等。

基本柱状图

var chartDom = document.getElementById('bar-chart');
var myChart = echarts.init(chartDom);

var option = {
  title: {
    text: '2024年各产品销量对比',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['手机', '平板', '耳机', '手表', '音箱', '充电器'],
    axisLabel: {
      interval: 0,
      rotate: 15  // 文字倾斜，防止重叠
    }
  },
  yAxis: {
    type: 'value',
    name: '销量（台）'
  },
  series: [{
    name: '销量',
    type: 'bar',
    data: [1500, 800, 2000, 600, 900, 400],
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#83bff6' },
        { offset: 0.5, color: '#188df0' },
        { offset: 1, color: '#188df0' }
      ])
    },
    barWidth: '60%',
    label: {
      show: true,
      position: 'top',
      formatter: '{c} 台'
    }
  }]
};

myChart.setOption(option);

渐变色柱状图

上面的例子中用了 LinearGradient 来给柱子添加渐变效果，这种视觉效果比普通纯色更有质感。渐变的参数含义是：

  • 前两个参数 0, 0 表示渐变的起始点（左上角）
  • 后两个参数 0, 1 表示渐变的结束点（左下角）
  • 第三个参数是颜色数组，offset 表示位置，color 表示颜色

堆叠柱状图

堆叠柱状图适合展示”总量中的各部分构成”，比如每个月总收入中各产品线的贡献：

series: [
  {
    name: '产品A',
    type: 'bar',
    stack: 'total',
    data: [320, 302, 301, 334, 390, 330, 320],
    itemStyle: { color: '#5470c6' }
  },
  {
    name: '产品B',
    type: 'bar',
    stack: 'total',
    data: [120, 132, 101, 134, 90, 230, 210],
    itemStyle: { color: '#91cc75' }
  },
  {
    name: '产品C',
    type: 'bar',
    stack: 'total',
    data: [220, 182, 191, 234, 290, 330, 310],
    itemStyle: { color: '#fac858' }
  }
]

关键就是给每个series加上 stack: 'total'，这样它们就会堆叠在一起而不是并列显示。

双向柱状图

双向柱状图很有意思，适合做对比，比如男女性别比例、左右区域业绩对比等：

xAxis: [
  {
    type: 'value',
    position: 'bottom',
    axisLabel: {
      formatter: function(value) {
        return Math.abs(value);
      }
    }
  },
  {
    type: 'value',
    position: 'top',
    axisLabel: {
      formatter: function(value) {
        return Math.abs(value);
      }
    },
    splitLine: { show: false }
  }
],
series: [
  {
    name: '销量',
    type: 'bar',
    data: [320, 302, 341, 374, 390, 450, 420],
    barWidth: '30%',
    itemStyle: { color: '#5470c6' },
    label: { show: true, position: 'top' }
  },
  {
    name: '退货量',
    type: 'bar',
    data: [-120, -132, -101, -134, -190, -230, -210],
    barWidth: '30%',
    itemStyle: { color: '#ee6666' },
    label: {
      show: true,
      position: 'bottom',
      formatter: function(params) {
        return Math.abs(params.value) + '件';
      }
    }
  }
]

注意退货量的数据是负数，这样柱子就会向左延伸。两个x轴分别位于底部和顶部，底部显示正数刻度，顶部也显示正数刻度但方向相反，这样就形成了双向柱状图的效果。

零基础绘制饼图

饼图适合展示各部分占总体的比例，比如市场份额、预算分配、人口构成等。

基本饼图

var chartDom = document.getElementById('pie-chart');
var myChart = echarts.init(chartDom);

var option = {
  title: {
    text: '2024年市场份额分布',
    subtext: '数据来源：市场研究部',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '市场份额',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '品牌A' },
        { value: 735, name: '品牌B' },
        { value: 580, name: '品牌C' },
        { value: 484, name: '品牌D' },
        { value: 300, name: '品牌E' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

myChart.setOption(option);

formatter: '{b}: {c} ({d}%)' 这行代码会让tooltip显示品牌名、数量和百分比，比默认显示更直观。

环形图

环形图和饼图其实是一回事，只是中间留了个圆。环形图看起来更现代，适合展示简洁的数据：

series: [{
  name: '市场份额',
  type: 'pie',
  radius: ['40%', '70%'],  // 内半径和外半径
  avoidLabelOverlap: false,
  itemStyle: {
    borderRadius: 10,
    borderColor: '#fff',
    borderWidth: 2
  },
  label: {
    show: true,
    formatter: '{b}\n{d}%'
  },
  data: [
    { value: 1048, name: '品牌A' },
    { value: 735, name: '品牌B' },
    { value: 580, name: '品牌C' },
    { value: 484, name: '品牌D' },
    { value: 300, name: '品牌E' }
  ]
}]

把 radius 改为 ['40%', '70%'] 就得到了环形图。外半径70%，内半径40%，中间就空出了一个半径40%的圆。

南丁格尔图

南丁格尔图（Nightingale Chart）是一种玫瑰图，每个扇区的半径不同，用面积来表示数值大小，视觉效果非常震撼：

series: [{
  name: '访问量',
  type: 'pie',
  radius: [20, 140],
  center: ['50%', '50%'],
  roseType: 'area',
  itemStyle: {
    borderRadius: 8
  },
  label: {
    show: true,
    formatter: '{b}\n{c}万'
  },
  data: [
    { value: 40, name: '搜索引擎' },
    { value: 38, name: '直接访问' },
    { value: 32, name: '邮件营销' },
    { value: 30, name: '联盟广告' },
    { value: 28, name: '视频广告' },
    { value: 25, name: '社交媒体' },
    { value: 22, name: '其他' }
  ]
}]

roseType: 'area' 这个配置让饼图变成南丁格尔图。每个扇区的半径长度代表数值大小，颜色区分不同类别。

一些实用的小技巧

响应式适配

图表容器的大小变化时，图表应该自动适配。这可以通过监听窗口resize事件来实现：

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

主题切换

ECharts支持内置主题和自定义主题：

// 使用内置主题
var chart = echarts.init(chartDom, 'dark');

// 内置主题包括：'light', 'dark', 'shine' 等

图表导出图片

有时候用户需要把图表保存为图片：

// 导出PNG
myChart.getDataURL({
  type: 'png',
  pixelRatio: 2,
  backgroundColor: '#fff'
});

数据动态更新

如果数据是实时变化的，可以用 setOption 动态更新：

// 每3秒更新一次数据
setInterval(function() {
  var newData = newDataGenerator();
  myChart.setOption({
    series: [{
      data: newData
    }]
  });
}, 3000);

总结一下

ECharts真的是一款非常友好且强大的图表库。它的学习曲线比较平缓，你只需要掌握几个核心的配置项就能画出漂亮的图表。

如果你只是做个小demo或者快速验证想法，用CDN引入是最快的方式，几秒钟就能跑起来。如果你的项目是正式的、需要长期维护的，那么用npm安装更规范，也方便管理版本。

折线图看趋势，柱状图做对比，饼图看占比——这三个是最基础也是最常用的图表类型，先把这三个玩明白，你就已经掌握了ECharts的八成技能了。剩下的地图、散点图、热力图之类的，都是在此基础上加一些配置，慢慢探索就行。

图表最终是为了传达信息，所以不要为了炫酷而炫酷，清晰、直观、准确才是最重要的。好了，今天就聊到这里，去试试吧！

-- 展开阅读全文 --