正文

掌握echarts图表制作：从入门到精通，全方位教程文档分享

/0 浏览量
0502

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以用于在网页上绘制各种图表。从简单的柱状图、折线图到复杂的地图、雷达图，ECharts 都能轻松实现。本教程将从入门到精通，全面讲解 ECharts 的使用方法，助你成为图表制作高手。

第一部分：ECharts 入门

1.1 ECharts 简介

ECharts 是由百度团队开发的一款高性能、可扩展的图表库，支持多种图表类型和丰富的配置项。它具有以下特点：

  • 高性能：基于Canvas渲染，速度快，适合大数据量的展示。
  • 可扩展：支持多种图表类型，可以自定义图表组件。
  • 简单易用：通过简单的配置项，即可实现各种图表的绘制。
  • 跨平台：兼容多种浏览器和设备。

1.2 ECharts 安装与引入

ECharts 支持多种引入方式，以下为常见方式：

1.2.1 通过 CDN 引入

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

1.2.2 通过 npm 安装

npm install echarts

1.3 ECharts 基本使用

以下是使用 ECharts 绘制一个简单柱状图的示例：

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

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

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

第二部分：ECharts 图表类型详解

2.1 柱状图与折线图

柱状图和折线图是 ECharts 中最常用的图表类型，常用于展示数据的趋势和比较。

2.1.1 柱状图

柱状图用于展示各个类别的数据值，通常用于比较不同类别的数据。

// 柱状图配置
var option = {
    // ... 其他配置项
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70],
        type: 'bar'
    }]
};

2.1.2 折线图

折线图用于展示数据的变化趋势，通常用于展示时间序列数据。

// 折线图配置
var option = {
    // ... 其他配置项
    xAxis: {
        type: 'time',
        boundaryGap: false
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
            [new Date(2020, 1, 1), 10],
            [new Date(2020, 1, 2), 20],
            [new Date(2020, 1, 3), 30],
            [new Date(2020, 1, 4), 40]
        ],
        type: 'line'
    }]
};

2.2 饼图与环形图

饼图和环形图用于展示数据的占比情况，常用于展示百分比或占比排名。

2.2.1 饼图

饼图用于展示各个类别的数据占比。

// 饼图配置
var option = {
    // ... 其他配置项
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        data: [
            {value: 235, name: '视频广告'},
            {value: 274, name: '联盟广告'},
            {value: 310, name: '邮件营销'},
            {value: 335, name: '直接访问'},
            {value: 400, name: '搜索引擎'}
        ]
    }]
};

2.2.2 环形图

环形图是饼图的一种变形，常用于展示多层级数据的占比。

// 环形图配置
var option = {
    // ... 其他配置项
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: ['40%', '65%'],
        avoidLabelOverlap: false,
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
            }
        },
        labelLine: {
            show: false
        },
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
        ]
    }]
};

2.3 散点图与散点图矩阵

散点图用于展示两个或多个变量的关系，散点图矩阵则是散点图的一种扩展，可以同时展示多个变量之间的关系。

2.3.1 散点图

散点图用于展示两个变量的关系。

// 散点图配置
var option = {
    // ... 其他配置项
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
        ],
        type: 'scatter'
    }]
};

2.3.2 散点图矩阵

散点图矩阵可以同时展示多个变量之间的关系。

// 散点图矩阵配置
var option = {
    // ... 其他配置项
    xAxis: [
        {
            type: 'value',
            name: '身高',
            position: 'bottom',
            boundaryGap: [0.2, 0.2]
        },
        {
            type: 'value',
            name: '体重',
            position: 'right',
            boundaryGap: [0.2, 0.2]
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '身高',
            position: 'top',
            boundaryGap: [0.2, 0.2]
        },
        {
            type: 'value',
            name: '体重',
            position: 'left',
            boundaryGap: [0.2, 0.2]
        }
    ],
    grid: [
        {
            top: '10%',
            bottom: '60%'
        },
        {
            top: '60%',
            bottom: '90%'
        }
    ],
    series: [
        {
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: [
                [140, 60],
                [160, 80],
                [150, 70]
            ],
            type: 'scatter'
        },
        {
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [
                [60, 140],
                [70, 160],
                [80, 150]
            ],
            type: 'scatter'
        }
    ]
};

2.4 地图与地理坐标系

地图和地理坐标系用于展示地理信息，可以展示行政区划、地理分布等信息。

2.4.1 地图

地图用于展示行政区划或地理分布。

// 地图配置
var option = {
    // ... 其他配置项
    series: [{
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [
            {name: '北京', value: Math.round(Math.random() * 1000)},
            {name: '天津', value: Math.round(Math.random() * 1000)},
            {name: '上海', value: Math.round(Math.random() * 1000)},
            {name: '重庆', value: Math.round(Math.random() * 1000)},
            // ... 其他省市
        ]
    }]
};

2.4.2 地理坐标系

地理坐标系可以展示更加丰富的地理信息，如地形、气候等。

// 地理坐标系配置
var option = {
    // ... 其他配置项
    series: [{
        type: 'map',
        mapType: 'world',
        label: {
            show: true
        },
        data: [
            {name: '美国', value: Math.round(Math.random() * 1000)},
            {name: '巴西', value: Math.round(Math.random() * 1000)},
            {name: '印度', value: Math.round(Math.random() * 1000)},
            {name: '中国', value: Math.round(Math.random() * 1000)},
            // ... 其他国家
        ]
    }]
};

2.5 雷达图与漏斗图

雷达图和漏斗图是 ECharts 中较为特殊的图表类型，常用于展示复杂的数据结构。

2.5.1 雷达图

雷达图用于展示多个变量的综合评价。

// 雷达图配置
var option = {
    // ... 其他配置项
    series: [{
        type: 'radar',
        data: [
            {
                name: '预算分配（Allocated Budget）',
                value: [4200, 3000, 2000, 1000, 600, 200]
            },
            {
                name: '实际开销（Actual Spending）',
                value: [4200, 3000, 2000, 1000, 600, 200]
            }
        ]
    }]
};

2.5.2 漏斗图

漏斗图用于展示数据的筛选和过滤过程。

// 漏斗图配置
var option = {
    // ... 其他配置项
    series: [{
        type: 'funnel',
        left: '10%',
        top: 60,
        // ...
        data: [
            {value: 600, name: '第一层'},
            {value: 500, name: '第二层'},
            {value: 300, name: '第三层'},
            {value: 200, name: '第四层'},
            {value: 100, name: '第五层'}
        ]
    }]
};

第三部分：ECharts 高级使用

3.1 动画与交互

ECharts 支持丰富的动画效果和交互功能，可以增强图表的视觉效果和用户体验。

3.1.1 动画

ECharts 支持多种动画效果，如渐变、缩放、旋转等。

// 动画配置
var option = {
    // ... 其他配置项
    animation: true,
    series: [{
        type: 'line',
        data: [120, 200, 150, 80, 70],
        animationDuration: 1000,
        animationEasing: 'cubicInOut'
    }]
};

3.1.2 交互

ECharts 支持多种交互方式，如鼠标悬停、点击等。

// 交互配置
var option = {
    // ... 其他配置项
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

3.2 ECharts 组件扩展

ECharts 支持自定义组件，可以扩展图表的功能和样式。

// 自定义组件配置
var option = {
    // ... 其他配置项
    grid: {
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'bar',
        data: [120, 200, 150, 80, 70],
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'top'
                }
            }
        }
    }]
};

3.3 ECharts 与其他库的结合

ECharts 可以与其他前端库结合使用，如 Vue、React 等。

// Vue 示例
<template>
  <div ref="main" style="width: 600px;height:400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      var myChart = echarts.init(this.$refs.main);
      var option = {
        // ... 配置项
      };
      myChart.setOption(option);
    }
  }
};
</script>

第四部分：ECharts 应用案例

4.1 数据可视化

ECharts 可以将各种数据以图表的形式展示，方便用户理解数据。

4.1.1 销售数据可视化

通过柱状图和折线图，可以展示销售数据的趋势和比较。

4.1.2 市场份额可视化

通过饼图和环形图，可以展示市场份额的分布情况。

4.2 实时监控

ECharts 可以用于实时监控数据，如服务器状态、网络流量等。

4.2.1 服务器状态监控

通过折线图，可以实时监控服务器的 CPU、内存、磁盘等使用情况。

4.2.2 网络流量监控

通过柱状图，可以实时监控网络流量变化。

4.3 交互式数据探索

ECharts 支持丰富的交互功能，可以用于数据探索和可视化分析。

4.3.1 数据筛选

通过点击图表元素，可以筛选出特定的数据。

4.3.2 数据排序

通过拖拽图表元素，可以调整数据的排序。

总结

本教程从入门到精通，全面讲解了 ECharts 的使用方法。通过学习本教程，你将能够：

  • 熟练掌握 ECharts 的基本使用方法
  • 掌握 ECharts 的各种图表类型和配置项
  • 使用 ECharts 实现复杂的数据可视化效果
  • 将 ECharts 与其他库结合使用

希望本教程能够帮助你成为一名 ECharts 图表制作高手！

-- 展开阅读全文 --