echarts条形图添加滚动条

效果展示:
在这里插入图片描述
测试数据:

taskList:[{majorDeptName:'测试',finishCount:54,notFinishCount:21},
{majorDeptName:'测试',finishCount:54,notFinishCount:21},
{majorDeptName:'测试',finishCount:54,notFinishCount:21},
{majorDeptName:'测试',finishCount:54,notFinishCount:21},
{majorDeptName:'测试',finishCount:54,notFinishCount:41},
{majorDeptName:'测试',finishCount:54,notFinishCount:41},
{majorDeptName:'测试',finishCount:54,notFinishCount:41},
{majorDeptName:'测试',finishCount:54,notFinishCount:41},
{majorDeptName:'测试',finishCount:54,notFinishCount:41},]

代码如下:

   initBarchart(){this.barChart = this.$echarts.init(this.$refs.barChart);let finishData = [];let unFinishData = []let chartName = [];if (  this.taskList && this.taskList.length > 0) {this.taskList.forEach(item => {chartName.push(item.majorDeptName)  finishData.push(item.finishCount)unFinishData.push(item.notFinishCount)})}let max = Math.max.apply(null,finishData.concat(unFinishData));let emptyData = finishData.map(function(v, i) {let item = {value: max,label: {   formatter: '{a|' + v + '}',position: 'right',rich: {a: {color:'#BFF4FF',fontSize:14,padding:[5, 10]}}}}return item});let emptyData2 = unFinishData.map(function(v, i) {let item = {value: max,label: {  formatter: '{a|' + v + '}',position: 'right',rich: {a: {color:'#BFF4FF',fontSize:14,padding:[5, 10]}}}}return item});
const barGap = '80%'let option = {tooltip: {show: true,trigger: 'item',},legend: {data: ['已完成','未完成'],right:'5%',//  itemWidth:15, textStyle:{color:'#fff'},},grid: {top: '10%',right: '15%',left: '10%',bottom: '5%',containLabel: true    },xAxis: [{type : 'value',position: 'top',name: '/个',axisLabel:{      //坐标轴字体颜色show:false,},axisLine:{show:false,lineStyle: {color: "#218BA0",}},axisTick:{       //y轴刻度线show:false},splitLine:{    //网格show: false,},max: function(value) {return value.max},}],yAxis: [{type: 'category',data:chartName,inverse: true,axisTick:{       //y轴刻度线show:false,},axisLabel: {formatter: '{value}',color: '#218BA0',fontSize:14},axisLine: {show:false,},splitLine: {show:false},},{type: "category",name: "",axisTick: {show: false,},splitLine: {show: false},axisLabel: {show: false,},axisLine: {show: false},inverse: true,data: chartName}],series: [{type: 'bar',show: true,barWidth: '18%',yAxisIndex: 0,barGap,silent:true,itemStyle: {normal: {color: '#11353d',}},label: {show:true,},data: emptyData},{show: true,type: 'bar',barGap,yAxisIndex: 1,barWidth: '18%',name:'已完成',z: 2,label: {show: false,},itemStyle: {normal: {color: '#03bae2',barBorderRadius: [0,0],}},data: finishData,},{type: 'bar',show: true,           barWidth: '18%',barGap,yAxisIndex: 0,silent:true,itemStyle: {normal: {color: '#11353d',barBorderRadius: [0,0],}},label: {show:true,},data: emptyData2},{show: true,type: 'bar',barWidth: '18%',barGap,yAxisIndex: 1,name:'未完成',z: 2,label: {show: false,},itemStyle: {normal: {color:'#e27903' ,barBorderRadius: [0,0],}},data: unFinishData,}],dataZoom: [{yAxisIndex:[0,1],//这里是从X轴的0刻度开始show: false,//是否显示滑动条,不影响使用weight:2,type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件startValue: 0,endValue: 3, zoomOnMouseWheel: false,  // 关闭滚轮缩放moveOnMouseWheel: true, // 开启滚轮平移moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 },{yAxisIndex: [0,1],//这里是从X轴的0刻度开始show: false,//是否显示滑动条,不影响使用type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件fillerColor: "#0089d1", // 滚动条颜色borderColor: "rgba(17, 100, 210, 0.1)",zoomLock:true, // 是否只平移不缩放handleSize:10, // 两边手柄尺寸width:8,heigh:8,bottom: 2,backgroundColor: 'rgba(255,255,255,.4)',brushSelect:false,showDetail:false,showDataShadow:false}],};if (  this.taskList && this.taskList.length > 4) {option.dataZoom[0].show = trueoption.dataZoom[1].show = tru}this.barChart.setOption(option)},```

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

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

相关文章

机器学习 | 掌握 K-近邻算法 的理论实现和调优技巧

目录 初识K-近邻算法 距离度量 K值选择 kd树 数据集划分 特征预处理 莺尾花种类预测(实操) 交叉验证与网格搜索 初识K-近邻算法 K-近邻算法(K-Nearest Neighbor,KNN)是一种基本的分类和回归算法。它的基本思想是通过找出与新对象最近…

PhpStorm调试docker容器中的php项目

背景 已经通过docker容器启动了一个web服务&#xff0c;并在宿主机可以访问http://localhost:8080访问网页。 现在想使用phpstorm打断点调试代码。 方法 1. 容器内安装xdebug 进入容器 docker exec -it <container-name> bash为php安装xdebug拓展 apt install php8…

面试问答总结之ElasticSearch

文章目录 &#x1f412;个人主页&#x1f3c5;JavaEE系列专栏&#x1f4d6;前言&#xff1a;&#x1f380;ES中的专有名词与mysql对应一下&#x1f415;1.你了解ES吗&#xff1f;你是如何接触到ES&#xff1f;&#x1f415;2.你了解正向索引和倒排索引吗&#xff1f;&#x1f3…

TypeScript(六) 循环语句

1. TypeScript循环语句 1.1. 简述 有的时候&#xff0c;我们可能需要多次执行同一块代码。一般情况下&#xff0c;语句是按顺序执行的&#xff1a;函数中的第一个语句先执行&#xff0c;接着是第二个语句&#xff0c;依此类推。   循环语句允许我们多次执行一个语句或语句组…

C#需要学到什么程度才能做MES系统开发工作?

C#需要学到什么程度才能做MES系统开发工作&#xff1f; 在开始前我分享下我的经历&#xff0c;刚入行时遇到一个好公司和师父&#xff0c;给了我机会&#xff0c;两年时间从3k薪资涨到18k的&#xff0c; 我师父给了一些C#学习方法和资料&#xff0c;让我不断提升自己&#xff…

GNSS定位技术总结与PPP定位技术

1.统一观测值方程 2.PPP方程构建 站间单差方程如下&#xff1a; 同样的&#xff0c;设计矩阵也更加庞大&#xff1a; 站间单差消除了卫星轨道、卫星钟、电离层、对流层以及卫星端的伪距和载波硬件延迟的影响。但在PPP中&#xff0c;我们无法通过站间单差消除这些影响&#xff…

MySQL安全(二)SQL注入

一、概述&#xff1a; 1、介绍 SQL注入就是指Web应用程序对用户输入数据的合理性没有进行判断&#xff0c;前端传入后端的参数是攻击者可控制的&#xff0c;并且根据参数带入数据库查询&#xff0c;攻击者可以通过构造不同的SQL语句来对数据库进行任意查询。 2、SQL注入的条…

【Lazy ORM 整合druid 实现mysql监控】

Lazy ORM 整合druid 实现mysql监控 JDK 17 Lazy ORM框架地址 up、up欢迎start、issues 当前项目案例地址 框架版本描述spring-boot3.0.7springboot框架wu-framework-web1.2.2-JDK17-SNAPSHOTweb容器Lazy -ORM1.2.2-JDK17-SNAPSHOTORMmysql-connector-j8.0.33mysql驱动druid-…

四、ES集群安全策略设置 X-pack

本文主要是结合ES集群搭建时使用&#xff0c;并且适用于ES7.x以上版本 背景及安全策略方案对比 ES 7.x以下版本默认几乎没有任何安全策略&#xff0c;如果集群IP、端口被暴露&#xff0c;在可访问的情况下任何用户都可以对索引进行管理以及数据的增删改查等&#xff0c;基于此需…

如何使用docker快速安装Plik并实现固定公网地址远程访问

文章目录 推荐1. Docker部署Plik2. 本地访问Plik3. Linux安装Cpolar4. 配置Plik公网地址5. 远程访问Plik6. 固定Plik公网地址7. 固定地址访问Plik 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点…

GitCode|部分项目开源代码

1.EasyKeyboard 基于MFC的简单软键盘&#xff0c;使用vs2017开发 PangCoder / EasyKeyboard GitCode基于Windows平台的软键盘&#xff0c;使用VS2017开发&#xff0c;使用MFC框架https://gitcode.net/qq_36251561/easykeyboard 2.EncoderSimulator 基于WPF应用的编码器模拟工…

Acwing---792. 高精度减法

高精度减法 1.题目2.基本思想3.代码实现4.总结 1.题目 给定两个正整数&#xff08;不含前导 0&#xff09;&#xff0c;计算它们的差&#xff0c;计算结果可能为负数。 输入格式 共两行&#xff0c;每行包含一个整数。 输出格式 共一行&#xff0c;包含所求的差。 数据范围…

数论与图论

数论&#x1f388; 筛质数 最普通的筛法O(nlogn)&#xff1a; void get_primes2(){for(int i2;i<n;i){if(!st[i]) primes[cnt]i;//把素数存起来for(int ji;j<n;ji){//不管是合数还是质数&#xff0c;都用来筛掉后面它的倍数st[j]true;}} } 诶氏筛法 O(nloglogn)&#…

wordpress连接azure MySQL

申请了免费试用Azure mysql&#xff0c;机器名mysql8-wordpress.mysql.database.azure.com&#xff0c;修改wordpress配置 wp-config.php /** Database username */ define( DB_USER, myblog ); /** Database password */ define( DB_PASSWORD, password ); /** Database h…

Qt知识点总结

将枚举类型转换为字符串 这里使用的在网络编程中&#xff0c;获取socket状态并显示的时候&#xff0c;遇到的一个问题 #include <QMetaEnum>// 将枚举类型转换为字符串 QMetaEnum metaEnum QMetaEnum::fromType<QAbstractSocket::SocketState>(); const char *c…

计算机网络之NAT

NAT&#xff08;网络地址转换&#xff0c;Network Address Translation&#xff09;是一种网络技术&#xff0c;用于在一个网络与另一个网络之间重新映射IP地址。NAT最常见的应用是在家庭和小型办公室的路由器中&#xff0c;用于将私有&#xff08;内部&#xff09;IP地址转换为…

CCF-CSP 202312-1 仓库规划(Java、C++、Python)

文章目录 仓库规划问题描述输入格式输出格式样例输入样例输出子任务 满分代码JavaCPython 仓库规划 问题描述 西西艾弗岛上共有 n n n 个仓库, 依次编号为 1 ⋯ n 1 \cdots n 1⋯n 。每个仓库均有一个 m m m 维向量的位置编码, 用来表示仓库间的物流运转关系。 具体来说,…

centos7常用命令之安装插件1

虚拟机VM要卸载&#xff0c;在这记录下&#xff01;&#xff01;&#xff01; 1、关机、重启 init 0 关机 init 6 重启 2、docker 1.启动docker服务 systemctl start docker 2.查看是否docker启动成功 systemctl status docker 3.停止docker服务 systemctl stop docker #查看全…

ID3算法 决策树学习 Python实现

算法流程 输入&#xff1a;约束决策树生长参数&#xff08;最大深度&#xff0c;节点最小样本数&#xff0c;可选&#xff09;&#xff0c;训练集&#xff08;特征值离散或连续&#xff0c;标签离散&#xff09;。 输出&#xff1a;决策树。 过程&#xff1a;每次选择信息增益…

UDS诊断服务介绍之31服务(强控服务)

目录 一、功能描述 二、应用场景 三、31服务控制基本原理: 四、服务请求