正文

新手学ECharts，快速上手指南：从基础图表到高级应用，打造数据可视化达人之路

/0 浏览量
0905

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一套丰富的图表类型，包括折线图、柱状图、饼图、地图等，可以方便地应用于网页中，实现数据的可视化展示。对于新手来说，ECharts 可能会显得有些复杂，但只要掌握了基础，逐步深入，你也能成为数据可视化达人。本文将带你从基础图表开始，逐步学习 ECharts 的高级应用。

一、ECharts 简介

1.1 什么是 ECharts？

ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以在网页中展示各种图表，帮助用户更好地理解和分析数据。ECharts 具有以下特点：

  • 丰富的图表类型：包括折线图、柱状图、饼图、地图等，满足不同场景的需求。
  • 高度可定制：支持丰富的配置项，可以自定义图表的颜色、样式、交互等。
  • 高性能：采用 Canvas 和 SVG 渲染，保证图表的流畅展示。
  • 易用性：提供详细的文档和示例，方便用户学习和使用。

1.2 ECharts 的应用场景

ECharts 可以应用于各种场景，例如：

  • 网站数据分析：展示用户访问量、页面浏览量等数据。
  • 产品销量分析：展示不同产品的销量情况。
  • 地理信息展示：展示地图上的数据分布。
  • 股票行情分析：展示股票走势、成交量等数据。

二、ECharts 基础图表

2.1 折线图

折线图是 ECharts 中最常用的图表之一，用于展示数据随时间的变化趋势。以下是一个简单的折线图示例：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入折线图组件
require('echarts/lib/chart/line');

// 基于准备好的dom，初始化echarts实例
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);

2.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: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

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

2.3 饼图

饼图用于展示数据的占比情况。以下是一个简单的饼图示例：

// 引入 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'
    },
    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);

三、ECharts 高级应用

3.1 地图

ECharts 支持多种地图类型，包括中国地图、世界地图等。以下是一个简单的中国地图示例：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/chart/map');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
    },
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '天津', value: Math.round(Math.random() * 1000)},
                // ... 其他城市数据
            ]
        }
    ]
};

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

3.2 3D 图表

ECharts 支持多种 3D 图表类型，例如 3D 柱状图、3D 饼图等。以下是一个简单的 3D 柱状图示例：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入 3D 柱状图组件
require('echarts/lib/chart/bar3D');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '3D 柱状图示例'
    },
    tooltip: {},
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    zAxis: {
        type: 'value'
    },
    series: [{
        name: '3D 柱状图',
        type: 'bar3D',
        data: [
            [10, 20, 30],
            [10, 20, 40],
            [10, 20, 50]
        ]
    }]
};

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

四、总结

ECharts 是一个功能强大的数据可视化库，可以帮助你轻松实现各种图表的展示。通过本文的学习，你应该已经掌握了 ECharts 的基础图表和高级应用。希望你能将所学知识应用到实际项目中，打造出令人惊艳的数据可视化作品。

-- 展开阅读全文 --