【echarts】echarts入门教程，学会如何编写echarts代码

charon桐

于 2024-04-16 11:16:21 发布

阅读量216

点赞数 3

文章标签： echarts 学习前端

本文链接：https://blog.csdn.net/m0_63563126/article/details/137817819

版权

echarts模板

使用！为html来创建一个模板。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!--准备一个容器-->
    <div id ="main" style="width: 600px;height: 400px;"></div>
    <script type="text/javascript">
        //创建实例
        var myChart = echarts.init(document.getElementById('main'));
        
        option={
        
        }
        
 // 使用刚指定的配置项和数据显示图表。 
 myChart.setOption(option); 
    </script>
</body>
</html>

编写一个图表的过程

1.先创建html模板。

新建html文件，使用！来进行补全html内容。

2.引入min.js文件。

在head头部中引入：

<script src="echarts.min.js"></script>

3.在body中编写代码

1）准备容器。

<!--准备一个容器-->
<div id="main" style="width: 600px;height: 400px;"></div>

2）说明js类型

<script type="text/javascript">

3）创建实例

 //创建实例
var myChart = echarts.init(document.getElementById('main'));

4）编写配置

即编写option中的内容

5）使用指定的配置项

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

如何编写option

option即echarts的核心代码，里面包括了图标的类型，数据等等内容，只有option编写的没有问题，才能让图表正确显示。

编写规则

配置项+对象+属性的格式。

在这里插入图片描述

如上述代码的title就是配置项，text就是对象，而后面’’ 中的内容就是属性。

而echarts的所有配置项请参考官方文档

echarts配置文档

官方配置文档：Documentation - Apache ECharts

欢迎关注，会更新很多有帮助的文章哦