ECharts 完全教程

第一章：ECharts 基础

1.1 ECharts 简介

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上。

练习 1.1：第一个 ECharts 图表

创建一个简单的柱状图：

HTML 结构

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

JavaScript 代码

// 初始化 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);

第二章：常用图表类型

2.1 折线图

折线图用于展示数据随时间或类别的变化趋势。

练习 2.1：折线图示例

折线图配置

var option = {
    title: {
        text: '折线图示例'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
    }]
};

2.2 饼图

饼图用于展示不同类别的数据占比。

练习 2.2：饼图示例

饼图配置

var option = {
    title: {
        text: '饼图示例',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [{
        type: 'pie',
        radius: '50%',
        data: [
            { value: 1048, name: '搜索引擎' },
            { value: 735, name: '直接访问' },
            { value: 580, name: '邮件营销' },
            { value: 484, name: '联盟广告' },
            { value: 300, name: '视频广告' }
        ],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

第三章：高级特性

3.1 数据可视化

ECharts 提供了丰富的数据可视化功能。

练习 3.1：地图可视化

展示一个完整的中国地图，包含数据展示、交互功能和视觉映射。

地图配置

var option = {
    title: {
        text: '中国各省份数据分布',
        subtext: '数据仅供参考',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['数据分布']
    },
    visualMap: {
        min: 0,
        max: 2000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],
        calculable: true,
        inRange: {
            color: ['#e0f3f8', '#4575b4']
        }
    },
    series: [{
        name: '数据分布',
        type: 'map',
        map: 'china',
        roam: true,
        zoom: 1.2,
        label: {
            show: true,
            fontSize: 12
        },
        emphasis: {
            label: {
                show: true,
                fontSize: 14
            }
        },
        data: [
            { name: '北京', value: 2000 },
            { name: '上海', value: 1800 },
            { name: '广东', value: 1600 },
            { name: '江苏', value: 1500 },
            { name: '浙江', value: 1400 },
            { name: '山东', value: 1300 },
            { name: '四川', value: 1200 },
            { name: '湖北', value: 1100 },
            { name: '河南', value: 1000 },
            { name: '福建', value: 900 },
            { name: '湖南', value: 800 },
            { name: '安徽', value: 700 },
            { name: '河北', value: 600 },
            { name: '陕西', value: 500 },
            { name: '江西', value: 400 },
            { name: '重庆', value: 300 },
            { name: '云南', value: 200 },
            { name: '广西', value: 100 },
            { name: '天津', value: 900 },
            { name: '山西', value: 600 },
            { name: '内蒙古', value: 400 },
            { name: '辽宁', value: 800 },
            { name: '吉林', value: 500 },
            { name: '黑龙江', value: 600 },
            { name: '海南', value: 300 },
            { name: '贵州', value: 400 },
            { name: '西藏', value: 200 },
            { name: '甘肃', value: 300 },
            { name: '青海', value: 200 },
            { name: '宁夏', value: 200 },
            { name: '新疆', value: 300 }
        ]
    }]
};