正文

新手必看！轻松掌握ECharts图表制作技巧与案例解析

/0 浏览量
0513

ECharts是一款使用JavaScript开发的数据可视化库，广泛应用于各种数据展示场景。对于新手来说，掌握ECharts图表制作技巧能够帮助快速入门并创作出精美的数据图表。本文将详细解析ECharts图表制作的基本技巧，并结合实际案例，帮助您轻松入门。

一、ECharts基础了解

1.1 ECharts简介

ECharts是一个使用JavaScript编写的开源可视化库，它提供了一整套图表类型，包括折线图、柱状图、饼图、地图、散点图等，支持多维度、多系列数据的可视化。

1.2 ECharts的特点

  • 丰富的图表类型：支持多种图表类型，满足不同场景的需求。
  • 易用性：简单易学，易于上手。
  • 高性能：使用Canvas和SVG进行绘制，性能优秀。
  • 扩展性强：支持自定义图表类型和扩展插件。

二、ECharts基本使用

2.1 创建图表实例

在HTML中引入ECharts库，然后创建一个图表容器：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
</head>
<body>
    <!-- 图表容器 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的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);
    </script>
</body>
</html>

2.2 配置图表

ECharts的配置项分为两个部分：series和legend。

  • series：定义图表类型和具体数据。
  • legend：定义图例。

三、ECharts图表类型

ECharts提供了丰富的图表类型，以下是一些常见的图表类型：

  • 折线图：用于展示数据趋势。
  • 柱状图：用于展示各个类别的数据数量。
  • 饼图：用于展示各部分占整体的比例。
  • 散点图：用于展示多个维度的数据点。
  • 地图：用于展示地理位置相关的数据。

3.1 柱状图案例

以下是一个柱状图的例子，展示了不同产品类的销量情况：

option = {
    title: {
        text: '不同产品类销量对比'
    },
    tooltip: {},
    legend: {
        data:['产品类A', '产品类B', '产品类C']
    },
    xAxis: {
        data: ["产品A1", "产品A2", "产品A3", "产品B1", "产品B2", "产品B3", "产品C1", "产品C2", "产品C3"]
    },
    yAxis: {},
    series: [{
        name: '产品类A',
        type: 'bar',
        data: [10, 20, 30, 40, 50, 60, 70, 80, 90]
    }, {
        name: '产品类B',
        type: 'bar',
        data: [15, 25, 35, 45, 55, 65, 75, 85, 95]
    }, {
        name: '产品类C',
        type: 'bar',
        data: [5, 15, 25, 35, 45, 55, 65, 75, 85]
    }]
};

3.2 饼图案例

以下是一个饼图的例子，展示了不同类别的占比情况：

option = {
    title: {
        text: '各类目占比'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['类目A', '类目B', '类目C', '类目D']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '类目A'},
                {value: 735, name: '类目B'},
                {value: 580, name: '类目C'},
                {value: 484, name: '类目D'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

四、案例解析

4.1 销售数据可视化

以下是一个使用ECharts展示销售数据的例子，包括折线图、柱状图和饼图：

option = {
    title: {
        text: '销售数据分析'
    },
    tooltip: {},
    legend: {
        data:['产品类A', '产品类B', '产品类C', '销售额']
    },
    xAxis: {
        data: ["1月", "2月", "3月", "4月", "5月", "6月"]
    },
    yAxis: {},
    series: [
        {
            name: '产品类A',
            type: 'line',
            data: [10, 20, 30, 40, 50, 60]
        },
        {
            name: '产品类B',
            type: 'line',
            data: [5, 15, 25, 35, 45, 55]
        },
        {
            name: '产品类C',
            type: 'line',
            data: [20, 10, 30, 20, 40, 30]
        },
        {
            name: '销售额',
            type: 'bar',
            data: [70, 80, 90, 100, 110, 120]
        }
    ]
};

4.2 地图数据可视化

以下是一个使用ECharts展示中国地图数据的例子：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图数据可视化'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['类目1', '类目2', '类目3', '类目4', '类目5', '类目6']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '类目1'},
                {value: 310, name: '类目2'},
                {value: 234, name: '类目3'},
                {value: 135, name: '类目4'},
                {value: 1548, name: '类目5'},
                {value: 1332, name: '类目6'}
            ]
        }
    ]
};

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

五、总结

通过本文的介绍，相信您已经对ECharts图表制作有了初步的了解。在实际应用中，您可以结合具体场景选择合适的图表类型，并通过调整配置项来实现更加丰富的视觉效果。多加练习，相信您会成为一名ECharts图表制作高手。

-- 展开阅读全文 --