微网站中定位功能怎么做的,定制网络流量监控软件,盘锦网络推广,网站建设 管理系统开发问题描述 使用echarts折线图和柱状图展示数据时#xff0c;如果数据差异值较大#xff0c;会导致显示图形差异过大#xff0c;图表不美观。 如这一组数据[2000000, 200, 0.1, 20, 0, -10, -3000]#xff0c;渲染出来的效果如下图#xff1a; 可以看到由于最大值和最小值差…问题描述 使用echarts折线图和柱状图展示数据时如果数据差异值较大会导致显示图形差异过大图表不美观。 如这一组数据[2000000, 200, 0.1, 20, 0, -10, -3000]渲染出来的效果如下图 可以看到由于最大值和最小值差异过大导致过小的值柱子显示不出来数据的波动趋势不明显。 当前需要解决的问题是如何体现数据差异性让小数值柱子也能显示出来。 解决方案 使用对数轴yAxis. type“log”)适用于对数数据可以解决数据差异过大的问题。但对数轴只适用于data0的情况。 如数据barDatas [2000000, 200, 0.1, 20, 3,3, 3000] 如果对数轴中的数组数据出现0或者负数情况就会造成错误渲染。 试了很多办法都无法解决这个问题最后采取了多个grid多轴的办法。
可以通过grid来划分多个网格区域然后让正数和负数柱状图分别在在不同的区域展现。 如const barDatas [2000000, 200, 0.1, 20, 0, -10, -3000] 流程展示 将barDatas数组拆分为正数数组负数数组 设置三个grid分别为用于展示正数负数数据以及底部X轴 正负数数据网格区域y轴为yAxis. type“log”X轴网格区数数据区域yAxis. type“value” 正数柱状图series.data只展示大于0的数据其余为nullbarDatas.map(item item 0 ? item : null); 负数柱状图series.data只展示小于0的数据并展示为绝对值其余为nullbarDatas.map(item item 0 ? Math.abs(item): null) 设置负数的y轴yAxis.inversetrue让Y轴绕X轴上下翻转并配置y轴标签显示yAxis.axisLabel.formatter(val) val 1 ? 0 : -${val}
其中要解决的问题是 1解决起始0对齐的问题 因为对数轴的数据不能为0所以需要设置上下yAxis的min为1再通过yAxis.axisLabel.formatter将y轴的1改为0。 2小于1的数据柱子无高度。 需要设置barMinHeight最小高度同时改造小于1的数为1.01
这种方式能很好的解决数据差异过大的问题。 效果图附上
代码附上
!DOCTYPE html
html langen styleheight: 100%headmeta charsetutf-8
/head
script typetext/javascript srchttps://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js/scriptbody styleheight: 100%; margin: 0div idcontainer stylewidth: 50%;height: 50%;border: 1px solid red;margin: 30px;/divscript typetext/javascriptvar dom document.getElementById(container);var myChart echarts.init(dom, null, {renderer: canvas,useDirtyRect: false});var app {};var option;// const barDatas [1000000, 20000000, 0.1, 20, 0, -10, -3000];// const barDatas [200000, -100];const barDatas [2000000, 200, 0.1, 20, 0, -10, -3000]option {color: [#3398DB],tooltip: {trigger: axis,axisPointer: {type: shadow},formatter: (params) {const { dataIndex } params[0]return ${城市${dataIndex 1}}${barDatas[dataIndex]}}},grid: [{right: 20,left: 80,top: 30,bottom: 50%,containLabel: false,}, {right: 20,left: 80,top: 50%,bottom: 30,containLabel: false,show: false}, {right: 20,left: 80,top: 50%,bottom: 30,containLabel: false,show: false}],xAxis: [{type: category,gridIndex: 0,show: false,},{type: category,show: false,gridIndex: 1,},{type: category,interval: 0,gridIndex: 2,data: barDatas.map((item, index) 城市${index 1})},],yAxis: [{type: log,gridIndex: 0,min: 1, // 设置y轴最小值axisLabel: {formatter: (val) val 1 ? 0 : val}},{type: log,gridIndex: 1,inverse: true, //设置反向坐标让Y轴绕X轴上下翻转min: 1, // 设置y轴最小值axisLabel: {formatter: (val) val 1 ? 0 : -${val}}},{type: value,gridIndex: 2,show: false,},],series: [{name: 正数,xAxisIndex: 0,yAxisIndex: 0,type: bar,data: barDatas.map(item item 0 ? item 1 ? item : 1.01 : null), // 正数柱状图series.data只展示大于0的数据barMinHeight: 1.5,// 最小高度},{name: 负数,type: bar,xAxisIndex: 1,yAxisIndex: 1,data: barDatas.map(item item 0 ? Math.abs(item) 1 ? Math.abs(item) : 1.01 : null), // 负数柱状图eries.data只展示小于0的数据barMinHeight: 1.5, // 最小高度},{name: x轴,xAxisIndex: 2,yAxisIndex: 2,type: bar,show: false,data: barDatas.map(item null),},],};if (option typeof option object) {myChart.setOption(option);}window.addEventListener(resize, myChart.resize);/script
/body/html
