学会echarts图表制作：从入门到精通，打造个性化数据可视化作品

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括折线图、柱状图、饼图、散点图、地图等，可以轻松实现数据可视化。学会 ECharts 图表制作，不仅可以让你更好地理解数据，还能打造出个性化的数据可视化作品。下面，我们就从入门到精通，一步步学习 ECharts 图表制作。

一、ECharts 入门

1.1 ECharts 简介

ECharts 是一个使用 JavaScript 实现的开源可视化库，它具有以下特点：

丰富的图表类型：提供多种图表类型，满足不同场景的需求。
高度可定制：支持自定义图表样式、配置项等。
跨平台：支持多种浏览器和操作系统。
易于上手：简单易用的 API 和丰富的文档。

1.2 ECharts 安装

ECharts 支持多种安装方式，以下列举两种常见方式：

1.2.1 通过 CDN 引入

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

1.2.2 通过 npm 安装

npm install echarts --save

1.3 ECharts 基本用法

在 HTML 页面中引入 ECharts 库后，可以使用以下代码创建一个基本的图表：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="main" style="height: 100%"></div>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript">
        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);
    </script>
</body>
</html>

二、ECharts 图表类型

ECharts 提供了多种图表类型，以下列举几种常见的图表类型及其特点：

2.1 折线图

折线图适用于展示数据随时间变化的趋势。以下是一个简单的折线图示例：

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

2.2 柱状图

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

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

2.3 饼图

饼图适用于展示各个部分在整体中的占比。以下是一个简单的饼图示例：

var option = {
    title: {
        text: '饼图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    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)'
            }
        }
    }]
};

2.4 散点图

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

var option = {
    title: {
        text: '散点图示例'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['销量']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'scatter',
        data: [
            [10, 20],
            [20, 30],
            [30, 40],
            [40, 50],
            [50, 60]
        ]
    }]
};

2.5 地图

地图适用于展示地理空间数据。以下是一个简单的地图示例：

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: true
        },
        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)}
        ]
    }]
};

三、ECharts 高级应用

3.1 动画效果

ECharts 支持丰富的动画效果，以下是一个简单的动画效果示例：

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

3.2 交互效果

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.on('click', function (params) {
    alert(params.name + ' 的销量为：' + params.value);
});

myChart.setOption(option);

3.3 数据动态更新

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]
    }]
};

// 动态更新数据
setInterval(function () {
    var data = [];
    for (var i = 0; i < 6; i++) {
        data.push(Math.round(Math.random() * 100));
    }
    myChart.setOption({
        series: [{
            data: data
        }]
    });
}, 1000);

myChart.setOption(option);

四、ECharts 个性化定制

4.1 主题样式

ECharts 支持自定义主题样式，以下是一个简单的主题样式示例：

var myChart = echarts.init(document.getElementById('main'));
var option = {
    title: {
        text: '主题样式示例',
        textStyle: {
            color: '#ff7f50'
        }
    },
    tooltip: {},
    legend: {
        data:['销量'],
        textStyle: {
            color: '#87cefa'
        }
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
        axisLabel: {
            color: '#6495ed'
        }
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        itemStyle: {
            color: '#32cd32'
        }
    }]
};

myChart.setOption(option);

4.2 自定义图标

ECharts 支持自定义图标，以下是一个简单的自定义图标示例：

var myChart = echarts.init(document.getElementById('main'));
var option = {
    title: {
        text: '自定义图标示例',
        subtext: '自定义图标',
        left: 'center'
    },
    tooltip: {},
    legend: {
        data:['销量'],
        orient: 'vertical',
        left: 'left'
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        symbolSize: 20,
        symbol: 'path://M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0-14 0z',
        itemStyle: {
            color: '#ff7f50'
        }
    }]
};

myChart.setOption(option);

五、总结

通过本文的学习，相信你已经对 ECharts 图表制作有了初步的了解。从入门到精通，你需要不断实践和探索。ECharts 作为一款优秀的可视化库，可以帮助你轻松实现数据可视化，打造出个性化的数据可视化作品。希望本文能对你有所帮助！

正文

学会echarts图表制作：从入门到精通，打造个性化数据可视化作品

一、ECharts 入门

1.1 ECharts 简介

1.2 ECharts 安装

1.2.1 通过 CDN 引入

1.2.2 通过 npm 安装

1.3 ECharts 基本用法

二、ECharts 图表类型

2.1 折线图

2.2 柱状图

2.3 饼图

2.4 散点图

2.5 地图

三、ECharts 高级应用

3.1 动画效果

3.2 交互效果

3.3 数据动态更新

四、ECharts 个性化定制

4.1 主题样式

4.2 自定义图标

五、总结

相关阅读

办公神器钉钉文档突然变空白？原因排查与解决指南

钉钉圈子轻松添加文档：只需三步，共享高效办公！

手机钉钉图片轻松转文档，只需几步轻松保存！

钉钉团队文档复制技巧，轻松掌握高效协作必备技能

手机钉钉最多能存多少文档？揭秘容量极限与文件管理技巧

掌握almaLinux，开发者必备：全面解析官方文档，轻松上手实践指南

markdown助你轻松编写文档，轻松实现排版与内容分离！

轻松上手，高效协作：全面解析Markdown在线文档编辑工具使用攻略

掌握Markdown文档格式规范：轻松排版高效写作

掌握Java编写App接口文档：步骤详解，让API更清晰易懂