手把手教你玩转ECharts：从零开始的数据可视化实战教程

编程随想▿

于 2025-06-27 16:15:52 发布

阅读量562

点赞数 10

CC 4.0 BY-SA版权

分类专栏： ECharts 文章标签：信息可视化 echarts 前端 javascript

本文链接：https://blog.csdn.net/2301_81137804/article/details/148955330

ECharts 专栏收录该内容

1 篇文章

订阅专栏

一、ECharts简介：数据可视化的利器

ECharts是由百度开源的一款基于JavaScript的数据可视化库，它能够帮助你轻松创建：

20+ 种图表类型（折线/柱状/饼图/散点图等）
10+ 种地图可视化方案
流畅的动画效果和交互体验
响应式设计适配多终端

二、快速上手：5分钟创建第一个图表

1. 环境搭建

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts入门</title>
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 图表容器 -->
    <div id="chart" style="width:600px;height:400px;"></div>
    
    <script>
        // 初始化实例
        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom);
    </script>
</body>
</html>

2. 基础柱状图配置

// 配置项
const option = {
    title: {
        text: '2025年产品销售统计',
        subtext: '数据来源：公司财报'
    },
    tooltip: {},  // 提示框组件
    legend: {
        data: ['销量']
    },
    xAxis: {
        data: ['手机', '笔记本', '平板', '耳机', '智能手表']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',  // 柱状图类型
        data: [12500, 8600, 7200, 15600, 9300]
    }]
};

// 应用配置
myChart.setOption(option);

三、核心配置详解：打造专业级图表

1. 图表组成结构

2. 常用配置项说明

const advancedOption = {
    // 1. 标题配置
    title: {
        text: '高级图表示例',
        link: 'https://echarts.apache.org',
        textStyle: { color: '#235' }
    },
    
    // 2. 工具栏（保存图片/数据视图等）
    toolbox: {
        feature: {
            saveAsImage: {},  // 保存为图片
            dataView: {},     // 数据视图
            restore: {}       // 重置
        }
    },
    
    // 3. 数据缩放（适用于大数据集）
    dataZoom: [{
        type: 'slider',
        start: 0,
        end: 50
    }],
    
    // 4. 视觉映射（颜色渐变）
    visualMap: {
        min: 0,
        max: 20000,
        calculable: true,
        orient: 'horizontal',
        left: 'center'
    }
};

四、实战案例：销售数据分析仪表板

// 组合图表配置
const dashboardOption = {
    tooltip: { trigger: 'axis' },
    legend: { data: ['销售额', '成本', '利润'] },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: { type: 'value' },
    series: [
        {
            name: '销售额',
            type: 'line',
            smooth: true,
            data: [120, 182, 191, 234, 290, 330]
        },
        {
            name: '成本',
            type: 'bar',
            data: [85, 110, 105, 147, 180, 200]
        },
        {
            name: '利润',
            type: 'scatter',
            symbolSize: (val) => val[1]/5,
            data: [[0,35], [1,72], [2,86], [3,87], [4,110], [5,130]]
        }
    ]
};

五、高级技巧：让图表更出彩

异步数据加载

// 使用axios获取远程数据
axios.get('/api/sales-data').then(response => {
    myChart.setOption({
        dataset: {
            source: response.data
        },
        series: [{ type: 'bar' }]
    });
});

事件交互处理

// 点击图表事件
myChart.on('click', (params) => {
    alert(`点击了${params.name}，数值：${params.value}`);
});

// 鼠标悬停事件
myChart.on('mouseover', (params) => {
    console.log('鼠标悬停：', params);
});

响应式适配

// 窗口大小变化时重绘图表
window.addEventListener('resize', () => myChart.resize());

结语：开启你的可视化之旅

ECharts的强大远不止于此，你还可以：

集成GIS地理数据
创建3D可视化效果
结合WebGL实现大规模数据渲染

数据可视化不是目的，而是理解世界的透镜。掌握ECharts，让数据讲述动人故事！