echarts入门

最新推荐文章于 2025-04-18 06:01:28 发布

Always_Love

最新推荐文章于 2025-04-18 06:01:28 发布

阅读量770

点赞数

分类专栏：入门 JS echarts

本文链接：https://blog.youkuaiyun.com/Always_Love/article/details/104959990

版权

入门同时被 3 个专栏收录

33 篇文章

订阅专栏

15 篇文章

订阅专栏

echarts

1 篇文章

订阅专栏

本文介绍了echarts作为JavaScript图表库的入门知识，包括获取echarts的四种方式、如何引入echarts、创建图表的基本步骤以及展示了堆叠图和自定义折线图的实例，强调了echarts在数据可视化和前端数据展示中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习用echarts来建立一些图表，其实echarts就是JavaScript的一个图表库，用来画一些数据图表等等。

一、获取echarts库
echarts有四种获取方法：
1、从 Apache ECharts (incubating) 官网下载界面获取官方源码包后构建。
2、在 ECharts 的 GitHub 获取。
3、通过 npm 获取 echarts，npm install echarts --save。
4、通过 jsDelivr 等 CDN 引入。

二、引入echarts
一般是通过标签方式直接引入构建好的 echarts 文件。

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

在JS中通过标签来引入echarts的文件路径，这样就可以在JS代码中使用了。

三、图表制作步骤
要制作一个图表，首先第一步要建立一个有大小（具备宽高）的dom容器。
然后就可以使用echarts.init的方法进行图表的建立。例如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="main" style="width: 600px; height: 400px"></div>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script>
    /*
     *  使用echarts
     * */
    //初始化
    var mycharts = 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]
        }]
    };
    //将数据显示到表
    mycharts.setOption(option);

</script>
</body>
</html>

效果图：
在这里插入图片描述在这里需要注意一些参数：
title: 设置图标的标题。
tooltip 设置提示信息。
legend 图例的组件。
xAxis yAxis x轴 y轴。
series 系列的列表 type 决定是什么样的表。

四、用echarts来做一些简单的图表例子
1、堆叠图

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="main" style="width: 600px;height: 400px"></div>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script>
    //初始化
    var mycharts = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '堆叠区域图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '邮件营销',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '联盟广告',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '视频广告',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '直接访问',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: '搜索引擎',
                type: 'line',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                areaStyle: {},
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };

    mycharts.setOption(option);
</script>
</body>
</html>

效果图：
在这里插入图片描述 2、折线图（自定义）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
<div id="main" style="width: 800px;height: 400px"></div>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script>
    var mycharts = echarts.init(document.getElementById("main"));
    var option = {
        title: {//标题
            text: "自定义",
            show: true,
            link: "https://www.baidu.com",
            textStyle: {
                color: "#c0c0c0",
                fontStyle: "normal",
                fontWeight: "normal",
                fontFamily: "sans-serif",
                fontSize: 20,
                textBorderColor: "#005cbf",
                textShadowColor: "#005cbf"
            }
        },
        tooltip:{
            show:true,
            trigger:"item"
        },
        legend: {//图例组件
            show:true,
            type: "plain",//普通图例  scroll  滚动式,
            left:"right",
            data: ["第一季度","第二季度"]

        },
        xAxis: {
            type: "category",
            data: ['a', 'b', 'm', 'n']
        },
        yAxis: {
            type: "value"
        },
        series: [
            {
                name: '第一季度',
                type: 'line',
                data: [23, 44, 55, 19]
            },
            {
                name: '第二季度',
                type: 'line',
                data: [80, 24, 105, 49]
            }
        ]
    };
    mycharts.setOption(option);
</script>
</body>
</html>