新手必看！Echarts图表制作视频教程，快速入门学图表制作

了解Echarts

Echarts是一款基于JavaScript的图表库，它可以帮助开发者轻松地创建丰富的图表，适用于数据可视化展示。无论是数据分析师、前端开发者还是普通用户，Echarts都能满足你对图表制作的需求。

视频教程概览

本视频教程将从零开始，逐步带你掌握Echarts图表制作。以下是教程的主要内容：

1. Echarts简介与安装
2. 基础图表制作
   • 柱状图、折线图、饼图等
3. 高级图表制作
   • 地图、雷达图、散点图等
4. 交互式图表
   • 数据筛选、钻取、缩放等
5. Echarts与Vue、React等框架结合
6. 实战案例

第一部分：Echarts简介与安装

Echarts简介

Echarts是一款功能强大的图表库，支持多种图表类型，如柱状图、折线图、饼图、地图等。它具有以下特点：

• 丰富的图表类型：满足不同场景下的可视化需求
• 高性能渲染：支持大数据量的渲染
• 高度可定制：通过配置项实现个性化图表
• 易于使用：简单易学的API和丰富的示例

安装Echarts

要使用Echarts，首先需要将其引入到项目中。以下是几种常见的引入方式：

1. 通过CDN引入

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>

2. 通过npm安装

npm install echarts --save

3. 通过yarn安装

yarn add echarts

第二部分：基础图表制作

柱状图

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

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '柱状图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

折线图

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

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '折线图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

饼图

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

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '饼图示例'
    },
    tooltip: {},
    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);

第三部分：高级图表制作

地图

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

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
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: {
                show: false
            },
            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);

雷达图

雷达图用于展示多维度数据的对比。以下是一个简单的雷达图示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '雷达图示例'
    },
    tooltip: {},
    legend: {
        orient: 'vertical',
        data:['预算分配（Allocated Budget）','实际开销（Actual Spending）']
    },
    radar: {
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        indicator: [
            { name: '销售（sales）', max: 6500},
            { name: '管理（admin）', max: 16000},
            { name: '信息技术（IT）', max: 30000},
            { name: '客服（customer servie）', max: 38000},
            { name: '研发（R&D）', max: 52000},
            { name: '市场（marketing）', max: 25000}
        ]
    },
    series: [{
        name: '预算 vs 开销',
        type: 'radar',
        data : [
            {
                value : [4200, 3000, 20000, 35000, 50000, 18000],
                name : '预算分配（Allocated Budget）'
            },
            {
                value : [5000, 14000, 28000, 26000, 42000, 21000],
                name : '实际开销（Actual Spending）'
            }
        ]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

散点图

散点图用于展示两个变量之间的关系。以下是一个简单的散点图示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '散点图示例'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['销量']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'scatter',
        data: [
            [10.0, 8.04],
            [8.07, 6.95],
            [13.0, 7.58],
            [9.05, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.93, 6.58],
            [9.41, 7.01],
            [10.34, 6.40],
            [13.2, 7.99],
            [9.03, 6.85],
            [11.1, 6.48],
            [8.84, 7.34],
            [12.27, 7.01],
            [13.26, 6.74],
            [7.67, 3.50],
            [3.1, 5.68],
            [2.67, 3.78],
            [1.53, 3.06],
            [3.2, 5.24],
            [2.02, 4.22],
            [5.2, 2.02],
            [2.02, 1.05],
            [3.2, 4.68],
            [2.7, 3.65]
        ],
        markPoint: {
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
            ]
        },
        markLine: {
            data: [
                {type: 'average', name: '平均值'}
            ]
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

第四部分：交互式图表

数据筛选

交互式图表允许用户通过筛选数据来查看不同维度的信息。以下是一个简单的数据筛选示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '数据筛选示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 数据筛选函数
function filterData(name) {
    var series = myChart.getOption().series[0].data;
    var filteredData = series.filter(function (item) {
        return item.name === name;
    });
    myChart.setOption({
        series: [{
            data: filteredData
        }]
    });
}

// 监听点击事件
myChart.on('click', function (params) {
    filterData(params.name);
});

钻取

交互式图表还支持钻取功能，用户可以通过点击图表中的元素来查看更详细的数据。以下是一个简单的钻取示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '钻取示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 钻取函数
function drillDown(name) {
    var detailData = {
        '衬衫': [10, 20, 30],
        '羊毛衫': [20, 30, 40],
        '雪纺衫': [30, 40, 50],
        '裤子': [40, 50, 60],
        '高跟鞋': [50, 60, 70],
        '袜子': [60, 70, 80]
    };
    var detailOption = {
        title: {
            text: '详细数据'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ['1月', '2月', '3月']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: detailData[name]
        }]
    };
    var detailChart = echarts.init(document.getElementById('detail'));
    detailChart.setOption(detailOption);
}

// 监听点击事件
myChart.on('click', function (params) {
    drillDown(params.name);
});

缩放

交互式图表支持缩放功能，用户可以通过拖动图表或使用鼠标滚轮来放大或缩小图表。以下是一个简单的缩放示例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '缩放示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 监听鼠标滚轮事件
myChart.on('mousewheel', function (params) {
    var scale = myChart.getOption().series[0].scale;
    scale *= params.delta > 0 ? 1.1 : 0.9;
    myChart.setOption({
        series: [{
            scale: scale
        }]
    });
});

第五部分：Echarts与Vue、React等框架结合

Echarts可以与多种前端框架结合使用，如Vue、React等。以下是一个简单的Vue示例：

<template>
  <div id="app">
    <echarts :option="option" :style="{ width: '600px', height: '400px' }"></echarts>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      option: {
        title: {
          text: 'Vue与Echarts结合示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
    };
  }
};
</script>

第六部分：实战案例

本部分将介绍一些Echarts在实际项目中的应用案例，如：

• 电商平台销售数据可视化
• 金融数据分析 -