正文

新手必看！Echarts图表制作从入门到精通：视频教程全解析

/0 浏览量
0827

第一章：Echarts简介与基础知识

1.1 Echarts是什么？

Echarts是一款使用JavaScript编写的前端图表库，由百度团队开发，用于数据可视化。它具有丰富的图表类型，如柱状图、折线图、饼图、散点图等，可以满足各种数据展示需求。

1.2 Echarts的优势

  • 跨平台：Echarts可以在PC端和移动端进行展示。
  • 丰富的图表类型：满足不同场景下的数据可视化需求。
  • 易用性：提供简单易懂的API，方便用户快速上手。
  • 性能优化：通过优化渲染方式，保证图表在数据量大时的流畅展示。

1.3 Echarts的学习路径

  1. 熟悉HTML、CSS、JavaScript基础知识。
  2. 学习Echarts的安装和配置。
  3. 掌握Echarts的常用图表类型。
  4. 熟悉Echarts的高级特性，如动画、数据联动等。

第二章：Echarts快速入门

2.1 安装与配置

2.1.1 通过CDN引入

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

2.1.2 通过npm安装

npm install echarts --save

2.2 创建基本的柱状图

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);

2.3 Echarts常用属性介绍

  • title：标题配置。
  • tooltip：提示框配置。
  • legend：图例配置。
  • xAxis：X轴配置。
  • yAxis：Y轴配置。
  • series：系列配置。

第三章：Echarts常用图表类型详解

3.1 柱状图

柱状图适用于展示数据之间的对比，如销售额、销量等。

3.1.1 普通柱状图

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

3.1.2 堆积柱状图

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

3.2 折线图

折线图适用于展示数据的变化趋势，如气温、股价等。

3.2.1 普通折线图

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

3.2.2 折线图组合

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

3.3 饼图

饼图适用于展示占比关系，如市场份额、人口比例等。

3.3.1 普通饼图

var option = {
    title: {
        text: '普通饼图'
    },
    tooltip: {},
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        data: [
            {value: 235, name: '视频广告'},
            {value: 274, name: '联盟广告'},
            {value: 310, name: '邮件营销'},
            {value: 335, name: '直接访问'},
            {value: 400, name: '搜索引擎'}
        ]
    }]
};

3.3.2 环形饼图

var option = {
    title: {
        text: '环形饼图'
    },
    tooltip: {},
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
            }
        },
        labelLine: {
            show: false
        },
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
        ]
    }]
};

第四章：Echarts高级特性

4.1 动画效果

Echarts提供了丰富的动画效果，可以提升图表的展示效果。

4.1.1 数据动画

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

4.1.2 动画路径

var option = {
    title: {
        text: '动画路径'
    },
    tooltip: {},
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20],
        markPoint: {
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
            ]
        },
        markLine: {
            data: [
                {type: 'average', name: '平均值'}
            ]
        },
        animationPath: 'path://M9.299,0.001L15.615,12.5L22.231,0.001L9.299,0.001z M15.615,12.5L0,0.001L15.615,12.5z',
        smooth: true,
        areaStyle: {
            opacity: 0.5
        }
    }]
};

4.2 数据联动

Echarts支持数据联动，可以将多个图表之间的数据关联起来。

4.2.1 基于同一实例的数据联动

var chart1 = echarts.init(document.getElementById('main1'));
var chart2 = echarts.init(document.getElementById('main2'));

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

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

chart1.setOption(option1);
chart2.setOption(option2);

chart1.on('click', function (params) {
    chart2.setOption({
        series: [{
            data: params.data
        }]
    });
});

4.2.2 基于不同实例的数据联动

var chart1 = echarts.init(document.getElementById('main1'));
var chart2 = echarts.init(document.getElementById('main2'));

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

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

chart1.setOption(option1);
chart2.setOption(option2);

var link = {
    symbolSize: 0,
    name: 'link',
    type: 'lines',
    source: '衬衫',
    target: '销量',
    smoothness: 0.2,
    label: {
        normal: {
            formatter: '{c}',
            show: false
        }
    }
};

chart1.setOption({
    series: [{
        type: 'graph',
        layout: 'none',
        symbolSize: 20,
        roam: false,
        nodes: [
            {name: '衬衫', symbolSize: 20},
            {name: '羊毛衫', symbolSize: 20},
            {name: '雪纺衫', symbolSize: 20},
            {name: '裤子', symbolSize: 20},
            {name: '高跟鞋', symbolSize: 20},
            {name: '袜子', symbolSize: 20},
            {name: '销量', symbolSize: 20, itemStyle: {color: '#f00'}}
        ],
        edges: [link]
    }]
});

chart2.on('click', function (params) {
    var data = params.data;
    chart1.setOption({
        series: [{
            data: [data]
        }]
    });
});

第五章：实战案例

5.1 股票走势图

本案例将使用Echarts展示股票走势图。

5.1.1 数据获取

从股票API获取股票数据，如历史价格、成交量等。

5.1.2 数据处理

对获取到的数据进行处理，如计算涨跌幅、成交量等。

5.1.3 图表绘制

使用Echarts绘制股票走势图，展示价格、成交量等信息。

5.2 地图展示

本案例将使用Echarts展示地图，展示各地区的销售额。

5.2.1 数据获取

从数据库获取各地区的销售额数据。

5.2.2 数据处理

对获取到的数据进行处理，如计算占比、排名等。

5.2.3 图表绘制

使用Echarts绘制地图，展示各地区的销售额。

第六章：总结与展望

通过本文的学习，相信大家对Echarts图表制作有了更深入的了解。Echarts作为一款强大的图表库，在实际应用中具有广泛的应用前景。随着技术的不断发展，Echarts也将不断完善，为用户带来更多优秀的图表功能。希望大家能够将Echarts应用于实际项目中，展示出更加精彩的数据可视化效果。

-- 展开阅读全文 --