vue echarts 柱状图 堆叠柱状图

echarts堆叠柱状图(效果图在文章末尾)

1、默认只显示 月度的 数据,手动点击 legend 季度的 数据才会显示;
2、监听左侧菜单栏的宽度变化,图表宽度自适应展示

<template><div><div id="barChart" ref="barChartRef" style="width: 100%; height: 450px"></div></div>
</template><script>
import * as echarts from 'echarts';
export default {name: '',props: {},components: {},data () {return {chart: null,_thisForChart: null,_thisForWindow: null,}},created() {},mounted() {this.$nextTick(() => {this.initBarChart()this.addEventListenerToSidebarContainer(this)this.addEventListenerToWindowResize(this)})},beforeDestroy () {this.removeEventListenerToSidebarContainer()this.removeEventListenerToWindowResize()},computed: {},watch: {},methods: {initBarChart() {let xAxisData = ['2024-01','2024-02','2024-03','2024-04','2024-05','2024-06','2024-07','2024-08','2024-09','2024-10',] // X轴数据let mounthly = ['0.21','-0.45','0.77','0.58','-0.66','0.91','0.11','-0.44','0.52','0.33'] // 月度的let quarterlyData = ['0.71','-0.40','0.17','0.38','-0.16','0.61','0.90','0.21','-0.14','0.50',] // 季度的var chartDom = document.getElementById('barChart');this.chart = echarts.init(chartDom);var emphasisStyle = {itemStyle: {shadowBlur: 10,shadowColor: 'rgba(0,0,0,0.1)'}};let option = {color: ['#6394F9','#F8BF20'],legend: {show: true,data: ['月度的', '季度的'],right: '1%',selected: {'季度的': false,} // 默认不显示月度的},grid: {left: '5%',right: '1%',bottom: '10%',},tooltip: {trigger: 'axis',backgroundColor: 'rgba( 0, 0, 0,0.7)',borderColor: 'rgba( 0, 0, 0,0.7)',formatter:function(params) {var str = params[0].name + '</br>'for(let item of params) {str = `<span style='color: #fff;'>${str}</span><div style='display:flex;align-items:center;justify-content:space-between;'><span>${item.marker}<span style='color: #fff;'>${item.seriesName}</span></span>&nbsp;&nbsp;&nbsp;&nbsp;<span style='color: #fff;'>${item.value}%</span></div>`}return str;}},xAxis: {data: xAxisData,name: '',axisLine: { onZero: false },splitLine: { show: false },splitArea: { show: false }},yAxis: {splitLine: {lineStyle: {type: 'solid',}},axisLabel: {show: true,formatter: (value) => {return `${value.toFixed(2)}%`}},},series: [{name: '月度的',type: 'bar',stack: 'one',// emphasis: emphasisStyle,// barWidth: '60%', // 设置柱宽为系列宽度的data: mounthly,},{name: '季度的',type: 'bar',stack: 'one',// emphasis: emphasisStyle,// barWidth: '60%', // 设置柱宽为系列宽度的data: quarterlyData,}]}this.chart.setOption(option,true);},// 监听侧边栏导航的宽度发生变化addEventListenerToSidebarContainer(_this) {let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];this._thisForChart = _this;sidebarContainer &&sidebarContainer.addEventListener("transitionend", this.sidebarResizeHandler);},removeEventListenerToSidebarContainer() {let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];this._thisForChart = nullsidebarContainer &&sidebarContainer.removeEventListener("transitionend", this.sidebarResizeHandler);},sidebarResizeHandler(e) {if (e.propertyName === "width") {this._thisForChart.chart.resize();}},// window 的尺寸发生变化的时候 会执行图表的resizeaddEventListenerToWindowResize(_this) {this._thisForWindow = _this;window.addEventListener("resize", this.windowResizeHandler);},removeEventListenerToWindowResize(_this) {this. _thisForWindow = nullwindow.removeEventListener("resize", this.windowResizeHandler);},windowResizeHandler(e) {this._thisForWindow.chart.resize();},},}
</script><style lang="scss" scoped></style>

展示效果图:
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

优雅实现uniapp返回上一页传参

在移动端应用中&#xff0c;表单设置组件往往作为独立的页面层级存在&#xff0c;以实现如时间选择等复杂功能。当用户在该组件页面内选定特定时间后&#xff0c;如何将这一选择结果高效、有序地传递回原页面&#xff0c;成为一个颇具挑战性的任务。尽管可以借助Vuex进行全局状…

构建数字化银行:现代化总架构探究

随着科技的迅速发展和用户需求的不断变化&#xff0c;传统银行业正迎来一场数字化转型的浪潮。在这个数字化时代&#xff0c;银行需要构建现代化的总架构&#xff0c;以适应快速变化的市场环境和客户需求。本文将深入探讨数字化银行的总架构设计理念、关键技术以及实践经验&…

【Python】使用 argparse 来加载yml文件的内容 - 2

继续上一节&#xff1a;【Python】YAML&#xff08;.yml&#xff09;文件简介以及python示例 - 1 使用 argparse 模块来读取 .yml 文件并不是直接由 argparse 完成的&#xff0c;但可以使用 argparse 来处理命令行参数&#xff0c;使得用户能够指定 .yml 配置文件的路径&#…

乘数而上,创邻科技入选2024数商典型应用场景“乘数榜”

4月18日&#xff0c;由浙江省科学技术协会指导的2024未来数商大会在杭州成功举办。本次大会以“场景突破 乘数而上”为主题&#xff0c;国际国内数商共聚未来科技城学术交流中心&#xff0c;聚焦数据要素市场的制度创新、数据治理、场景应用与生态构建等话题展开研讨。 大会现…

软件需求管理规程(Word原件2024)

软件开发人员及用户往往容易忽略信息沟通&#xff0c;这导致软件开发出来后不能很好地满足用户的需要&#xff0c;从而造成返工。而返工不仅在技术上给开发人员带来巨大的麻烦&#xff0c;造成人力、物力的浪费&#xff0c;而且软件的性能也深受影响。所以在软件项目开发周期的…

村集体建设用地,开发乡村旅游项目,土地如何审批?

以村集体建设用地,开发乡村旅游项目,土地如何审批? 乡村&#xff0c;作为承载乡村旅游产业的载体&#xff0c;在乡村振兴中扮演着非常重要的角色。 项目的落地&#xff0c;可靠的土地是必要的前提。集体建设用地如何审批&#xff1f;农转非又需要什么样的流程&#xff0c;具体…

StarRocks x Paimon 构建极速实时湖仓分析架构实践

Paimon 介绍 Apache Paimon 是新一代的湖格式&#xff0c;可以使用 Flink 和 Spark 构建实时 Lakehouse 架构&#xff0c;以进行流式处理和批处理操作。Paimon 创新性地使用 LSM&#xff08;日志结构合并树&#xff09;结构&#xff0c;将实时流式更新引入 Lakehouse 架构中。 …

什么ISP是住宅IP,和普通IP有什么区别?

ISP&#xff08;Internet Service Provider&#xff09;即互联网服务提供商&#xff0c;是向广大用户综合提供互联网接入业务、信息业务和增值业务的电信运营商。住宅IP&#xff0c;也称为家庭IP&#xff0c;是指由ISP分配给家庭或个人用户的IP地址。这些IP地址是真实的&#x…

Kotlin基础​​

数据类型 定义变量 var表示定义变量&#xff0c;可以自动推导变量类型&#xff0c;所以Int可以不用写。 定义常量 条件语句 if表达式可以返回值&#xff0c;该值一般写在if里的最后一行 类似switch的用法 区间 循环 a是标签&#xff0c;可以直接break到标签的位置&#xf…

【JVM】从i++到JVM栈帧

【JVM】从i到JVM栈帧 本篇博客将用两个代码例子&#xff0c;简单认识一下JVM与栈帧结构以及其作用 从i与i说起 先不急着看i和i&#xff0c;我们来看看JVM虚拟机&#xff08;请看VCR.JPG&#xff09; 我们初学JAVA的时候一定都听到过JAVA“跨平台”的特性&#xff0c;也就是…

18 JavaScript学习:错误

JavaScript错误 JavaScript错误通常指的是在编写JavaScript代码时发生的错误。这些错误可能是语法错误、运行时错误或逻辑错误。以下是对这些错误的一些常见分类和解释&#xff1a; 语法错误&#xff1a; 这类错误发生在代码编写阶段&#xff0c;通常是由于代码不符合JavaScrip…

Linux常用指令001

实验案例 创建一个和你名字同名的用户 在当前目录下创建名称为 1212的目录 进入到 1212 目录中 创建 a~d 目录 创建 1~10.txt 文件&#xff0c;如下 备份 创建一个和 1212 同一级目录的新目录 1313 将所有的文件和目录备份到 1313 目录中 在 1313目录中&#xff0c;查看…

小程序中如何快速给分类添加商品

​快速在分类下面上传商品&#xff0c;并且能够设置商品顺序&#xff0c;关系到运营效率的高低。下面就具体介绍如何快速在某个分类下面设置商品。 一、在商品管理处&#xff0c;查询某个分类下面的商品。 进入小程序管理员后台->商品管理&#xff0c;点击分类输入框&…

4月26日划分字母区间+合并区间

736.划分字母区间 给你一个字符串 s 。我们要把这个字符串划分为尽可能多的片段&#xff0c;同一字母最多出现在一个片段中。 注意&#xff0c;划分结果需要满足&#xff1a;将所有划分结果按顺序连接&#xff0c;得到的字符串仍然是 s 。 返回一个表示每个字符串片段的长度…

Xilinx 7系列中clock IP核通过AXI4-Lite接口实现动态重新配置

当选择了动态重配置&#xff08;Dynamic Reconfiguration&#xff09;选项时&#xff0c;AXI4-Lite接口将默认被选中用于重新配置时钟组件。动态重新配置可以通过AXI4-Lite接口实现了Clocking Wizard IP核的时钟组件MMCM/PLL的动态重新配置。 如果需要直接访问MMCM/PLL的DRP寄…

python 学习笔记24 图片视频修复

这个是python 学习笔记18 GFPGAN人脸(图片)修复_nameerror: name fused_act_ext is not defined-CSDN博客 的后续。 gfpgan衍生出了个Real-ESRGAN&#xff0c;这个更灵活并且能修复一般性图片以及动画&#xff0c;简单上手无门槛。链接如下&#xff1a; Real-ESRGAN/README_…

基于LSTM算法实现交通流量预测(Pytorch版)

算法介绍 LSTM&#xff08;Long Short-Term Memory&#xff09;算法是一种特殊设计的循环神经网络&#xff08;RNN, Recurrent Neural Network&#xff09;&#xff0c;专为有效地处理和建模序列数据中的长期依赖关系而开发。由于传统RNN在处理长序列时容易遇到梯度消失和梯度…

初创型或成长型的企业更需要敏捷

朋友们&#xff0c;今天咱们来侃侃为什么我们这些初创公司或者正在努力壮大的公司特别需要敏捷这个秘密武器。咱们通常会遇到几个现象一是大公司病&#xff1b;二是小作坊&#xff1b;这几个现象并不可怕&#xff0c;可怕的是小公司大公司病附体&#xff0c;大公司小作坊模式&a…

区块链技术在知识产权保护中的革命性应用

随着知识经济的崛起&#xff0c;知识产权保护变得越来越重要。然而&#xff0c;传统的知识产权保护方式存在着一些缺陷&#xff0c;如容易被篡改、难以确保权利人的权益等。区块链技术作为一种去中心化、安全可信的分布式账本技术&#xff0c;为知识产权保护提供了全新的解决方…

Linux驱动开发——(七)Linux阻塞和非阻塞IO

目录 一、阻塞和非阻塞IO简介 二、等待队列 2.1 等待队列头 2.2 等待队列项 2.3 将队列项添加/移除等待队列头 2.4 等待唤醒 2.5 等待事件 三、轮询 四、驱动代码 4.1 阻塞IO 4.2 非阻塞IO 一、阻塞和非阻塞IO简介 IO指的是Input/Output&#xff0c;也就是输入/输…