Echarts基础

Echarts基础

1.echarts案例1-最简配置
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>echarts案例1</title><script src="./js/echarts.js"></script>
</head><body><div class="box"><!-- 指定图表容器，必须指定宽高，否则图表不会显示 --><div id="main" style="width: 600px;height: 400px;"></div></div><script>//初始化echarts，指定图显示在哪个容器上var myChart = echarts.init(document.getElementById("main"))//图最基本配置var option = {//x轴xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "帽子"]}//y轴，一般不指定y轴的数据，y轴会随着数据的改变而改变, yAxis: {}//具体数据, series: [//第一组数据{name: '销量',  // 系列名称type: 'bar',  // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘data: [5, 20, 360, 10, 10, 20, 60]  // 系列中的数据内容}]//趋势：折线图，年和年之间的对比选择柱状图，占比选择饼图}//将图配置显示到容器中myChart.setOption(option)</script>
</body></html>
2.echarts案例2
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>echarts案例2</title><script src="./js/echarts.js"></script>
</head>
<style>/* 使用flex布局调整div位置 */.box {width: 100%;height: 860px;display: flex;/*指定flex布局*/flex-wrap: wrap;/*指定换行*/justify-content: space-around;/**/}
</style><body><div class="box"><!-- 指定图容器 --><div id="main" style="width: 600px;height: 400px;"></div><div id="main2" style="width: 600px;height: 400px;"></div><div id="main3" style="width: 600px;height: 400px;"></div><div id="main4" style="width: 600px;height: 400px;"></div></div><script>//初始化echarts，指定图显示在哪个容器上var myChart = echarts.init(document.getElementById("main"))//图表配置var option = {title: {text: "标题"}//提示信息配置, tooltip: {}//图例配置, legend: {}, legend: {}//x轴, xAxis: {// data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "帽子"]}//y轴，一般不指定y轴的数据，y轴会随着数据的改变而改变, yAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "帽子"]}//具体数据, series: [//第一组数据{name: '销量',  // 系列名称type: 'bar',  // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘data: [5, 20, 360, 10, 10, 20, 60]  // 系列中的数据内容},//第二组数据{name: '销量2',  // 系列名称type: 'bar',  // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘data: [5, 20, 160, 10, 20, 20, 60]  // 系列中的数据内容},//第三组数据{name: '系列1',  // 系列名称type: 'line',  // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘data: [5, 20, 160, 10, 20, 20, 60]  // 系列中的数据内容}]}//将图配置显示到容器中myChart.setOption(option)//初始化echarts，指定图显示在哪个容器上var myChart2 = echarts.init(document.getElementById("main2"))//图基本配置var option2 = {title: {text: "标题"}//提示信息配置, tooltip: {}//图例配置, legend: {}//x轴, xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "帽子"]}//y轴，一般不指定y轴的数据，y轴会随着数据的改变而改变, yAxis: {}//具体数据, series: [//第一组数据{name: '销量',  // 系列名称type: 'bar',  // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘data: [5, 20, 360, 10, 10, 20, 60]  // 系列中的数据内容},//第二组数据{name: '销量2',  // 系列名称type: 'bar',  // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘data: [5, 20, 160, 10, 20, 20, 60]  // 系列中的数据内容},//第三组数据{name: '系列1',  // 系列名称type: 'line',  // 系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘data: [5, 20, 160, 10, 20, 20, 60]  // 系列中的数据内容}]}//将图配置显示到容器中myChart2.setOption(option2)//配置第三个图表var myChart3 = echarts.init(document.getElementById("main3"))myChart3.setOption(option)//配置第四个图表var myChart4 = echarts.init(document.getElementById("main4"))myChart4.setOption(option2)</script>
</body></html>

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

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

相关文章

Debian openmediavault 自建Nas系统共享，raid5与btrfs文件系统无损原数据扩容

Debian openmediavault 自建Nas系统共享，raid5与btrfs文件系统无损原数据扩容

一、适用环境 1、企业自有物理专业服务器&#xff0c;一些敏感数据不外流时&#xff0c;使用openmediavault自建NAS系统&#xff1b; 2、在虚拟化环境中自建NAS系统&#xff0c;用于内网办公&#xff0c;或出差外网办公时&#xff0c;企业内的文件共享&#xff1b; 3、虚拟化环…
阅读更多...
AutoGen多代理对话项目示例和工作流程分析

AutoGen多代理对话项目示例和工作流程分析

在这篇文章中&#xff0c;我将介绍AutoGen的多个代理的运行。这些代理将能够相互对话&#xff0c;协作评估股票价格&#xff0c;并使用AmCharts生成图表。 我们创建对话的目的是要求代理分析特定公司的股票价格&#xff0c;并制作股票价格图表。 为了实现这一目标&#xff0c;…
阅读更多...
【LeetCode周赛】LeetCode第375场周赛

【LeetCode周赛】LeetCode第375场周赛

【LeetCode周赛】LeetCode第375场周赛 目录 统计已测试设备(简单模拟题)双模幂运算(快速幂)统计最大元素出现至少 K 次的子数组(简单数学题)统计好分割方案的数目(合并区间组合数学快速幂) 统计已测试设备(简单模拟题) 统计已测试设备 分析&#xff1a; 本题数据范围较小&…
阅读更多...
Unity | Shader基础知识（第一集：unity中最简单的shader)

Unity | Shader基础知识（第一集：unity中最简单的shader)

一、unity的shader unity写的shader并不是真正意义上的shader。 简单解释&#xff1a;真正的shader语言写起来还是麻烦的&#xff0c;unity希望大家写起来简单一点&#xff0c;于是在原来的基础上&#xff0c;给大家优化了一个语言&#xff0c;叫shaderLab&#xff0c;所以我…
阅读更多...
四、编写第一个 Shell 脚本

四、编写第一个 Shell 脚本

一、编写 Shell 脚本内容 打开文本编辑器&#xff08;可以使用 vi/vim 命令来创建文件&#xff09;&#xff0c;新建一个文件 chaoqing.sh&#xff0c;扩展名为 sh &#xff08;sh 表示 shell&#xff09;&#xff0c;扩展名不影响脚本的运行。 输入一些代码&#xff0c;如下…
阅读更多...
OpenHarmony应用编译 - 如何在源码中编译复杂应用

OpenHarmony应用编译 - 如何在源码中编译复杂应用

功能简介 在OpenHarmony系统中预安装应用的hap包会随系统编译打包到镜像中&#xff0c;目前有两种编译预安装应用hap包的方式&#xff0c;一种为随系统编译时&#xff0c;编译应用源码生成hap包的方式&#xff0c;另一种是将已生成的hap包放入系统源码中&#xff0c;再进行打包…
阅读更多...
跨境电商如何利用跨境客服软件提升销售额

跨境电商如何利用跨境客服软件提升销售额

随着全球化的推进&#xff0c;跨境电商成为了许多企业拓展市场的重要途径。然而&#xff0c;跨境电商面临着语言、文化、时差等多种挑战&#xff0c;为了提供更好的客户服务并提升销售额&#xff0c;跨境电商需要利用跨境客服软件。本文将探讨跨境电商如何利用跨境客服软件来提…
阅读更多...
HarmonyOS：NativeWindow 开发指导

HarmonyOS：NativeWindow 开发指导

场景介绍 NativeWindow 是 HarmonyOS 本地平台化窗口&#xff0c;表示图形队列的生产者端。开发者可以通过 NativeWindow 接口进行申请和提交 Buffer&#xff0c;配置 Buffer 属性信息。 针对 NativeWindow&#xff0c;常见的开发场景如下&#xff1a; ● 通过 NativeWindow…
阅读更多...
Day35 贪心算法 part04

Day35 贪心算法 part04

Day35 贪心算法 part04 860.柠檬水找零 pass 406.根据身高重建队列 pass
阅读更多...
小航助学2023年9月电子学会Scratch一级真题（含题库答题软件账号）

小航助学2023年9月电子学会Scratch一级真题（含题库答题软件账号）

需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09; 单选题2.00分 删除编辑附件图文 答案:C 第1题下列哪项内容是不可以修改的&#xff1f;&#xff08; &#xff09; A、角色名称B、造型名称C、舞台名称D、背景名…
阅读更多...
SpringBoot使用注解实现参数校验

SpringBoot使用注解实现参数校验

文章目录 参数校验- Validation- Hibernate Validator 校验注解注解通用属性- Validator 内置注解- Hibernate Validator 附加注解 校验开启Valid和Validated 校验分类- Controller校验- Spring Bean校验 校验使用- Controller&#xff1a;参数对象校验- Spring Bean&#xff1…
阅读更多...
关系模式化的规范化理论

关系模式化的规范化理论

数据库规范化中的“函数依赖”是理解和应用规范化过程的关键概念。函数依赖描述了一个或多个列&#xff08;属性&#xff09;如何唯一确定另一个列的值。 函数依赖的基本概念&#xff1a; 函数依赖&#xff1a;如果在一个给定的关系中&#xff0c;对于某个属性集合 ( A ) 的每…
阅读更多...
巧用RTL原语实现MUX门级映射

巧用RTL原语实现MUX门级映射

对于前端设计人员&#xff0c;经常会需要一个MUX来对工作模式&#xff0c;数据路径进行明确&#xff08;explicit&#xff09;的声明&#xff0c;这个对于中后端工程师下约束也很重要。这里介绍一种巧用的RTL原语&#xff0c;实现MUX的方法。闲言少叙&#xff0c;ICerGo&#x…
阅读更多...
如何退回chrome旧版ui界面？关闭Chrome浏览器新 UI 界面

如何退回chrome旧版ui界面？关闭Chrome浏览器新 UI 界面

之前启用新UI的方式 Chrome 已经很久没有进行过大的样式修改&#xff0c;但近期在稳定分支中添加了新的 flags 实验性标志&#xff0c;带来了全新的设计与外观&#xff0c;启用方式如下&#xff1a; 在 Chrome 浏览器的搜索栏中输入并访问 chrome://flags 搜索“refresh 2023…
阅读更多...
西南科技大学数字电子技术实验六（智力竞赛抢答器的设计及FPGA实现）预习报告

西南科技大学数字电子技术实验六（智力竞赛抢答器的设计及FPGA实现）预习报告

一、计算/设计过程 说明&#xff1a;本实验是验证性实验&#xff0c;计算预测验证结果。是设计性实验一定要从系统指标计算出元件参数过程&#xff0c;越详细越好。用公式输入法完成相关公式内容&#xff0c;不得贴手写图片。&#xff08;注意&#xff1a;从抽象公式直接得出结…
阅读更多...
彻底解决公网ip无法访问服务器的问题

彻底解决公网ip无法访问服务器的问题

用服务器的公网ip访问突然提示页面无法访问了&#xff0c;之前还是ok的&#xff1a; 解决方案&#xff1a; 步骤1. 检查云服务器的安全组规则是否有添加80端口映射&#xff0c;如果没有需要手动添加&#xff0c;否则不能使用公网访问&#xff0c;检查了一下是有的&#xff1…
阅读更多...
陵园殡仪馆网站建设的效果如何

陵园殡仪馆网站建设的效果如何

陵园墓地的需求度众多周知非常高&#xff0c;无论墓地坑位咨询还是事项/环境展示、资料预览等都是常见事项&#xff0c;由于行业的特殊性&#xff0c;对正常客户来说&#xff0c;并不会知悉各个事项、价格、服务、流程等内容。 而对企业来说&#xff0c;也有获客、品牌扩张等需…
阅读更多...
TCP/IP详解——网络基本概念

TCP/IP详解——网络基本概念

文章目录 一、网络基本概念1. OSI 7层模型1.1 每层对应的协议1.2 每层涉及的设备1.2.1 物理层设备1.2.2 数据链路层设备1.2.3 网络层设备1.2.4 传输层设备1.2.5 交换机和路由器的应用1.2.6 问题 2. TCP/IP 4层模型3. 物理层传输介质3.1 冲突域 4. 数据链路层4.1 以太网帧结构4.…
阅读更多...
Ubuntu设置kubelet启动脚本关闭swap分区

Ubuntu设置kubelet启动脚本关闭swap分区

查看swap分区 swapon -s打开swap分区 swapon -a查看/etc/fstab下所有固化的swap分区&#xff0c;注释 vi /etc/fstab修改kubelet.conf文件 vi /etc/systemd/system/kubelet.service.d/10-kubeadm.conf添加 ExecStartPre/sbin/swapoff -a生效 systemctl daemon-reload sys…
阅读更多...
挑战52天学小猪佩奇笔记--day19

挑战52天学小猪佩奇笔记--day19

52天学完小猪佩奇--day19 ​【本文说明】 本文内容来源于对B站UP 脑洞部长 的系列视频 挑战52天背完小猪佩奇----day19 的视频内容总结&#xff0c;方便复习。强烈建议大家去关注一波UP&#xff0c;配合UP视频学习。 day19的主题&#xff1a;新鞋子 人物对话&#xff1a; 语境…
阅读更多...
最新文章

Copyright @ 2022~2023