ECharts自定义Y轴间隔刻度，不均分配 |
您所在的位置：网站首页 › 如何调折线图的刻度间隔 › ECharts自定义Y轴间隔刻度，不均分配 |
ECharts自定义Y轴间隔刻度，不均分配
|
参考原文 Echarts绘制不均匀数据轴（y） 问题分析多组数据展示差距过大，在图表中数据小的贴X轴显示看不出来，造成图表不直观，先通过修改Y轴刻度，并进行不均自定义分配可以解决这个问题。详细就不叙述了，可以参考原文。 问题图表这种贴着地平线是我们不想看到的，因此需要改变Y轴刻度等分问题 可在ECharts中进行尝试 https://echarts.apache.org/examples/zh/editor.html?c=area-stack 以下均在ECharts操作，结果如图，数据差距很大的情况下仍可以有所展示 在ECharts中操作，代码未作封装，请自行封装。 //数据1 const emailData = [12, 13, 10, 34, 90, 130, 210]; //数据2 const adsData = [2200, 3300,1241,11232, 2900, 3300, 11310]; //数据3 const ssData = [10000, 5,121,832, 40, 6233, 310]; //x轴 const xzhou = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //定义数据间隔 const dataInterval = [0, 10, 30, 50, 200, 1000, 5000, 12000]; const emailData2 = []; for (var i = 0; i v v > emailData[i])); //console.log(emailData[i] + '--' + max_v); // 3.寻找 min_v 所在的下标 const index = dataInterval.findIndex((v) => v === min_v); //console.log(emailData[i] + '---' + index); // 4.计算该amount在y轴上应该展示的位置 const y_value = ((emailData[i] - min_v) / (max_v - min_v)) * 10 + index * 10; //console.log(emailData[i] + '----' + y_value); emailData2[i] = y_value; } //console.log(emailData2); const adsData2 = [] for (var i = 0; i v v > adsData[i])); // 3.寻找 min_v 所在的下标 const index = dataInterval.findIndex((v) => v === min_v); // 4.计算该adsData在y轴上应该展示的位置 const y_value = ((adsData[i] - min_v) / (max_v - min_v)) * 10 + index * 10; adsData2[i] = y_value; } const ssData2 = [] for (var i = 0; i v v > ssData[i])); // 3.寻找 min_v 所在的下标 const index = dataInterval.findIndex((v) => v === min_v); // 4.计算该amount在y轴上应该展示的位置 const y_value = ((ssData[i] - min_v) / (max_v - min_v)) * 10 + index * 10; ssData2[i] = y_value; } option = { title: { text: 'Stacked Area Chart' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }, formatter: (v) => { //console.log(v[0].dataIndex) //界面显示原数值 return ` ${xzhou[v[0].dataIndex]} Email：${emailData[v[0].dataIndex]} Union Ads：${adsData[v[0].dataIndex]} hello：${ssData[v[0].dataIndex]} `; } }, legend: { data: ['Email', 'Union Ads','hello'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, data: xzhou } ], yAxis: [ { type: 'value', axisLabel: { formatter: (v, i) => { if (i === 0) { v = '0'; } if (i === 1) { v = '10'; } if (i === 2) { v = '30'; } if (i === 3) { v = '50'; } if (i === 4) { v = '200'; } if (i === 5) { v = '1000'; } if (i === 6) { v = '5000'; } if (i === 7) { v = '12000'; } return v; } } } ], series: [ { name: 'Email', type: 'line', emphasis: { //隐藏其他数据 focus: 'series' }, data: emailData2 }, { name: 'Union Ads', type: 'line', emphasis: { focus: 'series' }, data: adsData2 }, { name: 'hello', type: 'line', emphasis: { focus: 'series' }, data: ssData2 } ] }; |
【本文地址】
今日新闻 |
推荐新闻 |