echarts图之 底部滚动横轴 缩放图形大小

    //折线图-堆叠面积图function pileLineChart(odata, dom){//放大缩小的代码startvar dataZoom = [],y2=40;if(odata.xData.length > 7){dataZoom = [{show: true,realtime: true,startValue:0, endValue:5,left:"center",top:"auto",right:"auto",                          bottom:20,},{type: 'inside',realtime: true,startValue:0,  endValue:5,   }]y2 = 78;}else{dataZoom = [];y2 = 40;}//放大缩小的代码end-下面还有var myChart = echarts.init(document.getElementById(dom));//console.log(odata)let oarr = []		oarr = odata.series.map(function(item){var data = [];data.push(0);for (var i = 0 ; i < item.data.length; i++) {data.push(item.data[i]);}return {name: item.name,type: 'line',stack: 'Total',barMinHeight: 0, //最小柱高barWidth: 14, // 柱宽度barMaxWidth: 100,// 最大柱宽度areaStyle: {},emphasis: {focus: 'series'},data: data}})var xData = [];xData.push('');for (var i = 0 ; i < odata.xData.length; i++) {xData.push(odata.xData[i]);}option = {tooltip: {trigger: 'axis',formatter: function(params) {//防止0点被点击let relVal = ''for (var prop in params) {if(params[prop].dataIndex == 0) {relVal = ''}else{relVal +=params[prop].marker +params[prop].seriesName +' : ' +params[prop].value +'<br/>';}            	}return relVal;},},title: {text: '人次',left: '20',textStyle:{color: '#999',fontSize: 12,fontWeight: 400}},color: ['#00bdff', '#4cf100', '#ffb500', '#e83928'],grid: {top: '30',left: '30',right: '20',bottom: '120',containLabel: false},dataZoom: dataZoom,//放大缩小的引用legend: {itemWidth:15,  itemHeight:15,  data: barChart.legendData,icon: 'roundRect',itemHeight: 8,textStyle: { //图例文字的样式color: '#999',fontSize: 12},left: 'center',bottom: 'bottom',},xAxis: [{type: 'category',boundaryGap: false,data: xData,nameTextStyle: {color: '#666', //x轴名称颜色fontSize: 10 //x轴名称字体大小},axisLabel: {color: '#666', //x轴刻度标签颜色rotate: 45,fontSize: 10, //y轴名称字体大小formatter: function (params){return filterFormatter(params)}},axisTick: {show: false //不显示刻度线},axisLine: {lineStyle: {color: '#999',width: 1, //这里是为了突出显示加上的  },symbol: ['none', 'arrow'],    //只在末端显示箭头symbolSize: [6, 10],//原来是[8, 16]symbolOffset:[0, 8],//箭头段移动8个像素},}],yAxis: [{type: 'value',nameTextStyle: {color: '#666', //y轴名称颜色fontSize: 10 //y轴名称字体大小},axisLabel: {color: '#666', //y轴刻度标签颜色fontSize: 10 //y轴名称字体大小},axisTick: {show: false //不显示刻度线},axisLine: {lineStyle: {color: '#999',width: 1, //这里是为了突出显示加上的  },symbol: ['none', 'arrow'],    //只在末端显示箭头symbolSize: [6, 10],//原来是[8, 16]symbolOffset:[0, 8],//箭头段移动8个像素},splitLine: {//网格线lineStyle: {type: "dotted", //设置网格线类型 dotted:虚线   solid:实线},show: true, //隐藏或显示},	                }],series: oarr}		      myChart.setOption(option, true);}//字数为8个超出就显示成点function filterFormatter(params){var index = 8;var newstr = '';for(var i = 0; i< params.length; i += index){var tmp = params.substring(i, i+index);newstr += tmp +'';}if( newstr.length > 8)return newstr.substring(0, 8) + '..';elsereturn '\n'+newstr;}

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

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

相关文章

SAAS版技术中台必备【智能Print打印】系统

今天给大家介绍一个&#xff0c;全网唯一智能打印系统。 系统特色&#xff1a; 1帮助企业&#xff0c;工业&#xff0c;连接多种打印设备管理&#xff1b; 2.跨系统连接打印设备&#xff0c;进行数据传输 3.打通企业内部所有系统打印功能 4.跨越技术壁垒&#xff1b;使用简…

主食罐头哪个牌子好?猫主食罐头品牌分享

进口的猫罐头在近期确实经历了一些困难。由于疫情的影响&#xff0c;许多货品无法正常进口&#xff1b;而最近禽流感的问题也对备受好评的德罐品牌造成了重大冲击。 然而&#xff0c;我们国内生产的猫罐头产品在这段时间展现出了出色的表现。我们推出了许多优质产品&#xff0…

生成器简述 - python 基础进阶知识点补全(一)

可迭代对象&#xff1a; 可以用于for ... in ..循环对对象都是可迭代对象&#xff0c;比如&#xff1a; list tuple dict set 可以迭代的对象就是可迭代对象&#xff0c;python 中一切都是对象&#xff0c;在这里主要说的是变量 a [1,2,3] b (1,2,3,) c "1234&q…

文献速递:多模态影像组学文献分享:生成一种多模态人工智能模型以区分甲状腺良性和恶性滤泡性肿瘤:概念验证研究

文献速递&#xff1a;多模态影像组学文献分享&#xff1a;生成一种多模态人工智能模型以区分甲状腺良性和恶性滤泡性肿瘤&#xff1a;概念验证研究 文献速递介绍 近年来&#xff0c;人工智能&#xff08;AI&#xff09;领域日益被探索&#xff0c;作为一种增强传统医学诊断和…

Failed to resolve org.junit.platform:junit-platform-launcher:1.9.3

springboot 跑 unit test 的时候&#xff0c;如果报错如题的话&#xff0c;可以更改idea 里的 Settings ——> HTTP Proxy 配置为&#xff1a;Auto-detect proxy settings

Google 发布最强大模型Gemini,能力与GPT-4相当

一、Gemini 介绍 Gemini 是一个多模式模型系列&#xff0c;在图像、音频、视频和文本领域展示了真正强大的功能。其中功能最强大的模型 Gemini Ultra 在 32 个基准测试中的 30 个中提升了最先进水平&#xff0c;其中包括 12 个流行文本和推理基准测试中的 10 个、9 个图像理解…

让工作更高效,那些不能错过的8款泳道图绘制工具

在现代企业的运营管理中&#xff0c;泳道图扮演了至关重要的角色。这种独特的图表工具以其直观、清晰的特点&#xff0c;帮助我们理解和改进复杂的工作流程&#xff0c;从而提升效率。本文将为你分享8款实用且高效的泳道图绘制工具&#xff0c;它们能够帮助你轻松创建出专业级别…

Java程序员,你掌握了多线程吗?【文末送书】

目录 摘要 01、多线程对于Java的意义 02、为什么Java工程师必须掌握多线程 03、Java多线程使用方式 04、如何学好Java多线程 参与方式&#x1f947; 推荐一个人工智能学习网站 https://www.captainbed.cn/bear 摘要 互联网的每一个角落&#xff0c;无论是大型电商平台的…

C语言内存函数讲解

目录 文章目录 内存函数针对的数据类型不确定可能是整型数据&#xff0c;字符数据&#xff0c;结构体数据...... memcpy的使用和模拟实现 memcpy的使用 memcpy打印字符数据 memcpy打印整型数据 memcpy的模拟实现 模拟实现的memcpy打印重叠情境 memmove的使用和模拟实现 memm…

为什么出海企业需要呼叫中心?

随着现代商业世界的发展&#xff0c;企业面临着越来越多的挑战和机遇。为了提高客户服务水平、客户满意度、企业形象和销售业绩&#xff0c;呼叫中心已成为越来越多企业的首选。那么&#xff0c;为什么出海企业需要呼叫中心呢&#xff1f; 1. 提高客户服务质量 首先&#xff…

Linux | tar,bc,uname指令

Linux | tar&#xff0c;bc&#xff0c; 文章目录 Linux | tar&#xff0c;bc&#xff0c;tar指令【重要】bc指令uname –r指令 tar指令【重要】 tar [-cxtzjvf] 文件与目录 … 参数&#xff1a; -c &#xff1a;建立一个压缩文件的参数指令(create 的意思)&#xff1b;-x &am…

为什么对中小企业来说,数字化转型很难?

引言 数字化转型对中小企业至关重要&#xff0c;然而&#xff0c;实施这一转型却充满挑战。中小企业面临着资源、技术、文化和安全方面的种种难题&#xff0c;这些困难限制了它们在数字化领域的发展和竞争力。这种挑战不仅影响企业内部运营&#xff0c;还直接影响其与客户和市…

中国的下一个风口:数字化!

——“中国的下一个风口是什么&#xff1f;数字化&#xff1f;你赞同吗&#xff1f;” ——“中国的下一个风口是不是‘数字化’&#xff0c;不敢妄下定论。” 但可以肯定的是&#xff0c;企业想站上未来产业的风口&#xff0c;“数字化”是必经之路。也就是说&#xff0c;数…

HarmonyOS 开发 Java 与 ArkTS 如何抉择?

本文详细分析 Java 与 ArkTS 在 HarmonyOS 开发过程的区别&#xff0c;力求解答学员的一些困惑。 何为 HarmonyOS&#xff1f; 在讨论语言的差异时&#xff0c;我们先了解下什么是 HarmonyOS。华为官方是这么解释 HarmonyOS 的&#xff1a; “鸿蒙操作系统”特指华为智能终端…

视频集中存储/智能分析融合云平台EasyCVR平台接入rtsp,突然断流是什么原因?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

Halcon 机械视觉 使用仿射变换 机械手实现孔位定位

要推算机械手平面坐标系A与相机平面坐标系B的关系&#xff0c;我们可以首先找到两个平面坐标系之间的平移量和旋转量。 平移量&#xff1a;选择一个公共的参考点&#xff0c;比如某个标志物&#xff0c;假设在坐标系A中的坐标为(Ax, Ay)&#xff0c;在坐标系B中的坐标为(Bx, B…

GD32F303移植RT-Thread

我的平台&#xff1a; 芯片&#xff1a;GD32F303CCT6 编译器&#xff1a;KEIL5 一、下载keil专用 RT-Thread 安装包 https://www.keil.arm.com/packs/ 。。。。 。。。。 二、准备一个干净的GD32F303裸机工程&#xff0c;我就增加了串口功能 三、开始移植 1.rt-thread系统…

Java网络编程——非阻塞通信

对于用ServerSocket以及Socket编写的服务器程序和客户程序&#xff0c;它们在运行过程中常常会阻塞。例如当一个线程执行ServerSocket的accept()方法时&#xff0c;假如没有客户连接&#xff0c;该线程就会一直等到有了客户连接才从accept()方法返回。再例如当线程执行Socket的…

Chart 5 性能优化概述

文章目录 前言5.1 可移植性5.2 优化梗概5.3 OpenCL 移植的初始评估5.4 将CPU代码移植到OpenCL GPU5.5 并行化GPU和CPU工作负载5.6 瓶颈分析5.6.1 识别瓶颈5.6.2 解决瓶颈 5.7 API层面性能优化5.7.1 API函数调用的正确安排5.7.2 使用基于事件驱动的pipeline5.7.3 内核编译和构建…

0基础学习云计算难吗?

很多人经常会问云计算是什么&#xff1f;云计算能干什么&#xff1f;学习云计算能做什么工作&#xff1f;其实我们有很多人并不知道云计算是什么&#xff0c;小知今天来给大家讲讲学习云计算能做什么。 中国的云计算行业目前正处于快速发展阶段&#xff0c;随着互联网和数字化…