一、概述

        ECharts 是一个由百度团队开发的基于 JavaScript 的开源可视化图表库，提供了丰富的图表类型和交互功能，适用于 Web 端和移动端的可视化展示，能够轻松实现各种数据可视化需求。

        官方链接：Apache ECharts https://echarts.apache.org/

二、核心特性

1、丰富的图表类型

• 常规图表：折线图、柱状图、饼图、散点图、K线图等

• 地理图表：地图、热力图、航线图等

• 关系图表：关系图、桑基图、树图等

• 3D图表：3D柱状图、3D散点图、3D曲面图等

• 其他特殊图表：仪表盘、漏斗图、雷达图等

2、强大的交互功能

• 数据缩放、漫游

• 值域漫游

• 数据区域选择

• 图例开关

• 动态类型切换

• 数据刷选

3、多设备适配

• 响应式设计

• 移动端优化

• 自动识别设备类型调整展示效果

三、ECharts 配置项

        ECharts通过配置项（option）来定义图表的各种属性和行为。

1、基本结构

option = {
    // 标题组件
    title: {...},
    
    // 图例组件
    legend: {...},
    
    // 直角坐标系内绘图网格
    grid: {...},
    
    // x轴配置
    xAxis: {...},
    
    // y轴配置
    yAxis: {...},
    
    // 极坐标系配置
    polar: {...},
    
    // 半径轴
    radiusAxis: {...},
    
    // 角度轴
    angleAxis: {...},
    
    // 雷达图坐标系
    radar: {...},
    
    // 数据缩放组件
    dataZoom: [...],
    
    // 视觉映射组件
    visualMap: [...],
    
    // 工具栏
    toolbox: {...},
    
    // 提示框组件
    tooltip: {...},
    
    // 坐标系配置
    axisPointer: {...},
    
    // 系列列表
    series: [...],
    
    // 颜色列表
    color: [...],
    
    // 背景色
    backgroundColor: 'transparent',
    
    // 动画配置
    animation: true,
    animationDuration: 1000,
    animationEasing: 'cubicOut'
};

2、核心结构

（1）标题组件（title）

title: {
    text: '销售数据统计',  // 主标题文本
    subtext: '2023年度',  // 副标题文本
    left: 'center',      // 水平安放位置
    top: 0,              // 垂直安放位置
    textStyle: {         // 标题文本样式
        color: '#333',
        fontSize: 18,
        fontWeight: 'bold'
    },
    subtextStyle: {      // 副标题文本样式
        color: '#666',
        fontSize: 12
    }
}

（2）图例组件（legend）

legend: {
    type: 'plain',       // 图例类型，可选'plain'(普通)和'scroll'(可滚动)
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], // 图例数据数组
    orient: 'horizontal', // 布局方向，'horizontal'或'vertical'
    left: 'center',      // 距离左侧距离
    top: 'bottom',       // 距离顶部距离
    itemWidth: 25,       // 图例标记的图形宽度
    itemHeight: 14,      // 图例标记的图形高度
    textStyle: {         // 图例文字的样式
        color: '#333'
    }
}

（3）坐标轴配置（xAxis/yAxis）

xAxis: {
    type: 'category',    // 坐标轴类型，'category'类目轴，'value'数值轴
    data: ['1月', '2月', '3月', '4月', '5月', '6月'], // 类目数据
    axisLine: {          // 坐标轴轴线相关设置
        lineStyle: {
            color: '#999'
        }
    },
    axisLabel: {         // 坐标轴刻度标签的相关设置
        interval: 0,     // 坐标轴刻度标签的显示间隔
        rotate: 45       // 刻度标签旋转的角度
    },
    axisTick: {          // 坐标轴刻度相关设置
        alignWithLabel: true // 类目轴中在 boundaryGap 为 true 时有效
    },
    splitLine: {         // 坐标轴在 grid 区域中的分隔线
        show: false      // 是否显示分隔线
    }
},

yAxis: {
    type: 'value',       // 数值轴
    min: 0,              // 坐标轴最小值
    max: 100,            // 坐标轴最大值
    splitNumber: 5,      // 坐标轴的分割段数
    axisLine: {
        show: true
    },
    axisLabel: {
        formatter: '{value}%' // 标签内容格式器
    },
    splitLine: {
        lineStyle: {
            type: 'dashed' // 分隔线样式
        }
    }
}

（4）数据系列（series）

series: [
    {
        name: '销量',      // 系列名称
        type: 'bar',      // 图表类型：line(折线图)、bar(柱状图)、pie(饼图)等
        data: [5, 20, 36, 10, 10, 20], // 数据数组
        itemStyle: {       // 图形样式
            color: '#4ad2ff',
            borderColor: '#008acd',
            borderWidth: 1
        },
        label: {           // 图形上的文本标签
            show: true,
            position: 'top'
        },
        barWidth: '40%',   // 柱条宽度
        barGap: '30%',     // 不同系列的柱间距离
        markPoint: {       // 标注点
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
            ]
        },
        markLine: {        // 标线
            data: [
                {type: 'average', name: '平均值'}
            ]
        }
    },
    {
        name: '增长率',
        type: 'line',
        data: [2.1, 4.2, 6.3, 8.4, 10.5, 12.6],
        smooth: true,      // 是否平滑曲线显示
        symbol: 'circle',  // 标记的图形
        symbolSize: 8,     // 标记的大小
        lineStyle: {
            width: 3,
            color: '#ff8f00'
        },
        areaStyle: {       // 区域填充样式
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: 'rgba(255, 143, 0, 0.5)'},
                {offset: 1, color: 'rgba(255, 143, 0, 0)'}
            ])
        }
    }
]

（5）提示框组件（tooltip）

tooltip: {
    trigger: 'axis',      // 触发类型，'item'(数据项图形触发)、'axis'(坐标轴触发)
    axisPointer: {        // 坐标轴指示器配置
        type: 'shadow',   // 指示器类型，'line'(直线)、'shadow'(阴影)、'none'(无)
        shadowStyle: {
            color: 'rgba(150,150,150,0.1)'
        }
    },
    backgroundColor: 'rgba(50,50,50,0.7)', // 背景颜色
    borderColor: '#333',  // 边框颜色
    borderWidth: 0,       // 边框线宽
    padding: 10,         // 内边距
    textStyle: {         // 文本样式
        color: '#fff',
        fontSize: 12
    },
    formatter: function(params) { // 提示框内容格式器
        let result = params[0].name + '<br/>';
        params.forEach(function(item) {
            result += item.marker + ' ' + item.seriesName + ': ' + item.value;
            if (item.seriesName === '增长率') {
                result += '%';
            }
            result += '<br/>';
        });
        return result;
    }
}

（6）工具箱（toolbox）

toolbox: {
    feature: {            // 各工具配置项
        saveAsImage: {    // 保存为图片
            type: 'png',
            name: '销售统计图',
            backgroundColor: '#fff'
        },
        restore: {},      // 配置项还原
        dataView: {       // 数据视图工具
            readOnly: false,
            optionToContent: function(opt) {
                let axisData = opt.xAxis[0].data;
                let series = opt.series;
                let table = '<table style="width:100%; text-align:center"><tbody><tr><td>月份</td>';
                
                series.forEach(function(item) {
                    table += '<td>' + item.name + '</td>';
                });
                table += '</tr>';
                
                for (let i = 0; i < axisData.length; i++) {
                    table += '<tr><td>' + axisData[i] + '</td>';
                    series.forEach(function(item) {
                        table += '<td>' + item.data[i] + '</td>';
                    });
                    table += '</tr>';
                }
                
                table += '</tbody></table>';
                return table;
            }
        },
        magicType: {      // 动态类型切换
            type: ['line', 'bar', 'stack']
        },
        brush: {          // 区域选择组件
            type: ['rect', 'polygon', 'keep', 'clear']
        }
    }
}

（7）视觉映射（visualMap）

visualMap: {
    type: 'continuous',  // 连续型视觉映射组件
    min: 0,              // 指定 visualMap 组件的允许的最小值
    max: 100,            // 指定 visualMap 组件的允许的最大值
    text: ['高', '低'],   // 两端的文本
    inRange: {           // 定义在选中范围内时的视觉元素
        color: ['#50a3ba', '#eac736', '#d94e5d'] // 颜色映射
    },
    calculable: true,    // 是否显示拖拽用的手柄
    orient: 'horizontal', // 布局方式
    left: 'center',      // 组件离容器左侧的距离
    bottom: 20           // 组件离容器下侧的距离
}

（8）数据区域缩放（dataZoom）

dataZoom: [
    {
        type: 'slider',  // 滑动条型数据区域缩放组件
        show: true,      // 是否显示组件
        xAxisIndex: 0,   // 控制的x轴索引
        start: 0,       // 数据窗口范围的起始百分比
        end: 50,        // 数据窗口范围的结束百分比
        handleSize: 8   // 控制手柄的尺寸
    },
    {
        type: 'inside',  // 内置型数据区域缩放组件
        xAxisIndex: 0,
        start: 0,
        end: 100
    }
]

3、高级配置技巧

（1） 主题设置

        ECharts 内置了多种主题，也可以通过 echarts.registerTheme() 注册自定义主题。

// 使用内置主题
var chart = echarts.init(dom, 'dark');

// 自定义主题
echarts.registerTheme('my_theme', {
    color: ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'],
    backgroundColor: '#eee',
    textStyle: {},
    title: {
        textStyle: {
            color: '#333'
        }
    }
    // 其他样式配置...
});

（2）响应式布局

        ECharts 提供了 resize() 方法来响应容器尺寸变化。

window.addEventListener('resize', function() {
    myChart.resize();
});

（3）异步数据加载

myChart.showLoading();  // 显示加载动画
$.get('data.json').done(function(data) {
    myChart.setOption({
        series: [{
            data: data
        }]
    });
    myChart.hideLoading();  // 隐藏加载动画
});