正文

新手必看！轻松上手echarts图表制作与实战技巧详解

/0 浏览量
1027

在数字化时代，图表已经成为展示数据、传达信息的重要工具。ECharts 作为一款强大的开源 JavaScript 数据可视化库，凭借其丰富的图表类型、高度可配置的特性，已经成为开发者和设计师们制作数据可视化作品的优选。本文将带你从零开始，深入了解 ECharts 图表制作，并提供实战技巧。

初识 ECharts

什么是 ECharts？

ECharts 是由百度开源的数据可视化库，它能够提供直观、交互丰富、可高度自定义的数据可视化图表。ECharts 支持多种图表类型，如折线图、柱状图、饼图、散点图、地图等，可以满足各种数据展示需求。

ECharts 的特点

  • 丰富的图表类型：支持多种图表类型，满足不同场景的需求。
  • 高度可配置：几乎图表的所有元素都可以进行配置，包括颜色、大小、样式等。
  • 跨平台兼容：可在多种浏览器和平台（如 PC、手机、微信小程序等）上运行。
  • 社区活跃：拥有庞大的社区和丰富的文档，易于学习和使用。

ECharts 基础入门

环境搭建

  1. 引入 ECharts：可以通过 CDN 链接或者下载 ECharts 库引入到项目中。
  2. HTML 结构：创建一个 HTML 页面，并添加一个用于绘制图表的容器元素。
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>

<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/extension/bmap.min.js"></script>

<!-- 初始化图表 -->
<script>
    var myChart = echarts.init(document.getElementById('container'));
</script>
</body>
</html>

初始化图表

使用 ECharts 初始化图表，首先需要定义一个配置对象，该对象包含了图表的类型、数据、样式等信息。

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

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

ECharts 图表类型详解

折线图

折线图主要用于展示数据随时间或其他连续变量的变化趋势。

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

柱状图

柱状图用于比较不同类别的数据，可以展示数量的多少。

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

饼图

饼图用于展示数据占比情况。

var option = {
    title: {
        text: '饼图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    series: [
        {
            name: '商品类别',
            type: 'pie',
            radius: '50%',
            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)'
                }
            }
        }
    ]
};

散点图

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

var option = {
    title: {
        text: '散点图示例'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['销量']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '销量',
            type: 'scatter',
            data: [
                [10, 20],
                [20, 10],
                [30, 30],
                [40, 20],
                [50, 10],
                [60, 20]
            ],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
    ]
};

地图

地图用于展示地理位置分布和数据。

var option = {
    title: {
        text: '地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['北京', '上海', '广州', '深圳', '杭州']
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: true,
            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)},
                {name: '杭州', value: Math.round(Math.random() * 1000)}
            ]
        }
    ]
};

ECharts 实战技巧

1. 使用 ECharts 官方文档

ECharts 官方文档提供了丰富的图表示例和配置选项，是学习和使用 ECharts 的首选资料。

2. 学习 JavaScript 和 HTML

ECharts 是基于 JavaScript 和 HTML 实现的，因此需要掌握这两门基础技能。

3. 选择合适的图表类型

根据实际需求选择合适的图表类型，可以更好地展示数据和信息。

4. 高度自定义

ECharts 提供了丰富的配置选项，可以根据需求进行高度自定义。

5. 性能优化

对于数据量较大的图表，需要进行性能优化，以确保图表的流畅性。

总结

ECharts 是一款功能强大、易于使用的数据可视化库，通过本文的学习，相信你已经对 ECharts 图表制作有了初步的了解。在实际应用中，多加练习和积累经验，相信你会成为一名 ECharts 高手！

-- 展开阅读全文 --