教程

掌握echarts图表，从入门到精通：全面教程与实例解析

2026-10-23 0 阅读

ECharts简介

ECharts是一个使用JavaScript实现的开源可视化库，它提供了一系列丰富的图表类型，包括折线图、柱状图、饼图、地图等，可以用于数据可视化展示。ECharts因其高性能、易用性和丰富的功能，被广泛应用于Web开发中。

第一章：ECharts基础入门

1.1 ECharts简介

ECharts是百度开源的一个使用JavaScript实现的数据可视化库，具有以下特点：

  • 高性能：ECharts使用了Canvas和SVG两种图形技术，可以高效渲染图表。
  • 易用性：ECharts提供了丰富的图表类型和配置项，易于上手。
  • 丰富的图表类型：支持折线图、柱状图、饼图、地图等多种图表类型。

1.2 ECharts安装与配置

  1. 安装：可以通过CDN链接直接在HTML文件中引入ECharts。
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  1. 配置：在HTML文件中创建一个用于展示图表的DOM元素，并为其添加echarts属性。
<div id="main" style="width: 600px;height:400px;"></div>

1.3 初始化ECharts实例

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

1.4 设置图表配置项和系列

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 折线图

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

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 柱状图

柱状图用于展示不同类别数据的比较。以下是一个简单的柱状图示例：

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 饼图

饼图用于展示各个部分占整体的比例。以下是一个简单的饼图示例：

var option = {
    title: {
        text: '饼图示例'
    },
    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);

2.4 地图

地图用于展示地理位置相关的数据。以下是一个简单的地图示例：

var option = {
    title: {
        text: '地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '销量',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            normal: {
                show: true
            },
            emphasis: {
                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)},
            {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)},
            {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)},
            {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)},
            {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)},
            {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)},
            {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)}
        ]
    }]
};
myChart.setOption(option);

第三章：ECharts进阶使用

3.1 动态数据加载

ECharts支持动态加载数据，可以通过Ajax等异步请求获取数据并更新图表。

// 动态加载数据
function fetchData() {
    $.ajax({
        url: 'data.json',
        type: 'get',
        success: function(data) {
            // 更新图表数据
            myChart.setOption({
                series: [{
                    data: data
                }]
            });
        },
        error: function() {
            console.log('数据加载失败');
        }
    });
}
fetchData();

3.2 图表交互

ECharts提供了丰富的交互功能，例如点击事件、鼠标悬停提示等。

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

3.3 主题和样式

ECharts支持自定义主题和样式，可以满足不同场景的需求。

// 自定义主题
var theme = {
    color: ['#3398DB','#FFD700','#FF4500','#00CED1','#1E90FF','#32CD32']
};
echarts.registerTheme('myTheme', theme);
// 设置主题
myChart.setOption({
    theme: 'myTheme'
});

第四章：ECharts应用实例

4.1 产品销量分析

使用ECharts制作产品销量分析图表，可以直观地展示不同产品的销售情况。

// 假设获取到的数据如下
var data = [
    {name: '产品A', value: 100},
    {name: '产品B', value: 150},
    {name: '产品C', value: 200},
    {name: '产品D', value: 250},
    {name: '产品E', value: 300}
];

// 配置图表
var option = {
    title: {
        text: '产品销量分析'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ['产品A','产品B','产品C','产品D','产品E']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: data
    }]
};
myChart.setOption(option);

4.2 用户活跃度分析

使用ECharts制作用户活跃度分析图表，可以了解用户在不同时间段的活动情况。

// 假设获取到的数据如下
var data = [
    {name: '00:00-01:00', value: 50},
    {name: '01:00-02:00', value: 80},
    {name: '02:00-03:00', value: 120},
    {name: '03:00-04:00', value: 160},
    {name: '04:00-05:00', value: 200},
    {name: '05:00-06:00', value: 180},
    {name: '06:00-07:00', value: 150},
    {name: '07:00-08:00', value: 100},
    {name: '08:00-09:00', value: 80},
    {name: '09:00-10:00', value: 60},
    {name: '10:00-11:00', value: 50},
    {name: '11:00-12:00', value: 40},
    {name: '12:00-13:00', value: 30},
    {name: '13:00-14:00', value: 20},
    {name: '14:00-15:00', value: 10},
    {name: '15:00-16:00', value: 5},
    {name: '16:00-17:00', value: 0},
    {name: '17:00-18:00', value: 0},
    {name: '18:00-19:00', value: 0},
    {name: '19:00-20:00', value: 0},
    {name: '20:00-21:00', value: 0},
    {name: '21:00-22:00', value: 0},
    {name: '22:00-23:00', value: 0},
    {name: '23:00-00:00', value: 0}
];

// 配置图表
var option = {
    title: {
        text: '用户活跃度分析'
    },
    tooltip: {},
    legend: {
        data:['活跃度']
    },
    xAxis: {
        data: data.map(function (item) {
            return item.name;
        })
    },
    yAxis: {},
    series: [{
        name: '活跃度',
        type: 'line',
        data: data.map(function (item) {
            return item.value;
        })
    }]
};
myChart.setOption(option);

第五章：ECharts总结

ECharts是一款功能强大、易于使用的可视化库，可以帮助开发者快速将数据可视化。通过本章的学习，读者应该掌握了ECharts的基本用法、常用图表类型、进阶使用技巧以及应用实例。在实际开发中，可以根据具体需求选择合适的图表类型和配置项，将数据可视化得更加美观和实用。

希望这份教程能帮助你从入门到精通ECharts图表！

分享到：
上一篇 牧马人汽车外壳拆卸与安装详细教程，轻松掌握DIY技巧
下一篇 Android手机蓝牙连接全攻略：新手教程+实战案例，轻松掌握蓝牙开发技巧

相关文章

牧马人汽车外壳拆卸与安装详细教程，轻松掌握DIY技巧
2026-10-23
教你轻松上手，牧马人原车支臂安装全攻略，一步到位！
2026-10-23
Android手机蓝牙连接全攻略：新手教程+实战案例，轻松掌握蓝牙开发技巧
2026-10-23
新手必学！轻松掌握echarts雷达图制作技巧，数据可视化不再难
2026-10-23