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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/819970.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Open3D (C++) 点云投影至主成分空间

目录 一、算法原理二、代码实现三、结果展示四、相关连接Open3D (C++) 点云投影至主成分空间由CSDN点云侠原创,爬虫自重。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理 p r o j

原始部落版本潮玩宇宙小程序定制大逃杀游戏APP开发H5游戏

原始部落版本潮玩宇宙小程序定制大逃杀游戏APP开发H5游戏 潮玩宇宙小程序定制大逃杀游戏APP开发H5游戏 潮玩宇宙大逃杀小游戏模块成品源码&#xff0c;可嵌入任何平台系统&#xff0c;增加用户粘性&#xff0c;消除泡沫&#xff0c;短视频直播引流。 玩家选择一间房间躲避杀手…

第二期书生浦语大模型训练营第五次作业

部署LMDeploy并对话 配置LMDeploy运行环境 安装好环境&#xff0c;并成功激活 使用transformer运行大模型 使用LMDeploy模型量化(lite) KV8量化和W4A16量化。KV8量化是指将逐 Token&#xff08;Decoding&#xff09;生成过程中的上下文 K 和 V 中间结果进行 INT8 量化&#…

【安装部署】Apache SeaTunnel 和 Web快速安装详解

版本说明 由于作者目前接触当前最新版本为2.3.4 但是官方提供的web版本未1.0.0&#xff0c;不兼容2.3.4&#xff0c;因此这里仍然使用2.3.3版本。 可以自定义兼容处理&#xff0c;官方提供了文档&#xff1a;https://mp.weixin.qq.com/s/Al1VmBoOKu2P02sBOTB6DQ 因为大部分用…

引领智能互联时代,紫光展锐赋能百业创新发展

随着5G技术的快速发展&#xff0c;各行各业对通信技术的需求也在不断升级。紫光展锐持续深耕5G垂直行业&#xff0c;不断推进5G标准演进&#xff0c;从R15到R16&#xff0c;再到R17&#xff0c;展锐携手生态合作伙伴&#xff0c;不断推出创新性解决方案&#xff0c;在5G RedCap…

【Unity】RPG小游戏创建游戏中的交互

RPG小游戏创建游戏中的交互 创建可交互的物体的公共的父类&#xff08;Interactable&#xff09;InteractableObject 类NPCObject 类PickableObject 类 创建可交互的物体的公共的父类&#xff08;Interactable&#xff09; InteractableObject 类 using System.Collections; u…

【攻防世界】warmup

[HCTF 2018]WarmUp全网最详细解释_[hctf 2018]warmup的解-CSDN博客 php://filter 读取源码&#xff08;文件&#xff09; php://input 执行php代码&#xff0c;需要post请求提交数据 Content-Type为image/jpeg text. 绕过后缀的有文件格式有php,php3,php4,php5,pht…

【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,灰度、负片、像素化特效

前言 【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效&#xff0c;灰度、负片、像素化特效一、UGUI特效插件&#xff1a;UIEffect1.1 介绍1.2 效果展示1.3 使用说明及下载 二、组件属性面板三、代码操作组件四、组件常用方法示例4.1 使用灰度特效做头像(关卡)选择 总结 前…

03-JAVA设计模式-迭代器模式

迭代器模式 什么是迭代器模式 迭代器模式&#xff08;demo1.Iterator Pattern&#xff09;是Java中一种常用的设计模式&#xff0c;它提供了一种顺序访问一个聚合对象中各个元素&#xff0c;而又不需要暴露该对象的内部表示的方法。迭代器模式将遍历逻辑从聚合对象中分离出来…

IP地址归属地与旅游业应用

在当今数字化时代&#xff0c;IP地址归属地已成为许多行业的重要工具&#xff0c;其中包括旅游业。IP地址归属地是指将特定IP地址与其地理位置相关联的过程。在旅游业中&#xff0c;利用IP地址归属地可以提供多种应用&#xff0c;从客户定位到个性化推广&#xff0c;以及旅游数…

树--排序二叉树的删除

一、二叉排序树的删除 二叉排序树的删除情况比较复杂&#xff0c;有以下三种情况需要考虑。 删除叶子节点 &#xff08;比如&#xff1a;2,5,9,10&#xff09;删除只有一个子树的节点&#xff08;比如&#xff1a;1&#xff09;删除有两个子树的节点 &#xff08;比如&#x…

YAPI第一次创建项目

黑马程序员JavaWeb开发教程 文章目录 1、添加项目2、添加分类3、添加接口 1、添加项目 2、添加分类 3、添加接口

数据结构:线性表————单链表专题

&#x1f308;个人主页&#xff1a;小新_- &#x1f388;个人座右铭&#xff1a;“成功者不是从不失败的人&#xff0c;而是从不放弃的人&#xff01;”&#x1f388; &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd; &#x1f3c6;所属专栏&#xff1…

STM32的GPIO端口的八种模式解析

目录 STM32的GPIO端口的八种模式解析 一、上拉输入模式 二、下拉输入模式 三、浮空输入模式 四、模拟输入模式 五、推挽输出模式 六、开漏输出模式 七、复用推挽输出模式 八、复用开漏输出模式 STM32的GPIO端口的八种模式解析 在学习STM32的过程中&#xff0c;GPIO端口…

最全面的多语言同城送餐app开发流程解析

在当今数字化时代&#xff0c;随着移动互联网的普及和人们生活水平的提高&#xff0c;多语言同城送餐app开发成为各大企业争相布局的热门领域。本文将从专家的视角出发&#xff0c;为您详细解析最全面的多语言同城送餐app开发流程&#xff0c;助您在激烈的竞争中脱颖而出。 多…

使用colab进行yolov5小demo练习

输入一张动物的图片进行目标检测和分类 !pip install yolov5 import torch from PIL import Image from torchvision import transforms from yolov5.models.experimental import attempt_load from yolov5.utils.general import non_max_suppression# 加载YOLOv5模型 device …

婴儿专用洗衣机哪个牌子比较好?四款品质婴儿洗衣机暖心安利

科技让我们的生活变得方便了许多&#xff0c;比如&#xff0c;自从有了婴儿洗衣机之后&#xff0c;有些人就改变了宝宝衣物必须要手洗的想法&#xff0c;许多研究也证明&#xff0c;单靠手洗是无法将宝宝衣物彻底清洗干净的&#xff0c;一台专门的洗衣机就可以减轻我们的负担&a…

【MySQL笔记】InnoDB的插入缓存+非聚簇索引插入的离散性理解

文章目录 为什么需要插入缓存Insert Buffer非聚簇索引插入的离散性 Insert Buffer查看Insert Buffer信息 Insert Buffer的问题Change Buffer总结Reference 为什么需要插入缓存Insert Buffer 磁盘中的主键索引由于天然自增&#xff0c;无须磁盘的随机 I/O&#xff0c;只需不断追…

聚观早报 | 2024款蔚来ET7将发布;魏建军直播测试长城汽车

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 4月16日消息 2024款蔚来ET7将发布 魏建军直播测试长城汽车 Redmi Turbo 3开启销售 华为P系列正式升级为华为Pura…

数据采集1688官方API商品数据采集1688官方商品详情数据返回|电商API接口数据采集

随着全球经济一体化和电子商务的快速发展&#xff0c;网络购物的需求日益增加。不断涌现的电商企业使得行业的竞争情况愈演愈烈。在这种情况下&#xff0c;企业不仅要加大经营力度&#xff0c;还要在自己的基础设施和技术上持续投入&#xff0c;才能更好的适应市场和消费习惯。…