echarts绘图双y轴坐标如何对齐,且图形不触顶还很饱满

 arr.forEach((itemArr, index) => {
      let max = 0;
      let min = 0;
      if (itemArr && itemArr.length > 0) {
        itemArr.forEach((each) => {
          max = each > max ? each : max;
          min = each < min ? each : min;
        });
      }
      list.push(
        type
          ? {
              max,
              min,
              type,
            }
          : {}
      );
    });

    list.forEach((item) => {
       if (item.max > 0) {
	      const maxDigit = Math.floor(Math.log(Math.abs(item.max)) / Math.log(10)) - 1  // 根据求最大值以10为底的对数计算最大值得位数(不用管是不是小数,都是可以实现的)
	      // Math没有以10为底的对数求法,这里用了对数的换底公式
	      // 减1是因为省略了一步,如果直接用位数继续下面的计算,求出来的最大值可能会比数据真实的最大值大太多,图形一般会集中分布在grid的下方
	      // 减去一位再进行计算,计算所得的最大值一般会比数据的最大值低一位,这样图形整体就比较丰满,一般距离图表顶部一格左右
	      const maxMultiple = Math.pow(10, maxDigit)
	      // 用pow方法记录我们需要最终精确地位数
	      tem.max = Math.ceil((Math.abs(item.max) * 1.2) / maxMultiple) * maxMultiple
	      // 先将数据最大值放大1.2倍(根据自己的需要),在利用之前的记录的精度对齐向上取整,这样就能获取到你想要的数据(10, 100, 5000, 0.3, 0.005, ...)
	   } else {
	      item.max = 0
	      // 这里如果最大值<= 0,我直接取0, 根据需求自己确定
	   }
	   if (item.min >= 0) {
	       item.min = 0
	   } else {
	       const minDigit = Math.floor(Math.log(-item.min) / Math.log(10)) - 1
	       const minMultiple = Math.pow(10, minDigit)
	       tem.min = -Math.ceil((Math.abs(item.min) * 1.2) / minMultiple) * minMultiple
	       // 这里只给最小值为负时设置的算法,因为为正时直接赋值为0,图形会更好
	   }
	   // 设置Interval,我这里所有的splitNumber都默认为5,也可以选择自己传入,一幅丰满且适用于多种多样是坐标系图就完成了
	   item.interval = (item.max - item.min) / 5
    });
    return list;
  }

要在echarts柱状图中实现虚线分割,可以通过设置grid组件的splitLine属性来实现。具体步骤如下: 1. 首先根据实际的数据获取到每个Y轴对应的最大值和最小值。可以使用上述引用中提供的方法,根据数据的yAxisIndex将数据分别缓存在不同的数组中,并计算出每个Y轴的最大值。 2. 在echarts的option对象中,找到对应的grid组件,并设置其splitLine属性。splitLine属性是一个对象,其中可以设置lineStyle属性用于定义分割线的样式。可以设置lineStyle属性的type为'dashed',来实现虚线的效果。 3. 在设置splitLine属性时,需要注意分别为每个Y轴设置对应的splitLine。可以使用数组的map方法,通过索引来为每个Y轴设置不同的splitLine。在map方法的回调函数中,可以为每个splitLine设置lineStyle属性,来实现不同的虚线样式。 示例代码如下: ```javascript option = { // 其他配置项... grid: { // 其他配置项... splitLine: { show: true, lineStyle: { type: 'dashed' } } }, yAxis: [ { // 第一个Y轴的配置项... splitLine: { lineStyle: { type: 'dashed' } } }, { // 第二个Y轴的配置项... splitLine: { lineStyle: { type: 'dashed' } } } ] }; ``` 通过以上步骤,你可以在echarts柱状图中实现虚线的分割效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [echarts 柱状图渐变色背景](https://download.csdn.net/download/qq_36437172/12418565)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [echarts绘图y轴坐标如何对齐,且图形不触还很饱满](https://blog.csdn.net/keloneko/article/details/107752716)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值