正文

新手必看！全方位echarts图表制作教程，轻松入门实战案例解析

/0 浏览量
0702

引言

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松实现各种图表的展示。对于数据分析、数据可视化等领域来说，ECharts 是一个非常有用的工具。本教程旨在帮助新手快速掌握 ECharts 的基本使用方法，并通过实战案例解析，让你能够轻松制作出各种美观且实用的图表。

一、ECharts 简介

1.1 什么是 ECharts？

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以用于绘制各种图表，如柱状图、折线图、饼图、散点图等。它具有以下特点：

  • 丰富的图表类型：支持多种图表类型，满足不同场景的需求。
  • 高度可定制：图表样式、颜色、布局等均可自由调整。
  • 跨平台：可在多种浏览器和设备上运行。

1.2 ECharts 的优势

  • 易用性：ECharts 提供了简单易用的 API，新手也能快速上手。
  • 性能优越：ECharts 在大数据量下的渲染速度和性能表现良好。
  • 丰富的社区资源：ECharts 社区活跃，提供大量教程、插件和示例。

二、ECharts 快速入门

2.1 环境搭建

  1. 下载 ECharts：访问 ECharts 官网（https://echarts.apache.org/）下载 ECharts 最新版本。
  2. 引入 ECharts：将下载的 ECharts 包引入到你的项目中。
  3. HTML 基础：确保你的项目支持 HTML 语法。

2.2 创建图表

  1. 准备数据：准备好要展示的数据。
  2. 编写代码：根据数据类型选择合适的图表类型，并编写 ECharts 代码。
  3. 展示图表：将生成的图表插入到 HTML 页面中。

三、实战案例解析

3.1 柱状图

3.1.1 数据准备

假设我们有一组销售数据，如下所示：

月份：1月，2月，3月，4月
销售额：1000，1500，1200，1800

3.1.2 编写代码

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '销售数据'
    },
    tooltip: {},
    legend: {
        data:['销售额']
    },
    xAxis: {
        data: ["1月", "2月", "3月", "4月"]
    },
    yAxis: {},
    series: [{
        name: '销售额',
        type: 'bar',
        data: [1000, 1500, 1200, 1800]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

3.1.3 展示图表

将上述代码插入到 HTML 页面中，并在页面中添加一个 div 元素，为其设置 id 为 “main”，即可展示柱状图。

3.2 饼图

假设我们有一组产品类别数据，如下所示：

产品类别：A，B，C，D
销售额占比：20%，30%，25%，25%

3.2.1 编写代码

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入饼图
require('echarts/lib/chart/pie');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '产品类别销售额占比'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['A', 'B', 'C', 'D']
    },
    series: [
        {
            name: '销售额占比',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 20, name: 'A'},
                {value: 30, name: 'B'},
                {value: 25, name: 'C'},
                {value: 25, name: 'D'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

3.2.2 展示图表

将上述代码插入到 HTML 页面中，并在页面中添加一个 div 元素，为其设置 id 为 “main”，即可展示饼图。

四、总结

本文介绍了 ECharts 的基本使用方法和实战案例解析，希望能帮助新手快速掌握 ECharts 的制作技巧。在实际应用中，你可以根据需求选择合适的图表类型，并通过调整参数和样式，制作出美观且实用的图表。

-- 展开阅读全文 --