ECharts的简单学习(一)

最新推荐文章于 2022-12-11 14:09:56 发布

姚明明

最新推荐文章于 2022-12-11 14:09:56 发布

阅读量518

点赞数

分类专栏：基础工具文章标签： ECharts

本文链接：https://blog.csdn.net/mingzhuo_126/article/details/86038661

版权

基础工具专栏收录该内容

3 篇文章 5 订阅

订阅专栏

1.简介

ECharts是百度推出的一款强大的作图工具，是基于HTML5的图形库，其开源免费且功能丰富，官网上的资料也很详细，使用ECharts做图需要有一些简单的HTML和JavaScript基础，要用到一些标签。

ECharts官网

我们可以根据自己的需要选择下载合适的版本，这里我选择的是完整版，如下图示：
在这里插入图片描述

2.使用方法

2.1 引入ECharts

ECharts 的引入方式类似 JavaScript 库一样用 script 标签引入即可。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

2.2 使用ECharts绘制一个简单的图表

使用ECharts绘制图表前要先有一个有宽高的DOM容器，代码如下：

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

接着通过使用 echarts.init方法来初始化一个 echarts 实例和使用 setOption方法生成一个简单的柱状图，完整的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="C:\Users\ming\Downloads\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'));

        // 指定图表的配置项和数据
        option = {
     title: {
        text: '近年考研工科学硕国家线'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['A类','B类']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: [2014,2015,2016,2017,2018]
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
        name:'A类',
        data: [285,280,265,265,260],
        type: 'line'
        },
        {
        name:'B类',
        data: [275,270,255,255,250],
        type: 'line'
        }
    ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

得到的折线图如下所示：

在这里插入图片描述

再附上一个用ECharts画的一个成绩单的直方图：

在这里插入图片描述

总结：

ECharts官网上有丰富的图样模版，官网文档的教程和配置手册很详细，能够帮助我们画出各种优美炫酷的图表，还有很多实例代码开放，相信会满足你对图表的挑剔。

姚明明

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ECharts的简单学习(一)

1.简介ECharts是百度推出的一款强大的作图工具，是基于HTML5的图形库，其开源免费且功能丰富，官网上的资料也很详细，使用ECharts做图需要有一些简单的HTML和JavaScript基础，要用到一些标签。ECharts官网我们可以根据自己的需要选择下载合适的版本，这里我选择的是完整版，如下图示：2.使用方法2.1 引入EChartsECharts 的引入方式类似 JavaS...
复制链接

扫一扫

专栏目录