正文

学会ECharts：轻松制作各种图表的实战教程全解析

/0 浏览量
0509

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括折线图、柱状图、饼图、地图、散点图等等，非常适合用于数据可视化。本教程将带领你一步步学会如何使用 ECharts 制作各种图表。

第一节：ECharts 简介

1.1 什么是 ECharts？

ECharts 是一个基于 JavaScript 的开源可视化库，由百度团队开发，旨在提供流畅、交互性强、可高度自定义的图表展示。它具有以下特点：

  • 丰富的图表类型：支持折线图、柱状图、饼图、地图、散点图等多种图表类型。
  • 高性能：采用 Canvas 或 SVG 渲染，具有高性能的渲染能力。
  • 高度自定义：支持自定义主题、颜色、动画、标签等。

1.2 ECharts 的应用场景

ECharts 可用于各种场景，如：

  • 数据可视化：将数据以图表的形式展示，方便用户理解数据。
  • 网页界面：美化网页界面，提升用户体验。
  • 移动端应用：在移动端应用中展示图表，提供数据交互。

第二节：ECharts 快速上手

2.1 环境搭建

  1. 下载 ECharts：访问 ECharts 官网（https://echarts.baidu.com/）下载 ECharts 库。
  2. 引入 ECharts：将下载的 ECharts 库引入到项目中。
  3. HTML 结构：创建一个 HTML 页面，用于展示图表。

2.2 基础用法

  1. 基本结构：ECharts 的基本结构包括 div 容器、script 标签和 option 对象。
  2. 初始化 ECharts：使用 echarts.init() 方法初始化 ECharts。
  3. 配置选项：在 option 对象中配置图表类型、数据、样式等。

第三节：常见图表类型详解

3.1 折线图

折线图适用于展示数据随时间的变化趋势。以下是一个简单的折线图示例：

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '折线图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

myChart.setOption(option);

3.2 柱状图

柱状图适用于展示不同类别数据的对比。以下是一个简单的柱状图示例：

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '柱状图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

myChart.setOption(option);

3.3 饼图

饼图适用于展示各个部分占整体的比例。以下是一个简单的饼图示例：

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '饼图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
    },
    series: [{
        name: '销量',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
            {value: 5, name: '衬衫'},
            {value: 20, name: '羊毛衫'},
            {value: 36, name: '雪纺衫'},
            {value: 10, name: '裤子'},
            {value: 10, name: '高跟鞋'},
            {value: 20, name: '袜子'}
        ],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

myChart.setOption(option);

第四节：进阶使用

4.1 动画效果

ECharts 支持丰富的动画效果，包括数据动画、颜色动画、标签动画等。以下是一个添加动画效果的柱状图示例：

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '柱状图动画示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        animationDelay: function (idx) {
            return idx * 100;
        }
    }]
};

myChart.setOption(option);

4.2 交互功能

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: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
    },
    series: [{
        name: '销量',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
            {value: 5, name: '衬衫'},
            {value: 20, name: '羊毛衫'},
            {value: 36, name: '雪纺衫'},
            {value: 10, name: '裤子'},
            {value: 10, name: '高跟鞋'},
            {value: 20, name: '袜子'}
        ],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        },
        label: {
            normal: {
                formatter: '{b}: {c} ({d}%)'
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

myChart.setOption(option);

第五节：实战案例

5.1 制作公司销售数据图表

  1. 数据准备：收集公司各产品的销售数据。
  2. 选择图表类型：根据数据类型选择合适的图表类型，如柱状图、折线图等。
  3. 配置图表：根据 ECharts 的 API 文档配置图表选项。
  4. 展示图表：将图表嵌入到网页中。

5.2 制作全球疫情数据地图

  1. 数据准备：收集全球疫情数据，包括确诊人数、治愈人数、死亡人数等。
  2. 选择图表类型：选择地图图表，展示全球疫情分布情况。
  3. 配置图表：根据 ECharts 的 API 文档配置地图图表选项，包括地图数据、颜色、标签等。
  4. 展示图表：将地图图表嵌入到网页中。

第六节：总结

本教程带你了解了 ECharts 的基本概念、快速上手、常见图表类型、进阶使用和实战案例。通过学习本教程，你将能够轻松制作各种图表，并将数据可视化。希望你在实际应用中不断探索和尝试，发挥 ECharts 的强大功能。

-- 展开阅读全文 --