正文

学会echarts，图表制作不求人：从入门到精通的教程全解析

/0 浏览量
0701

了解echarts

echarts是一款使用JavaScript实现的开源可视化库，它提供了一套丰富的图表类型，包括但不限于折线图、柱状图、饼图、散点图、地图等。echarts以其强大的易用性和丰富的功能，在数据可视化领域得到了广泛的应用。

入门教程

1. 安装与引入

首先，你需要安装echarts。可以通过npm、yarn或直接下载压缩包的方式进行安装。

// 使用npm安装
npm install echarts --save

然后，在HTML文件中引入echarts的CSS和JS文件。

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

2. 创建图表

接下来，你可以创建一个基本的图表。以下是一个创建折线图的例子：

// 基于准备好的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);

3. 图表类型

echarts提供了多种图表类型，包括：

  • 柱状图：用于显示不同类别的数据数量，通常用于比较不同类别的数据。
  • 折线图：用于显示数据随时间或其他变量的变化趋势。
  • 饼图：用于显示数据占比，通常用于展示各部分与整体的关系。
  • 散点图：用于显示数据点之间的关系，通常用于展示两个变量之间的关系。
  • 地图：用于显示地理信息数据，可以展示国家、省份、城市等不同级别的地理信息。

进阶教程

1. 动态数据

echarts支持动态数据，你可以通过定时器或其他方式更新图表数据。

// 动态更新数据
setInterval(function () {
    var data0 = (Math.round(Math.random() * 100)).toString();
    var data1 = (Math.round(Math.random() * 100)).toString();
    var data2 = (Math.round(Math.random() * 100)).toString();

    var option = {
        title: {
            text: '动态数据 + 时间轴'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['销量']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: (function(){
                var now = new Date();
                var res = [];
                var len = 10;
                while (len--) {
                    res.push([now.getFullYear(), now.getMonth() + 1, now.getDate() - len]);
                }
                return res;
            })()
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '销量',
            type: 'line',
            data: [
                [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate(), parseInt(Math.random() * 100, 10)],
                [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate() - 1, parseInt(Math.random() * 100, 10)],
                [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate() - 2, parseInt(Math.random() * 100, 10)],
                [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate() - 3, parseInt(Math.random() * 100, 10)],
                [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate() - 4, parseInt(Math.random() * 100, 10)],
                [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate() - 5, parseInt(Math.random() * 100, 10)],
                [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate() - 6, parseInt(Math.random() * 100, 10)],
                [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate() - 7, parseInt(Math.random() * 100, 10)],
                [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate() - 8, parseInt(Math.random() * 100, 10)],
                [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate() - 9, parseInt(Math.random() * 100, 10)]
            ],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }]
    };

    myChart.setOption(option, true);
},1000);

2. 主题配置

echarts支持主题配置，你可以通过设置主题来改变图表的样式。

// 设置主题
var myChart = echarts.init(document.getElementById('main'), 'macarons');

// 指定图表的配置项和数据
var option = {
    // ...（其他配置项）
};

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

精通echarts

1. 高级图表

echarts支持多种高级图表，如雷达图、漏斗图、K线图等。你可以通过查阅echarts的官方文档来了解如何使用这些高级图表。

2. 交互式图表

echarts支持交互式图表，你可以通过配置交互选项来增强图表的交互性。

// 交互式图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    // ...（其他配置项）
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    // ...（其他配置项）
};

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

3. 自定义图表

echarts支持自定义图表，你可以通过继承echarts类来实现自定义图表。

// 自定义图表
var MyChart = echarts.extendChart({
    type: 'myChart',
    render: function (dom, opt) {
        // ...（自定义图表的渲染逻辑）
    }
});

// 使用自定义图表
var myChart = new MyChart(dom, opt);

总结

通过以上教程，你将能够从入门到精通地使用echarts进行图表制作。echarts是一款功能强大的可视化库，它可以帮助你轻松地创建各种图表，并将其应用于各种场景。希望这篇教程能对你有所帮助！

-- 展开阅读全文 --