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.hqwc.cn/news/255191.html

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

相关文章

前端笔记(四)Flex 布局

标准流 标准流也叫文档流&#xff0c;指的是标签在页面中默认的派不规则&#xff0c;例如&#xff1a;块元素独占一行&#xff0c;行内元素可以一行显示多个。 但是很多的网页布局都是块元素在一行中显示的&#xff0c;这时候就需要浮动和 Flex 布局&#xff0c;浮动只需要了解…

忘记PDF密码了,怎么办?

PDF文件有两种密码&#xff0c;一个打开密码、一个限制编辑密码&#xff0c;因为PDF文件设置了密码&#xff0c;那么打开、编辑PDF文件就会受到限制。忘记了PDF密码该如何解密&#xff1f; PDF和office一样&#xff0c;可以对文件进行加密&#xff0c;但是没有提供恢复密码的功…

[足式机器人]Part2 Dr. CAN学习笔记-Ch0-1矩阵的导数运算

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-Ch0-1矩阵的导数运算 1. 标量向量方程对向量求导&#xff0c;分母布局&#xff0c;分子布局1.1 标量方程对向量的导数1.2 向量方程对向量的导数 2. 案例分析&#xff0c;线性回归3. 矩阵求导的链…

如何在报表工具 FastReport Cloud 中使用 ClickHouse

FastReport Cloud 是一项云服务 (SaaS)&#xff0c;旨在为您的企业存储、编辑、构建和发送报告。您的整个团队可以从世界任何地方访问这些报告&#xff0c;并且无需创建自己的应用程序。 FastReport Cloud 试用&#xff08;qun&#xff1a;585577353&#xff09;https://chat8.…

(04730)串联电路与并联电路

04730电子技术基础 语雀&#xff08;完整笔记&#xff09; 这节图比较多&#xff0c;能够看懂图&#xff0c;理解图&#xff0c;清楚为什么这样等效很重要 分压分流公式是重点 电路等效的概念 二端网络 电路分析中&#xff0c;我们可以把一组相互联接的元件作为一个整体来…

重生奇迹mu武器镶嵌顺序

一&#xff0c;武器的镶嵌顺序&#xff1a; 雷冰火30%概率出现技能11 从上到下的镶嵌顺寻按照雷、冰、火镶嵌&#xff0c;就有30%的概率出现技能攻击力加11的幸运荧光属性。 从上到下的镶嵌顺寻按照火、冰、雷镶嵌&#xff0c;就有30%的概率出现攻击力加11的幸运荧光属性。 …

Git 如何撤回已 Push 的代码

在日常的开发中&#xff0c;我们经常使用Git来进行版本控制。有时候&#xff0c;我们可能会不小心将错误的代码 Push 到远程仓库&#xff0c;或者想要在本地回退到之前的某个版本重新开发。 或者像我一样&#xff0c;写了一些感觉以后很有用的优化方案push到线上&#xff0c;又…

C //例10.2 将一个磁盘文件中的信息复制到另一个磁盘文件中。

C程序设计 &#xff08;第四版&#xff09; 谭浩强 例10.2 例10.2 将一个磁盘文件中的信息复制到另一个磁盘文件中。 IDE工具&#xff1a;VS2010 Note: 使用不同的IDE工具可能有部分差异。 代码块 方法&#xff1a;使用指针&#xff0c;函数的模块化设计&#xff0c;动态分…

AI算力研究报告:智算供给格局分化国产化进程有望加速

今天分享的AI系列深度研究报告&#xff1a;《AI算力研究报告&#xff1a;智算供给格局分化国产化进程有望加速》。 &#xff08;报告出品方&#xff1a;华龙证券&#xff09; 报告共计&#xff1a;24页 1 大模型浪潮推动作用下,其力需求缺口将持续扩大 1.1 大模型发展对算力…

python爬虫零基础学习之简单流程示例

文章目录 爬虫基础爬虫流程常用库爬虫示例关于Python爬虫技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③Python小游戏源码五、面试资料六、Python兼职渠道 爬虫基础 网络爬…

19、XSS——HTTP协议安全

文章目录 一、Weak Session IDs(弱会话IDs)二、HTTP协议存在的安全问题三、HTTPS协议3.1 HTTP和HTTPS的区别3.2 SSL协议组成 一、Weak Session IDs(弱会话IDs) 当用户登录后&#xff0c;在服务器就会创建一个会话&#xff08;Session&#xff09;&#xff0c;叫做会话控制&…

共创共赢|美创科技获江苏移动2023DICT生态合作“产品共创奖”

12月6日&#xff0c;以“5G江山蓝 算网融百业 数智创未来”为主题的中国移动江苏公司2023DICT合作伙伴大会在南京成功举办。来自行业领军企业、科研院所等DICT产业核心力量的百余家单位代表参加本次大会&#xff0c;共话数实融合新趋势&#xff0c;共拓合作发展新空间。 作为生…