【ECharts学习】1-1安装、简单实例

杂鱼豆腐人

于 2023-12-10 17:56:32 发布

阅读量857

点赞数 23

文章标签： echarts 学习前端 javascript

本文链接：https://blog.csdn.net/qq_73357884/article/details/134909678

版权

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会。

——百度百科

ECharts官方帮助文档：

Handbook - Apache ECharts

一、安装

我喜欢使用script标签从本地引入：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个 ECharts 实例</title>
        <!-- 引入 echarts.js -->
        <script src="echarts.min.js"></script>
    </head>
    <body>

    </body>
</html>

二、图标容器

一般需要在HTML文件中定义一个div标签作为图表的容器。

<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
</script>

div的id可以更改，只要初始化echarts时（代码第三行）获取的id与其一致。（虽然是废话，但是我不咋写前端所以忘了www）

三、配置语法

配置项的官方文档：

Documentation - Apache ECharts

ECharts 库使用 json 格式来配置信息。如下，在option中使用 json 数据格式的配置即可绘制图表：

<html>
    <meta charset="utf-8">
    <head>
        <title>ECharts实例</title>
        <script src="echarts.min.js"></script>
    </head>

    <body>
        <div style="text-align: center;display:flex;justify-content: center;">
            <!-- 给ECharts准备一个容器 -->
            <div id="main" style="height: 600px;width: 800px;background-color: white;"></div>
        </div>
        <script>
            var option = {
                // ...
            };

            echarts.init(document.getElementById("main"),'light').setOption(option);
        </script>
    </body>
</html>

①标题

图表的标题。（左上）

title: {
    text: '第一个 ECharts 实例'
}

②提示信息

鼠标移动到某一范围内时，提示信息会显示当前范围的数据信息。

tooltip: {},

常用触发方式有两种。（http://t.csdnimg.cn/tRWaE）

触发方式Ⅰ：坐标轴触发

`trigger: 'axis'`

`trigger: 'item'`

触发方式Ⅱ：数据项图形触发

更多内容参见官方文档等：

官方文档： Documentation - Apache ECharts

《echarts自定义信息提示框内容》：echarts自定义信息提示框内容_echarts 提示-CSDN博客

③图例组件

通过点击图例可以控制系列的显示与否。

legend: {
    data: [
        {
            name: '2015',
            // 强制设置图形为圆。
            icon: 'circle',
            // 设置文本
            textStyle: {
                color: 'red'
                // ...
            }
        },
        {
            name: '2016',
            // 强制设置图形为方块
            icon: 'bar',
            // 设置文本为
            textStyle: {
                color: 'red'
                // ...
            }
        },
        {
            name: '2017',
            // 强制设置图形为三角
            icon: 'triangle',
            // 设置文本为
            textStyle: {
                color: 'red'
                // ...
            }
        }
    ]
},

④坐标轴（以X轴为例）

官方文档：xAxis - Apache ECharts

xAxis: {
    name: '饮品',
    type: 'category',
    data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
yAxis: {
    name: '销量',
    type:'value'
},

xAxis.name

轴的名字，默认显示在轴的结束处。可通过xAxis. nameLocation调整位置。

xAxis.type

坐标轴类型。

（未指定的话应该会自动判断吧）

'value'	数值轴，适用于连续数据。
'category'	类目轴，适用于离散的类目数据。可自动从 series.data 或 dataset.source 中取得。
'time'	时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化。
'log'	对数轴。适用于对数数据。

在不配置offset属性时，一个x/y轴最多定义两个，分别显示在上下/左右。

⑤系列（series）列表

series: [
    {
        type: 'bar',
        name: '2015',
        data: [89.3, 92.1, 94.4, 85.4]
    },
    {
        type: 'bar',
        name: '2016',
        data: [95.8, 89.4, 91.2, 76.9]
    },
    {
        type: 'bar',
        name: '2017',
        data: [97.7, 83.1, 92.5, 78.1]
    }
]

如上，图表中定义了三个系列，类型均为bar（条状图）。

常用图表类型有：常用图表类型 - 应用篇 - 使用手册 - Apache ECharts

四、完整实例

完整代码如下：

<html>
    <meta charset="utf-8">
    <head>
        <title>ECharts实例</title>
        <script src="echarts.min.js"></script>
    </head>

    <body>
        <div style="text-align: center;display:flex;justify-content: center;">
            <!-- 给ECharts准备一个容器 -->
            <div id="main" style="height: 400px;width: 800px;background-color: white;"></div>
        </div>
        <script>
            var option = {
                title: {
                    text: '第一个 ECharts 实例'
                },
                tooltip:{
                    trigger: 'item'
                },
                legend: {
                    data: [
                        {
                            name: '2015',
                            // 强制设置图形为圆。
                            icon: 'circle',
                            // 设置文本为红色
                            textStyle: {
                                color: 'red'
                            }
                        },
                        {
                            name: '2016',
                            // 强制设置图形为方块。
                            icon: 'bar',
                            // 设置文本为红色
                            textStyle: {
                                color: 'red'
                            }
                        },
                        {
                            name: '2017',
                            // 强制设置图形为三角。
                            icon: 'triangle',
                            // 设置文本为红色
                            textStyle: {
                                color: 'red'
                            }
                        }
                    ]
                },
                xAxis: {
                    name: '饮品',
                    type: 'category',
                    data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
                },
                yAxis: {
                    name: '销量',
                    type:'value'
                },
                series: [
                    {
                        type: 'bar',
                        name: '2015',
                        data: [89.3, 92.1, 94.4, 85.4]
                    },
                    {
                        type: 'bar',
                        name: '2016',
                        data: [95.8, 89.4, 91.2, 76.9]
                    },
                    {
                        type: 'bar',
                        name: '2017',
                        data: [97.7, 83.1, 92.5, 78.1]
                    }
                ]
            };

            echarts.init(document.getElementById("main"),'light').setOption(option);
        </script>
    </body>
</html>

前端呈现为：

五、总结

官方文档提供了完整的、丰富的编写方法供编写者参考。

多有疏漏，请路过的大佬不吝赐教。(≧∇≦)ﾉ

学习仍需继续。

封面来源：分辨率：1920*1080P高清动漫壁纸图片9P - 知乎 (zhihu.com)

杂鱼豆腐人

关注

23
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
【ECharts学习】1-1安装、简单实例

series: [},},如上，图表中定义了三个系列，类型均为bar（条状图）。常用图表类型 - 应用篇 - 使用手册 - Apache ECharts官方文档提供了完整的、丰富的编写方法供编写者参考。多有疏漏，请路过的大佬不吝赐教。(≧∇≦)ﾉ学习仍需继续。分辨率：1920*1080P高清动漫壁纸图片9P - 知乎 (zhihu.com)
复制链接

扫一扫