正文

新手快速入门，echarts图表制作全攻略：从基础到进阶，实战案例解析

/0 浏览量
0401

第一章：ECharts简介与基础

1.1 ECharts是什么？

ECharts是一个使用JavaScript编写的开源可视化库，它可以让开发者轻松地创建丰富的交互式图表。ECharts支持多种图表类型，如折线图、柱状图、饼图、地图等，非常适合数据可视化。

1.2 ECharts的特点

  • 跨平台：ECharts可以在所有主流浏览器上运行。
  • 高性能：ECharts采用Canvas和SVG两种绘图方式，保证了高性能的渲染效果。
  • 易于使用：ECharts提供丰富的API和配置项，使得开发者可以轻松地定制图表。
  • 丰富的图表类型：支持多种图表类型，满足不同场景的需求。

1.3 ECharts的安装与使用

首先，你需要下载ECharts的JavaScript库，并将其引入到你的HTML页面中。以下是基本的使用步骤：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts示例</title>
    <!-- 引入ECharts主模块 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 准备一个用于放置图表的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>

第二章：ECharts基础图表类型

2.1 折线图

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

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

2.2 柱状图

柱状图是一种用于表示各个类别数据大小的图表。以下是一个简单的柱状图示例：

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

2.3 饼图

饼图是一种用于表示各部分占比的图表。以下是一个简单的饼图示例：

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

第三章：ECharts进阶图表类型

3.1 地图

地图是一种用于表示地理位置信息的图表。以下是一个简单的中国地图示例：

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

3.2 雷达图

雷达图是一种用于表示多个变量之间关系的图表。以下是一个简单的雷达图示例：

option = {
    title: {
        text: '雷达图示例'
    },
    tooltip: {},
    legend: {
        data:['预算分配（分配率）']
    },
    xAxis: {
        type: 'category',
        data: ['销售（销售量）', '管理（管理费用）', '研发（研发投入）', '生产（生产成本）', '总资产']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '预算分配（分配率）',
        type: 'radar',
        data: [
            {
                value: [85, 80, 70, 60, 90],
                name: '预算分配（分配率）'
            }
        ]
    }]
};

第四章：实战案例解析

4.1 在线数据分析平台

以下是一个简单的在线数据分析平台示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线数据分析平台</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main1" style="width: 600px;height:400px;"></div>
    <div id="main2" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart1 = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));
        var option1 = {
            title: {
                text: '用户活跃度'
            },
            tooltip: {},
            legend: {
                data:['用户活跃度']
            },
            xAxis: {
                data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
            },
            yAxis: {},
            series: [{
                name: '用户活跃度',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20, 30]
            }]
        };
        var option2 = {
            title: {
                text: '地区用户分布'
            },
            tooltip: {
                trigger: 'item'
            },
            visualMap: {
                min: 0,
                max: 100,
                left: 'left',
                top: 'bottom',
                text: ['高','低'],           // 文本，默认为数值文本
                calculable: true
            },
            series: [
                {
                    name: '地区用户分布',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    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)}
                    ]
                }
            ]
        };
        myChart1.setOption(option1);
        myChart2.setOption(option2);
    </script>
</body>
</html>

4.2 基于ECharts的数据可视化报表

以下是一个基于ECharts的数据可视化报表示例：

”`html <!DOCTYPE html> 

<meta charset="UTF-8">
<title>数据可视化报表</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>


<div id="main1" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
<div id="main3" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3 = echarts.init(document.getElementById('main3'));
    var option1 = {
        title: {
            text: '用户活跃度'
        },
        tooltip: {},
        legend: {
            data:['用户活跃度']
        },
        xAxis: {
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: {},
        series: [{
            name: '用户活跃度',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20, 30]
        }]
    };
    var option2 = {
        title: {
            text: '地区用户分布'
        },
        tooltip: {
            trigger: 'item'
        },
        visualMap: {
            min: 0,
            max: 100,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],           // 文本，默认为数值文本
            calculable: true
        },
        series: [
            {
                name: '地区用户分布',
                type: 'map',
                mapType: 'china',
                roam: false,
                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)}
                ]
-- 展开阅读全文 --