【掌握Echarts图表绘制】从入门到实战案例详解

ECharts是一个利用JavaScript实现的开源可视化库，可能供给丰富的图表范例跟交互功能，帮助开辟者将数据转化为直不雅、可交互的图心情势。本文将具体介绍ECharts的入门知识，并经由过程实战案例来加深懂得。

一、ECharts简介

ECharts供给了多种图表范例，包含但不限于：

基本图表：柱状图、折线图、饼图、散点图等
特别图表：地图、K线图、雷达图等
组合图表：在同一个容器中绘制多个图表

ECharts存在以下特点：

开源收费：Apache License 2.0协定
跨平台：兼容以后绝大年夜部分浏览器
丰富的图表范例：满意差别场景的须要
易于利用：简单易学的API跟文档

二、ECharts入门教程

2.1 官方入门教程

ECharts官网供给了具体的入门教程，包含：

5分钟上手ECharts：疾速懂得ECharts的基本利用方法
官方入门教程：具体讲解ECharts的各个组件跟设置项

2.2 入门步调

下载ECharts：从官网下载ECharts.min.js文件
引入ECharts：在HTML文件中引入ECharts.min.js文件
筹备DOM容器：创建一个存在牢固宽高的DOM容器
初始化ECharts实例：利用echarts.init方法初始化ECharts实例
指定设置项跟数据：根据须要修改设置项跟数据
设置ECharts实例：利用setOption方法设置ECharts实例

以下是一个简单的柱状图示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 入门示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 筹备一个具有大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于筹备好的dom，初始化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);
    </script>
</body>
</html>

三、实战案例

3.1 地图图表

以下是一个利用ECharts绘制地图图表的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 地图图表示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 筹备一个具有大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于筹备好的dom，初始化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]
            }],
            visualMap: {
                min: 0,
                max: 100,
                left: 'left',
                top: 'bottom',
                text: ['高','低'],           // 文本，默许为数值文本
                calculable: true
            },
            geo: {
                map: 'china',
                roam: true,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            }
        };

        // 利用刚指定的设置项跟数据表现图表。
        myChart.setOption(option);
    </script>
</body>
</html>

3.2 饼图图表

以下是一个利用ECharts绘制饼图图表的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 饼图图表示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 筹备一个具有大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于筹备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

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

        // 利用刚指定的设置项跟数据表现图表。
        myChart.setOption(option);
    </script>
</body>
</html>

四、总结

本文介绍了ECharts的基本不雅点、入门教程跟实战案例。经由过程进修本文，你可能疾速控制ECharts的利用方法，并将其利用到现实项目中。