ECharts自定义Y轴间隔刻度，不均分配

最新推荐文章于 2024-05-08 13:49:58 发布

zjm0115

最新推荐文章于 2024-05-08 13:49:58 发布

阅读量4.5k

点赞数 2

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_71057938/article/details/127698775

版权

问题分析

多组数据展示差距过大，在图表中数据小的贴X轴显示看不出来，造成图表不直观，先通过修改Y轴刻度，并进行不均自定义分配可以解决这个问题。

如下图所示：

代码

在ECharts中操作，代码未作封装，请自行封装。

<body>
    <div style="width: 1200px ;height: 600px;" id="main"></div>
</body>

 <script>
var myChart = echarts.init(document.getElementById('main'));

//数据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 < emailData.length; i++) {
  //console.log(emailData[i])
  // 1.寻找在数据间隔里小于emailData的最大值
  const min_v = Math.max(...dataInterval.filter((v) => v <= emailData[i]));
  //console.log(emailData[i] + '-' + min_v);
  // 2.寻找在数据间隔里大于emailData的最小值
  const max_v = Math.min(...dataInterval.filter((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 < adsData.length; i++) {
  // 1.寻找在数据间隔里小于adsData的最大值
  const min_v = Math.max(...dataInterval.filter((v) => v <= adsData[i]));
  // 2.寻找在数据间隔里大于adsData的最小值
  const max_v = Math.min(...dataInterval.filter((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 < ssData.length; i++) {
  // 1.寻找在数据间隔里小于amount的最大值
  const min_v = Math.max(...dataInterval.filter((v) => v <= ssData[i]));
  // 2.寻找在数据间隔里大于amount的最小值
  const max_v = Math.min(...dataInterval.filter((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 `<div>
            <div>${xzhou[v[0].dataIndex]}</div>
            <div>Email：${emailData[v[0].dataIndex]}</div>
            <div>Union Ads：${adsData[v[0].dataIndex]}</div>
            <div>hello：${ssData[v[0].dataIndex]}</div>
            </div>`;
    }
  },
  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
    }
  ]
};
</script>

zjm0115

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
1
评论
ECharts自定义Y轴间隔刻度，不均分配

多组数据展示差距过大，在图表中数据小的贴X轴显示看不出来，造成图表不直观，先通过修改Y轴刻度，并进行不均自定义分配可以解决这个问题。在ECharts中操作，代码未作封装，请自行封装。
复制链接

扫一扫