当前位置: 首页 > news >正文

echarts实现双x轴并且分组滚动效果

var myChart = echarts.init(document.getElementById('allOutPut1'));var option = {legend: {itemHeight: 10, // 图例icon高度itemWidth: 16, // 图例icon宽度icon:'rect',//设置为矩形top:'2%',right:'10%',},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},textStyle: {fontSize: 12},},grid: { top: '10%',bottom: '28%' },xAxis: [{type: 'category',axisTick:{show: false},axisLine:{show: false},axisLabel:{align:'center'},data: ['水分', '酸度', '淀粉','水分', '酸度', '淀粉','水分', '酸度', '淀粉']},{type: 'category',position: 'bottom',offset: 18,axisPointer: {type: 'none'},axisTick:{show: false},axisLine:{show: false},axisLabel: {interval:0,align: 'center'},splitLine: {           // 新增代码,设置分隔线样式show: true,lineStyle: {type: 'dashed',color: '#999',width: 1}},data: ['2021-1轮', '2021-2轮', '2021-3轮']}],yAxis: {name:'%',type: 'value',},series: [{name: '低于工艺范围',type: 'bar',barWidth:'9%',xAxisIndex:0,color: '#569EF8',showBackground: true,backgroundStyle: {color: 'rgba(255, 255, 255, 0.5)'},itemStyle: {// 柱形图圆角,鼠标移上去效果,如果只是一个数字则说明四个参数全部设置为那么多normal: {// 柱形图圆角,初始化效果barBorderRadius: [15, 15, 0, 0]}},data: [113, 204, 210,113, 204, 210,113, 204, 210]},{name: '工艺要求范围',type: 'bar',barWidth:'9%',xAxisIndex:0,color:'#00FEC1',showBackground: true,backgroundStyle: {color: 'rgba(255, 255, 255, 0.5)'},itemStyle: {// 柱形图圆角,鼠标移上去效果,如果只是一个数字则说明四个参数全部设置为那么多normal: {// 柱形图圆角,初始化效果barBorderRadius: [15, 15, 0, 0]}},data: [193, 234, 310,193, 234, 310,193, 234, 310]},{name: '超出工艺范围',type: 'bar',barWidth:'9%',xAxisIndex:0,color:'#F3D46C',showBackground: true,backgroundStyle: {color: 'rgba(255, 255, 255, 0.5)'},itemStyle: {// 柱形图圆角,鼠标移上去效果,如果只是一个数字则说明四个参数全部设置为那么多normal: {// 柱形图圆角,初始化效果barBorderRadius: [15, 15, 0, 0]}},data: [182, 234, 290,182, 234, 290,182, 234, 290]},],dataZoom: [//给x轴设置滚动条{start:0,//默认为0end: 100,//默认为100type: 'slider',show: true,xAxisIndex: [0,1],handleSize: 0,//滑动条的 左右2个滑动条的大小height: 5,//组件高度left: 30, //左边的距离right: 60,//右边的距离bottom: 25,//右边的距离handleColor: '#ddd',//h滑动图标的颜色handleStyle: {borderColor: "#cacaca",borderWidth: "1",shadowBlur: 2,background: "#ddd",shadowColor: "#ddd",},fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{//给颜色设置渐变色 前面4个参数,给第一个设置1,第四个设置0 ,就是水平渐变//给第一个设置0,第四个设置1,就是垂直渐变offset: 0,color: '#E6E6E6'}, {offset: 1,color: '#E6E6E6'}]),backgroundColor: '#F8F8F8',//两边未选中的滑动条区域的颜色showDataShadow: false,//是否显示数据阴影 默认autoshowDetail: false,//即拖拽时候是否显示详细数值信息 默认truehandleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',filterMode: 'filter',},//下面这个属性是里面拖到{type: 'inside',show: true,xAxisIndex: [0],start: 0,//默认为1end: 100,//默认为100},]
}
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

相关文章:

echarts实现双x轴并且分组滚动效果

var myChart echarts.init(document.getElementById(allOutPut1));var option {legend: {itemHeight: 10, // 图例icon高度itemWidth: 16, // 图例icon宽度icon:rect,//设置为矩形top:2%,right:10%,},tooltip: {trigger: axis,axisPointer: {type: shadow},textStyle: {fontS…...

UE4 地形编辑基础知识 学习笔记

之前自己写过这样的功能,今天看到一个UE现成的 点击地形,选择样条 按住CTRL键点击屏幕中某一个点会在场景内生成一个这样的图标 再点两次,会生成B样条的绿线条 点击号再选择一个模型,会生成对应的链条状的mesh 拉高最远处的一个图…...

AcWing算法提高课-5.5.2最大公约数

宣传一下 算法提高课整理 CSDN个人主页:更好的阅读体验 原题链接 题目描述 给定整数 N N N,求 1 ≤ x , y ≤ N 1 \le x,y \le N 1≤x,y≤N 且 gcd ⁡ ( x , y ) \gcd(x,y) gcd(x,y) 为素数的数对 ( x , y ) (x,y) (x,y) 有多少对。 输入格式 输…...

Kubernetes-CKA考题详解

Kubernetes-CKA考题详解 考前须知:考试环境说明第一题:RBAC(4%)第二题:指定node设置为不可用(4%)第三题:升级kubernetes节点(7%)第四题:etcd备份还原(7%)第五题:创建NetworkPolicy(7%)第六题:创建svc(7%)第七题:创建ingress资源(7%)第八题:扩展deployme…...

不同版本.net引用同一个项目

项目文件.csproj文件内容如下&#xff1a; 重点是&#xff1a;不能有其他的 netstandard2;net40;net45;net46;net6 <Project Sdk"Microsoft.NET.Sdk"><PropertyGroup><TargetFrameworks>netstandard2;net40;net45;net46;net6</TargetFrame…...

软件开发企业SDL安全培训案例

1.背景 随着计算机技术的发展、internet及mobile应用的普遍使用,软件安全像功能、性能、稳定性一样是计算机系统的一个非常重要部分。没有安全的软件,任何美好的功能都是徒劳的,没有安全的软件,公司的机密数据、客户隐私、系统的可靠性都得不到保障.如何有效评估、开发安全、可…...

ide-eval-resetter jar包下载、源码、使用介绍

如果你在找ide-eval-resetter插件&#xff0c;这里告诉你&#xff0c;2021.3版本开始该插件正式失效。 如果你安装的JB产品版本低于2021.3版本&#xff0c;你确定要找ide-eval-resetter&#xff0c;下面提供相关链接希望对你有帮助。 ide-eval-resetter源码&#xff1a; Githu…...

数据压缩算法一览

文章首发地址 Huffman编码&#xff1a; Huffman编码是一种基于字符频率的无损压缩算法。它将出现频率较高的字符用较短的编码表示&#xff0c;出现频率较低的字符用较长的编码表示&#xff0c;从而实现压缩。Lempel-Ziv-Welch (LZW)&#xff1a; LZW是一种基于字典的无损压缩算…...

使用Rust开发命令行工具

生成二进制文件&#xff0c;将其扔到环境变量的path下即可~ 用rust打造实时天气命令行工具[1] 找到合适的API 使用该api[2] 如请求 api.openweathermap.org/data/2.5/weather?qBeijing&appidyour_key: { "coord": { "lon": 116.3972, "lat&quo…...

CentOS中Oracle11g进程有哪些

最近遇到Oracle数据库运行过程实例进程由于某种原因导致中止的问题&#xff0c;专门看了下正常Oracle数据库启动后的进程有哪些&#xff0c;查阅资料了解了下各进程的作用&#xff0c;记录如下。 oracle 3032 1 0 07:36 ? 00:00:00 ora_pmon_orcl oracle …...

WebRTC之FEC前向纠错协议

FEC前向纠错用于丢包恢复&#xff0c;对媒体包进行异或或其他算法生成冗余包进行发送。如果接收端出现丢包&#xff0c;可以通过冗余包恢复出原始的媒体包。FEC的代价是增加码率带宽&#xff0c;所以一般会根据网络状况、丢包率来动态调整FEC冗余系数&#xff0c;也会结合NACK/…...

软件测试技术分享丨使用Postman搞定各种接口token实战

现在许多项目都使用jwt来实现用户登录和数据权限&#xff0c;校验过用户的用户名和密码后&#xff0c;会向用户响应一段经过加密的token&#xff0c;在这段token中可能储存了数据权限等&#xff0c;在后期的访问中&#xff0c;需要携带这段token&#xff0c;后台解析这段token才…...

GBU812-ASEMI逆变器专用整流桥GBU812

编辑&#xff1a;ll GBU812-ASEMI逆变器专用整流桥GBU812 型号&#xff1a;GBU812 品牌&#xff1a;ASEMI 芯片个数&#xff1a;4 封装&#xff1a;GBU-4 恢复时间&#xff1a;&#xff1e;50ns 工作温度&#xff1a;-55C~150C 浪涌电流&#xff1a;200A 正向电流&…...

D2007在64位Win7出现 delphi 2007 assertion failure thread32.cpp 的解决办法

Delphi2007 原来安装在Win7 下 运行正常&#xff0c; 自从升级到Win10 &#xff0c;新建工程运行然后关闭报错&#xff0c; 报错信息如下&#xff1a; --------------------------- bds.exe - bordbk105N.dll --------------------------- Assertion failure: "(!"S…...

windows10 docker 安装在D盘

win10安装docker后发现c盘空间急速减少&#xff0c;360管家查看发现images镜像安装在C盘&#xff0c;于是重装docker desktop以为在安装过程中能够选择&#xff0c;遗憾的是没有提供选择权限&#xff0c;默认直接就安装到了c盘。 desktop 迁移 百度得知可以将c盘的docker安装…...

Scikit-learn强化学习代码批注及相关练习

一、游戏介绍 木棒每保持平衡1个时间步&#xff0c;就得到1分。每一场游戏的最高得分为200分每一场游戏的结束条件为木棒倾斜角度大于41.8或者已经达到200分。最终获胜条件为最近100场游戏的平均得分高于195。代码中env.step&#xff08;&#xff09;&#xff0c;的返回值就分…...

执行jmeter端口不够用报错(Address not available)

执行jmeter端口不够用报错(Address not available) linux解决方案 // 增加本地端口范围 echo 1024 65000 > /proc/sys/net/ipv4/ip_local_port_range// 启用快速回收TIME_WAIT套接字 sudo sysctl -w net.ipv4.tcp_tw_recycle 1// 启用套接字的重用 sudo sysctl -w net.ipv4.…...

【Go Web 篇】从零开始:构建最简单的 Go 语言 Web 服务器

随着互联网的迅速发展&#xff0c;Web 服务器成为了连接世界的关键组件之一。而在现代编程语言中&#xff0c;Go 语言因其卓越的性能和并发能力而备受青睐。本篇博客将带你从零开始&#xff0c;一步步构建最简单的 Go 语言 Web 服务器&#xff0c;让你对 Go 语言的 Web 开发能力…...

Android系统-性能-优化概述

目录 引言&#xff1a; APP优化&#xff1a; 网络优化&#xff1a; 内存优化&#xff1a; 卡顿优化&#xff1a; 引言&#xff1a; 先大概对Android性能优化做一个简单分类和梳理。由于性能影响因素多&#xff0c;比如本文分类的APP&#xff0c;内存&#xff0c;网络&…...

用Cmake build OpenCV后,在VS中查看OpenCV源码的方法(环境VS2022+openCV4.8.0) Part II

用Cmake build OpenCV后&#xff0c;在VS中查看OpenCV源码的方法 Part II 用Cmake build OpenCV后&#xff0c;在VS中查看OpenCV源码的方法&#xff08;环境VS2022openCV4.8.0&#xff09; Part I_松下J27的博客-CSDN博客 在上一篇文章中&#xff0c;我用cmake成功的生成了ope…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

Kafka主题运维全指南:从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...