新手必看！echarts图表制作入门教程及实战案例大全

一、echarts简介

ECharts是由百度团队开发的一个使用JavaScript实现的开源可视化库，它可以在网页中绘制各种图表，如柱状图、折线图、饼图等。ECharts具有丰富的图表类型、高度可定制和跨平台等优点，是目前非常流行的前端可视化解决方案之一。

二、echarts的基本使用

2.1 引入ECharts库

首先，需要在HTML页面中引入ECharts库。可以通过以下两种方式引入：

<!-- 引入ECharts主模块 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>

或者

<!-- 引入ECharts主模块和图表类型模块 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/extension/dataTool.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/extension/map.min.js"></script>

2.2 创建图表实例

在HTML页面中，可以使用<div>标签创建一个用于放置图表的容器，并为该容器指定一个ID，例如myChart。

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

然后，使用ECharts提供的echarts.init方法初始化一个图表实例，并将其挂载到之前创建的容器上。

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

2.3 配置图表

初始化图表实例后，可以使用setOption方法配置图表的各项属性。以下是一个简单的折线图配置示例：

myChart.setOption({
    title: {
        text: '折线图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

三、echarts图表类型

ECharts提供了丰富的图表类型，以下列举一些常见的图表类型及其特点：

3.1 柱状图

柱状图适用于展示数据之间的比较，可以垂直或水平排列。例如：

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

3.2 折线图

折线图适用于展示数据随时间或其他连续变量的变化趋势。例如：

myChart.setOption({
    title: {
        text: '折线图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        type: 'category',
        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20, 25, 30, 26, 29, 22, 15]
    }]
});

3.3 饼图

饼图适用于展示数据占比情况。例如：

myChart.setOption({
    title: {
        text: '饼图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    series: [{
        name: '访问来源',
        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)'
            }
        }
    }]
});

四、echarts实战案例

以下是一些echarts的实战案例，供您参考：

4.1 热力图

使用echarts绘制一个表示地理位置数据的热力图。

var myChart = echarts.init(document.getElementById('myChart'));
var geoCoordMap = {
    '海门': [121.15, 31.89],
    // ... 其他城市坐标
};
var data = [
    // ... 每个城市的数据
];
var convertData = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem.name];
        var toCoord = geoCoordMap[dataItem.value.name];
        if (fromCoord && toCoord) {
            res.push({
                fromName: dataItem.name,
                toName: dataItem.value.name,
                coords: [fromCoord, toCoord],
                value: dataItem.value.value
            });
        }
    }
    return res;
};
var series = [
    {
        name: '北京',
        type: 'lines',
        coordinateSystem: 'geo',
        data: convertData(data),
        lineStyle: {
            curveness: 0.2
        },
        effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: '#fff',
            symbolSize: 3
        },
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            emphasis: {
                show: true
            }
        },
        tooltip: {
            show: false
        }
    },
    {
        name: '北京',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: data.map(function (dataItem) {
            return {
                name: dataItem.name,
                value: geoCoordMap[dataItem.name].concat([dataItem.value.value])
            };
        }),
        rippleEffect: {
            brushType: 'stroke'
        },
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: true
            },
            emphasis: {
                show: true
            }
        },
        symbolSize: function (val) {
            return val[2] / 10;
        },
        showEffectOn: 'render',
        hoverAnimation: true,
        textStyle: {
            color: '#fff',
            fontSize: 14,
            fontStyle: 'bold'
        }
    }
];
myChart.setOption({
    title: {
        text: '全国主要城市数据热力图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['北京']
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: series
});

4.2 地图散点图

使用echarts绘制一个表示地理位置数据的散点图。

var myChart = echarts.init(document.getElementById('myChart'));
var geoCoordMap = {
    '海门': [121.15, 31.89],
    // ... 其他城市坐标
};
var data = [
    // ... 每个城市的数据
];
var series = [
    {
        name: '北京',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        data: data
    }
];
myChart.setOption({
    title: {
        text: '全国主要城市数据散点图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['北京']
    },
    geo: {
        map: 'china',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: series
});

4.3 雷达图

使用echarts绘制一个雷达图，用于展示多个维度的数据对比。

var myChart = echarts.init(document.getElementById('myChart'));
var option = {
    title: {
        text: '雷达图示例'
    },
    tooltip: {},
    legend: {
        data: ['预算分配（Allocated Budget）', '实际花费（Actual Spending）']
    },
    radar: {
        indicator: [
            { name: '销售（sales）', max: 6500},
            { name: '管理（Administration）', max: 16000},
            { name: '信息技术（Information Technology）', max: 30000},
            { name: '客服（Customer Support）', max: 38000},
            { name: '研发（R&D）', max: 52000}
        ]
    },
    series: [{
        name: '预算 vs 实际',
        type: 'radar',
        data : [
            {
                value : [4200, 3000, 20000, 35000, 50000],
                name : '预算分配（Allocated Budget）'
            },
            {
                value : [5000, 14000, 28000, 26000, 42000],
                name : '实际花费（Actual Spending）'
            }
        ]
    }]
};
myChart.setOption(option);

五、echarts进阶技巧

5.1 动画效果

ECharts支持丰富的动画效果，包括渐变、放大、旋转等。以下是一个使用渐变动画的示例：

var myChart = echarts.init(document.getElementById('myChart'));
var option = {
    title: {
        text: '动画效果示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20],
        animationDelay: function (idx) {
            return idx * 100;
        }
    }]
};
myChart.setOption(option);

5.2 数据动态更新

ECharts支持动态更新图表数据，可以通过以下方式实现：

myChart.setOption({
    series: [{
        data: [1, 2, 3]
    }]
});

5.3 高级定制

ECharts提供了丰富的配置项，可以实现对图表的个性化定制。以下是一些常用的配置项：

title: 图表标题
tooltip: 鼠标悬停提示框
legend: 图例
xAxis 和 yAxis: 坐标轴
series: 图表系列，如折线图、柱状图等
grid: 布局区域

六、echarts学习资源

以下是一些echarts的学习资源，供您参考：

ECharts官方文档：https://echarts.apache.org/zh/index.html
ECharts教程：https://www.echartsjs.com/zh/tutorial.html
ECharts社区：https://github.com/ecomfe/echarts

通过以上教程，相信您已经对echarts有了初步的了解。在实际应用中，您可以根据自己的需求进行深入学习，不断丰富和完善自己的图表制作技能。祝您学习愉快！