ECharts快速入门（一）基本使用

最新推荐文章于 2024-05-26 12:10:26 发布

浮云⚡⭐

最新推荐文章于 2024-05-26 12:10:26 发布

阅读量954

点赞数 2

分类专栏： echarts 文章标签： echarts javascript html

本文链接：https://blog.csdn.net/qq_44999663/article/details/120239180

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

公司有个项目需要用到echarts，最近刚接触，顺便总结些简单的学习成果。
echarts是一个基于 JavaScript 的开源可视化图表库，是个比较优秀的前端框架。其他的就不多讲了，开始吧！！（如有错误，望各位多多指正）

看到这篇文章的小伙伴如何想快速上手可以到b站看下这位up主（不是本人，我只是搬运工，哈哈哈）的视频：直通车https://www.bilibili.com/video/BV16L4y1h7C9?p=1

官网直通车：https://echarts.apache.org/zh/index.html

目录预览

ECharts使用五步曲

创建一个图表只需要五步：

第一步：下载并引入echarts.js文件

下载：下载的方式有多种，看你自己的需求，获取的各种方法详情请移步官网：下载（从 GitHub 获取、从 npm 获取、从 CDN 获取、在线定制）

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

第二步：准备一个具备大小的容器

 <div id="main" style="width: 600px;height:400px;"></div>

第三步：初始化echarts实例对象

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

第五步：将配置项给echarts实例对象

myChart.setOption(option);

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/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>

到了这里一个简单的柱形图就创建好了，不过各位是不是还很懵呢？别怕，下面以折线图为例讲下option里面的配置项

option配置项

option = {
    title: {
        text: '配置项简单说明'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    //color：表示每种数据的具体颜色，以数组呈现
    color:['#6fc1dd','#fc5531','#ffe68c','#267dcc','#282c34','#3c7c00']
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '邮件营销',
            type: 'line',
            // stack: '总量f',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            // stack: '总量5',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
            // stack: '总量2',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
            // stack: '总量3',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜索引擎',
            type: 'line',
            // stack: '总量4',
            data: [200, 632, 901, 594, 1290, 1330, 1320]
        }
    ]
};

废话不多说，直接上图：

在这里插入图片描述
配置代表的位置
option配置的简单说明

series主要参数讲解

series：表示每一列数据的详情
例如：

    series: [
        {
            name: '邮件营销',//名称
           
            //堆叠，如果一样会在第一个的基础上加，不写则不会出现堆叠效果如例子中邮件营销星期一为120，联盟广告为220，那么联盟广告在图表上显示为120+220（340）
            stack: '总量',
             //类型（line线形图，bar柱形图，pie饼图...详情请参考官方文档）
            type: 'line',
            //data表示每一列对应的数值，以数组的形式
            data: [120, 132, 101, 134, 90, 230, 210]/
        },
        {
            name: '联盟广告',
            type: 'line',
            // stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        
    ]

浮云⚡⭐

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
ECharts快速入门（一）基本使用

公司有个项目需要用到echarts，最近刚接触，顺便总结些简单的学习成果。echarts是一个基于 JavaScript 的开源可视化图表库，是个比较优秀的前端框架。其他的就不多讲了，开始吧！！（如有错误，望各位多多指正）看到这篇文章的小伙伴如何想快速上手可以到b站看下这位up主（不是本人，我只是搬运工，哈哈哈）的视频：直通车https://www.bilibili.com/video/BV16L4y1h7C9?p=1官网直通车：https://echarts.apache.org/zh/index.
复制链接

扫一扫