component-Echarts柱状图堆叠图与折线图的实现

1.效果 

2.​​​​​代码 

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts 实例</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- ECharts准备(宽高)的Dom -->
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {// 柱子颜色,几个柱子可设置几个颜色color: ['green', 'red','yellow'], // 提示tooltip: {trigger: 'axis',axisPointer: {type: 'none',// 设置背景颜色为白色半透明label: {backgroundColor: 'rgba(255, 255, 255, 0.7)', }}},// 标记legend: {top: 8,itemWidth: 10,itemHeight: 10,data: ['进度1','进度2','进度3', '相差率']  },grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},// 横向坐标xAxis: [{type: 'category',axisLabel: {color: '#999999',},axisLine: {show: false},axisTick: {show: false},boundaryGap: ['20%', '20%'],data:  ['滴滴', '快快', '哟哟', '耶耶', '狗狗']}],// 竖向坐标显示yAxis: [{type: 'value',name: '进度(%)',nameTextStyle: {color: '#999999',},// splitLine:{show: false},//去除网格线//设置轴线样式axisLine: {show: false},// 定制坐标轴上刻度线的样式axisTick: {show: false},// 坐标轴上标签的样式axisLabel: {margin: 2,interval: 15,color: '#999999',}}],series: [{name: '进度1',type: 'bar', // 这个是柱状图的类型,设置成这个就是柱状图barWidth: 20, // 柱子的宽度,设置一个就行了,别的也会采用这个宽度stack: 'Ad', // 设置这个就会成为堆叠柱状图data:  [20, 4, 15, 3, 30]},{name: '进度2',type: 'bar',// stack 属性都设置为 'stack',表示这三个个系列将会堆叠在一起显示stack: 'Ad',data: [0, 20, 50, 30, 23]},{name: '进度3',type: 'bar',stack: 'Ad',data: [0, 60, 20, 3, 30]},{name: '相差率',type: 'line',color:['#4da6ff'],  //折线条的颜色// smooth 是折线图系列中的一个属性,用于设置折线的平滑程度。当 smooth 设置为 true 时,折线会变得更加平滑;当设置为 false 时,折线会保持直线。smooth: true,yAxisIndex: 0,// itemStyle 是用于设置图表数据项样式的属性itemStyle: {shadowBlur: 2},data:  [0, 40, 60, 90, 15, 25, 35, 10, 14, 12, 15,15]},]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>
</body>
</html>

 

 

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

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

相关文章

探索存内计算—基于 SRAM 的存内计算与基于 MRAM 的存算一体的探究

CSDN存内社区招募&#xff1a;https://bbs.csdn.net/forums/computinginmemory 首个存内计算开发者社区&#xff0c;现0门槛新人加入&#xff0c;发文享积分兑超值礼品&#xff1b; 存内计算先锋/大使在社区投稿&#xff0c;可获得双倍积分&#xff0c;以及社区精选流量推送&a…

sql篇-内连接-左连接-右连接

内连接&#xff1a;表1 inner join 表2 on 条件 inner join join&#xff08;简写&#xff09; 查找&#xff1a;满足 匹配两个表条件的记录&#xff1a;student.s_id s.s_id(不匹配的记录不筛选) select * from student inner join score s on student.s_id s.s_id; 查询…

找第三方软件测评多久能拿到报告

随着软件市场的快速发展&#xff0c;用户对软件质量、性能和安全性的要求也越来越高。为了满足这些需求&#xff0c;许多企业和开发者选择寻求第三方软件测评机构的帮助。那么&#xff0c;找第三方软件测评多久能拿到报告呢&#xff1f;本文将从多个方面为您解析这一问题。 一…

【C++核心】面向对象的三大特性

面向对象的三大特性 一、封装性1. 封装性的意义1.1 表现事物1.2 权限控制1.3 成员属性设置为私有 2. 封装性的衍生知识2.1 struct和class区别2.2 友元2.2.1 全局函数做友元2.2.2 类做友元2.2.3 成员函数做友元 二、继承性1. 继承的语法2. 继承方式3. 继承中的对象模型3.1 说明3…

鸿蒙Next和鸿蒙4.0开发者如何选择

目录 一、 开头一句话重点落在鸿蒙原生开发&#xff0c;也就是ArkUI、Ability、ArkTS、ArkWeb、ArkData等。不管将来是鸿蒙Next2.0或者鸿蒙6.0都游刃有余。 二、 鸿蒙4.0与鸿蒙Next的共性共性概述详细分析总结 三、HarmonyOS Next与HarmonyOS 4的主要区别内核与兼容性设备与应用…

智能电视/盒子长文字输入困难?手把手教您解决这个难题!(电视盒子跨屏输入/打字,亲测有效!)

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 解决方案 📒📝 方法一📝 方法二🎈 获取方式 🎈⚓️ 相关链接 ⚓️📖 介绍 📖 在使用智能电视/电视盒子的时候,会遇到这样一个场景:需要输入一个很长的网址,或者是想要粘贴一段很长的文字。如何使用遥控器要完成…

sqli-labs-master(Less1--Less5)

Sql-labs-master通关攻略_sqli-labs-master 全部通关-CSDN博客 sqli-labs-master靶场搭建&#xff0c;1-10关详解-CSDN博客 小白勇闯sqli-labs-master1-22关_sqlilabs第22关-CSDN博客 搭建靶场 靶场&#xff1a; GitHub - Audi-1/sqli-labs: SQLI labs to test error base…

浅谈成为程序员后我明白的道理

当我成为程序员后&#xff0c;我明白了以下几点&#xff1a; 编程是一门持续学习的技能&#xff1a;作为程序员&#xff0c;我意识到编程是一个不断发展和变化的领域。新的编程语言、框架和技术不断出现&#xff0c;需要不断学习和适应。我意识到要持续学习新的知识和技能&…

机器学习—特征预处理和降维(四)

什么是特征预处理&#xff1f; 通过一些转换函数将特征数据转换成更加适合算法模型的特征数据过程 1包含内容 数值型数据的无量纲化&#xff1a; 归一化标准化 2特征预处理API sklearn. preprocessing为什么要进行归一化 or 标准化&#xff1f; 特征的单位或者大小相差较大…

学习了解大模型的四大缺陷

由中国人工智能学会主办的第十三届吴文俊人工智能科学技术奖颁奖典礼暨2023中国人工智能产业年会于2024年4月14日闭幕。 会上&#xff0c;中国工程院院士、同济大学校长郑庆华认为&#xff0c;大模型已经成为当前人工智能的巅峰&#xff0c;大模型之所以强&#xff0c;是依托了…

请警惕,这10本期刊已被SCI剔除,部分涉嫌灌水

科睿唯安于4月15日更新了SCIE、SSCI、AHCI、ESCI四大数据库最新收录期刊目录。 2024年第一版——2024年1月24日更新 2024年第二版——2024年2月19日更新 2024年第三版——2024年3月18日更新 2024年第四版——2024年4月15日更新 本次目录中共收录期刊23368本。 【SCIE数据…

苹果开发初学者指南:Xcode 如何为运行的 App 添加环境变量(Environmental Variable)

概览 Xcode 15 在运行 SwiftUI 代码时突然报告如下警告&#xff1a; Error: this application, or a library it uses, has passed an invalid numeric value (NaN, or not-a-number) to CoreGraphics API and this value is being ignored. Please fix this problem. 不仅如此…

react之useState详解

1. 为什么要用useState&#xff1f; 它是React 16.8 的新特性&#xff0c;我们在React里面一般都是用Class去写组件&#xff0c;但是有时候会发现不用它更方便&#xff0c;但是问题来了&#xff1a;不用Class的时候&#xff0c;数据的状态改变如何存储呢&#xff1f;如果你用 …

数据结构-堆详解

堆 图片&#xff1a; 二叉堆的父节点为这个子树的最值。 如何维护它。 我们发现它是一棵二叉树&#xff0c;那就自然满足若父节点为 x x x 则左儿子节点为 x 2 x\times2 x2 右儿子为 x 2 1 x\times 2 1 x21 这是显然的&#xff0c;但如果写成指针或结构体就太麻烦了&…

Redis的特性与安装

回顾 Redis是一个在内存中存储数据的中间件&#xff0c;可以用来当数据库用&#xff0c;也可以作为缓存用(这里的缓存往往是对数据库缓存)。 中间件&#xff1a;和业务无关的服务&#xff0c;功能更加通用&#xff0c;如&#xff1a;数据库&#xff0c;缓存&#xff0c;消息队…

【笔试强训】Day1 --- 数字统计 + 两个数组的交集 + 点击消除

文章目录 1. 数字统计2. 两个数组的交集3. 点击消除 1. 数字统计 【链接】&#xff1a;数字统计 解题思路&#xff1a;模拟&#xff0c;利用数学知识&#xff0c;计算每个数字中2出现的个数。&#xff08;这里也可以将数字转换成字符串来统计字符’2’出现的个数&#xff09…

如何使用Flask搭建web程序框架并实现无公网IP远程访问本地程序

文章目录 前言1. 安装部署Flask并制作SayHello问答界面2. 安装Cpolar内网穿透3. 配置Flask的问答界面公网访问地址4. 公网远程访问Flask的问答界面 前言 Flask是一个Python编写的Web微框架&#xff0c;让我们可以使用Python语言快速实现一个网站或Web服务&#xff0c;本期教程…

bonding原理分析和问题排查

bonding原理 发送端&#xff1a; 使用网卡bond3模式&#xff08;广播模式BOND_MODE_BROADCAST&#xff09;将报文从两个网卡同时发出&#xff0c;无需修改报文。 接收端&#xff1a; 根据发送节点时间的链路通断状态&#xff0c;接收端设置一条线路为活动线&#xff0c;另一条…

免费泛域名SSL如何申请,和通配符有什么区别

-----让我们明确什么是泛域名。所谓泛域名&#xff0c;是指使用星号&#xff08;*&#xff09;作为子域名的占位符&#xff0c;它可以匹配任意子域名。-----而通配符在域名中&#xff0c;它可以出现在主域名的任何位置&#xff0c;它可以用于主域名和子域名的保护。 主要应用场…

XZ-Utils后门事件过程及启示

Part.01 背景 XZ-Utils&#xff08;曾经叫做LZMA Utils&#xff09;是一款开源的无损压缩命令行工具&#xff0c;是用C语言编写的跨平台工具&#xff0c;可以用于类Unix系统和Windows系统。在多数情况下&#xff0c;xz的压缩率要好过gzip和bzip2&#xff0c;解压速度也快过bz…