入门

Echarts入门必备：从零基础到精通，学会可视化数据图表制作

2026-09-19 0 阅读

Echarts 是一款使用 JavaScript 实现的开源可视化库，它能够帮助开发者轻松地将数据转换成图表，广泛应用于各种数据可视化场景。无论是企业报告、数据分析，还是网站和移动应用，Echarts 都能提供强大的支持。本文将带你从零基础开始，逐步深入，最终达到精通 Echarts 可视化数据图表制作。

第一部分：Echarts 基础入门

1.1 Echarts 简介

Echarts 是由百度团队开发的一款可视化库，它具有以下特点：

  • 高性能：Echarts 采用 Canvas 渲染，能够高效地处理大量数据。
  • 易用性：Echarts 提供丰富的图表类型和配置项，让开发者能够快速上手。
  • 定制化：Echarts 支持自定义图表样式和交互效果，满足个性化需求。

1.2 Echarts 安装与配置

要使用 Echarts，首先需要将其引入到项目中。以下是两种常见的引入方式：

方式一：通过 CDN 引入

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

方式二：通过 npm 安装

npm install echarts

引入 Echarts 后，需要在 HTML 中创建一个用于渲染图表的容器：

<div id="main" style="width: 600px;height:400px;"></div>

1.3 Echarts 基础配置

在 Echarts 中，图表的配置主要包括以下几个部分：

  • 标题（title）：设置图表标题。
  • 工具箱（toolbox）：提供一系列图表操作工具，如数据视图、数据导出等。
  • 提示框（tooltip）：显示图表数据信息。
  • 坐标轴（axis）：定义图表的坐标轴。
  • 系列（series）：定义图表的具体数据。

以下是一个简单的柱状图示例：

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

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

myChart.setOption(option);

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

Echarts 提供了丰富的图表类型，包括但不限于以下几种：

  • 柱状图（bar）：用于展示不同类别的数据对比。
  • 折线图（line）：用于展示数据随时间或其他变量的变化趋势。
  • 饼图（pie）：用于展示数据占比。
  • 散点图（scatter）：用于展示两个或多个变量之间的关系。
  • 雷达图（radar）：用于展示多维数据之间的关系。

2.1 柱状图

柱状图是 Echarts 中最常用的图表之一，以下是一个简单的柱状图示例：

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

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

myChart.setOption(option);

2.2 折线图

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

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

var option = {
    title: {
        text: 'Echarts 折线图示例'
    },
    tooltip: {},
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'line',
        data: [10, 20, 30, 40, 50, 60, 70]
    }]
};

myChart.setOption(option);

2.3 饼图

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

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

var option = {
    title: {
        text: 'Echarts 饼图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        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)'
            }
        }
    }]
};

myChart.setOption(option);

第三部分：Echarts 高级应用

3.1 动态数据更新

在实际应用中，数据往往会随时间或其他因素发生变化。Echarts 支持动态更新数据，以下是一个简单的动态数据更新示例：

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

var option = {
    title: {
        text: 'Echarts 动态数据更新示例'
    },
    tooltip: {},
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'line',
        data: [10, 20, 30, 40, 50, 60, 70]
    }]
};

myChart.setOption(option);

// 动态更新数据
setInterval(function () {
    var data = [Math.round(Math.random() * 100)];
    myChart.setOption({
        series: [{
            data: data
        }]
    });
}, 1000);

3.2 交互效果

Echarts 支持丰富的交互效果，如点击、鼠标悬停、拖动等。以下是一个简单的交互效果示例：

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

var option = {
    title: {
        text: 'Echarts 交互效果示例'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['销量']
    },
    xAxis: {
        type: 'category',
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

myChart.setOption(option);

// 点击事件
myChart.on('click', function (params) {
    console.log(params.name + ' 的销量为：' + params.value);
});

第四部分：Echarts 进阶技巧

4.1 自定义图表样式

Echarts 支持自定义图表样式，包括颜色、字体、阴影等。以下是一个简单的自定义样式示例：

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

var option = {
    title: {
        text: 'Echarts 自定义样式示例',
        textStyle: {
            color: '#333',
            fontSize: 18,
            fontWeight: 'bold'
        }
    },
    tooltip: {},
    xAxis: {
        type: 'category',
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        itemStyle: {
            color: '#f00'
        }
    }]
};

myChart.setOption(option);

4.2 高级图表类型

Echarts 还提供了许多高级图表类型，如地图、漏斗图、词云等。以下是一个简单的地图示例：

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

var option = {
    title: {
        text: 'Echarts 地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    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)},
            // ... 其他省份数据
        ]
    }]
};

myChart.setOption(option);

第五部分：Echarts 实战案例

5.1 企业报表

在企业报表中，Echarts 可以用于展示各种图表，如销售数据、市场份额、员工绩效等。以下是一个简单的企业报表示例：

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

var option = {
    title: {
        text: '企业报表示例'
    },
    tooltip: {},
    legend: {
        data: ['销售额', '成本']
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销售额',
        type: 'line',
        data: [100, 150, 200, 250, 300, 350]
    }, {
        name: '成本',
        type: 'line',
        data: [50, 80, 120, 150, 180, 210]
    }]
};

myChart.setOption(option);

5.2 数据可视化网站

数据可视化网站可以展示各种数据图表，如天气、交通、股票等。以下是一个简单的数据可视化网站示例：

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

var option = {
    title: {
        text: '数据可视化网站示例'
    },
    tooltip: {},
    legend: {
        data: ['温度', '湿度']
    },
    xAxis: {
        type: 'category',
        data: ['北京', '上海', '广州', '深圳']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '温度',
        type: 'line',
        data: [20, 25, 30, 35]
    }, {
        name: '湿度',
        type: 'line',
        data: [50, 60, 70, 80]
    }]
};

myChart.setOption(option);

总结

通过本文的学习，相信你已经对 Echarts 可视化数据图表制作有了全面的了解。从基础入门到高级应用，再到实战案例，Echarts 都能为你提供强大的支持。希望你能将所学知识应用到实际项目中，创造出更多精彩的数据可视化作品。

分享到：
上一篇 揭秘：从零开始，轻松掌握风水入门秘诀，避开家居布局误区
下一篇 Java图形界面开发新手必看：轻松入门，掌握界面设计与事件处理技巧

相关文章

揭秘：从零开始，轻松掌握风水入门秘诀，避开家居布局误区
2026-09-19
揭秘：风水入门必知，避免家居装修四大误区
2026-09-19
Java图形界面开发新手必看：轻松入门，掌握界面设计与事件处理技巧
2026-09-19
零基础学C语言：新手必看的学习资料与实战技巧
2026-09-19