处理echarts图表双Y轴刻度线不对称的问题

最新推荐文章于 2024-05-16 18:22:05 发布
最新推荐文章于 2024-05-16 18:22:05 发布
阅读量1.9k 收藏 2
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lemon_q/article/details/105991061
版权

这里写自定义目录标题


1筛选出数组中的最大值 

                function calMax(arr) {
	            var max = arr[0];
	            for (var i = 1; i < arr.length; i++) { // 求出一组数组中的最大值
	            if (max < arr[i]) {
	              max = arr[i];
	           }
	         }
	            var maxint = Math.ceil(max); //向上取整
	            var maxval = maxint + 1; // 最终设置的最大值+1是为了当所有返回数据为0时保证y轴有最大值1
	            return maxval; // 输出最大值
                }

因为我的echarts图表是循环得来的，只有其中一个有双Y轴，所以做了Y轴判断，echarts是在vue中使用的，鉴于VUE使用还不是很熟练，暂时是在option上做的判断
这是echarts图表的图片
在这里插入图片描述
后台返回图表格式
在这里插入图片描述
获取返回最大值

               //分别取各个电流电压温度的最大值，因为是循环所以需要判断
                var BCurr = that.data.label == '电流'? calMax(that.data.dataB.map(item => {return item.bphaseCurr})):""
                var ACurr = that.data.label == '电流'? calMax(that.data.dataA.map(item => {return item.aphaseCurr})):""
                var CCurr = that.data.label == '电流'? calMax(that.data.dataC.map(item => {return item.cphaseCurr})):""
                var BVolt = that.data.label == '电压'?calMax(that.data.dataB.map(item => {return item.bphaseVolt})):""
                var AVolt = that.data.label == '电压'?calMax(that.data.dataA.map(item => {return item.aphaseVolt})):""
                var CVolt = that.data.label == '电压'?calMax(that.data.dataC.map(item => {return item.cphaseVolt})):""
                var ATemp = that.data.label == '温度'?calMax(that.data.dataA.map(item => {return item.aphaseTemp})):""
                var BTemp = that.data.label == '温度'?calMax(that.data.dataB.map(item => {return item.bphaseTemp})):""
                var CTemp = that.data.label == '温度'?calMax(that.data.dataC.map(item => {return item.cphaseTemp})):""
                var boxTemp = that.data.label == '温度'?calMax(that.data.dataD.map(item => {return item.boxTemp})):""
                //将各个电流电压温度的最大值封装成一个数组
                var newVoltMaxl = [];
                newVoltMaxl.push(BVolt,AVolt,CVolt)
                var newCurrMaxl = [];
                newCurrMaxl.push(BCurr,ACurr,CCurr)
                var newTempMaxl = [];
                newTempMaxl.push(ATemp,BTemp,CTemp,boxTemp)
                //取新数组的最大值
                var CurrMax = calMax(newCurrMaxl)
                var VoltMax = calMax(newVoltMaxl) 
                var Temp = calMax(newTempMaxl)

完整代码：

<script>
    var echarts = require('echarts');
    var moment = require('moment');
    export default {
        name: "lineChart",
        props: ['data'],
        data(){
            return {

            }
        },

        mounted(){
            this.getEchart()
        },
        methods: {
            getEchart(){
                var myChart = echarts.init(this.$refs.chart);
                var that = this;
                function calMax(arr) {
	            var max = arr[0];
	            for (var i = 1; i < arr.length; i++) { // 求出一组数组中的最大值
	            if (max < arr[i]) {
	              max = arr[i];
	           }
	         }
	            var maxint = Math.ceil(max); //向上取整
	            var maxval = maxint + 1; // 最终设置的最大值+1是为了当所有返回数据为0时保证y轴有最大值1
	            return maxval; // 输出最大值
                }
                //分别取各个电流电压温度的最大值，因为是循环所以需要判断
                var BCurr = that.data.label == '电流'? calMax(that.data.dataB.map(item => {return item.bphaseCurr})):""
                var ACurr = that.data.label == '电流'? calMax(that.data.dataA.map(item => {return item.aphaseCurr})):""
                var CCurr = that.data.label == '电流'? calMax(that.data.dataC.map(item => {return item.cphaseCurr})):""
                var BVolt = that.data.label == '电压'?calMax(that.data.dataB.map(item => {return item.bphaseVolt})):""
                var AVolt = that.data.label == '电压'?calMax(that.data.dataA.map(item => {return item.aphaseVolt})):""
                var CVolt = that.data.label == '电压'?calMax(that.data.dataC.map(item => {return item.cphaseVolt})):""
                var ATemp = that.data.label == '温度'?calMax(that.data.dataA.map(item => {return item.aphaseTemp})):""
                var BTemp = that.data.label == '温度'?calMax(that.data.dataB.map(item => {return item.bphaseTemp})):""
                var CTemp = that.data.label == '温度'?calMax(that.data.dataC.map(item => {return item.cphaseTemp})):""
                var boxTemp = that.data.label == '温度'?calMax(that.data.dataD.map(item => {return item.boxTemp})):""
                //将各个电流电压温度的最大值封装成一个数组
                var newVoltMaxl = [];
                newVoltMaxl.push(BVolt,AVolt,CVolt)
                var newCurrMaxl = [];
                newCurrMaxl.push(BCurr,ACurr,CCurr)
                var newTempMaxl = [];
                newTempMaxl.push(ATemp,BTemp,CTemp,boxTemp)
                //取新数组的最大值
                var CurrMax = calMax(newCurrMaxl)
                var VoltMax = calMax(newVoltMaxl) 
                var Temp = calMax(newTempMaxl)
                let option = {
                    title: {
                       text: that.data.label + '趋势变化图',
                       subtext:that.data.label == '电流'?'额定'+ that.data.label+':' + that.data.aphaseCurrThr.aphaseCurrThr+'A '+' 剩余电流阀值:'+that.data.aftercurrentThr.aftercurrentThr+'mA' : (that.data.label == '电压'? '额定'+that.data.label + ':220A' : that.data.label+  '阀值:'+that.data.aphaseTempThr.aphaseTempThr+'℃'+'  箱体温度阈值:'+that.data.boxTempThr.boxTempThr+'℃')
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                    },
                    toolbox: {
                        feature: {
                        saveAsImage: {}
                    }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '15%',
                        containLabel: true
                    },
                    dataZoom: [{
                        type: 'inside'
                    }, {
                        type: 'slider',
                        bottom: 10,
                    }],
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:  that.data.dataA.map(item => {
                           return item.createTime
                       })


                    },
                    yAxis: [{
                        type: 'value',
                        axisLabel:{
                        formatter:that.data.label == '电流'?'{value}A' : "{value}"
                    },
                    min: 0,
                    max:that.data.label == '电流'?  CurrMax: that.data.label == '电压'? VoltMax: Temp,        // 计算最大值
                    interval:that.data.label == '电流'?  (CurrMax-0)/5 : that.data.label == '电压'? (VoltMax-0)/5:( Temp-0)/5 //  平均分为5份
                    },
                    {
                     type: 'value',
                     name:that.data.data ? "剩余电流":"",
                     axisLine: {
                     show: false,
                     }, 
                     axisTick:{ 
                     show:false
                    },  
                    axisLabel:{
                        formatter:'{value}mA'
                    },
                    min: 0,
                    max: that.data.data ? calMax(that.data.data.map(item => {return item.aftercurrent})) : "",        // 计算最大值
                    interval:that.data.data ?  (calMax(that.data.data.map(item => {return item.aftercurrent}))-0)/5 : ""  //  平均分为5份
                    }
                    ],
                    series: [
                        {
                            name: 'A相'+that.data.label, 
                            yAxisIndex:0,
                            type: 'line',
                            symbol:'diamond',
                            symbolSize: 7,
                            itemStyle: {
                            normal:{
                            color: '#F7A35C',  
                            lineStyle:{
                            color: '#F7A35C',
                            }
                            }},
                            data: that.data.label == '温度'? that.data.dataA.map(item => {return item.aphaseTemp}) : (that.data.label == '电压'? that.data.dataA.map(item => {return item.aphaseVolt}) : that.data.dataA.map(item => {return item.aphaseCurr}) )
                        },
                        {
                            name: 'B相'+that.data.label,
                            type: 'line', 
                            symbol:'triangle',
                            symbolSize: 7,
                            itemStyle: {
                            normal:{
                             color: 'green',
                             lineStyle:{
                            color: 'green',
                             }   
                            }
                            },
                            yAxisIndex:0,
                           data: that.data.label == '温度'? that.data.dataB.map(item => {return item.bphaseTemp}) :(that.data.label == '电压'? that.data.dataB.map(item => {return item.bphaseVolt}) : that.data.dataB.map(item => {return item.bphaseCurr}) )
                        },
                        {
                            name: 'C相'+that.data.label,
                            type: 'line',
                            symbol:'circle',
                            symbolSize: 6,
                            itemStyle: {
                             normal:{
                             color: 'red', 
                             lineStyle:{
                                 color: 'red',
                             }  
                            }
                            },
                            yAxisIndex:0,
                            data:that.data.label == '温度'? that.data.dataC.map(item => {return item.cphaseTemp}) : (that.data.label == '电压'? that.data.dataC.map(item => {return item.cphaseVolt}) : that.data.dataC.map(item => {return item.cphaseCurr}) )
                        },
                          {
                            // name: '箱体'+that.data.label,
                            name: that.data.dataD ? '箱体' + that.data.label : that.data.data ? '剩余' + that.data.label :'' ,
                            type: 'line',
                            symbol:'rectangle',
                            symbolSize: 6,
                            itemStyle: {
                            normal:{
                             color: 'blue', 
                             lineStyle:{
                            color: 'blue',
                             }
                            }
                            },
                            yAxisIndex:that.data.data ? 1:0,
                            data: that.data.label == '温度'? that.data.dataD.map(item => {return item.boxTemp}) : (that.data.label == '电流'? that.data.data.map(item => {return item.aftercurrent}) : '')
                        },
                    ]
                };
                myChart.setOption(option);
            }
        }
    }
</script>

html代码：

<template>
    <div class="chart_inline_wrapper" ref="chart"></div>
</template>

父组件完整代码

<template>
  <div class="history_chart_panel">
    <base-empty-data v-if="realTimesList.current.length == 0"></base-empty-data>
    <div class="chart_item" v-for="(item, index) in realTimesList.current" :key="index" v-if="realTimesList.current.length > 0">
      <div class="label_conside">
         <span class="label">{{item.label}}</span>
      </div>
      <div class="chart_wrap">
         <linechart label_name="有功功率"   :data="item"></linechart >
      </div>
    </div>
  </div>
</template>
<script>
import linechart from './LineChart.vue'
export default {
  components: {
    linechart 
  },
  data(){
    return {

    }
  },

  computed: {
            realTimesList(){
            let store = this.$store.state.historyStore;
            if( store.historyLoading ) return;

            let { historyDetail } = store;
            return historyDetail

        },


  },
   methods :{
        fetchPage(page){
            let param = this.$store.state.historyStore.historyParam;;
            param.page = page;
            this.$store.commit('historyParam', param)
            this.$store.dispatch('historyFromService', param)
        },

    }
}
</script>

<style lang="scss">
.history_chart_panel{
  // margin-top: 16px;
  background: white;
  padding: 30px 0;
  .chart_item{
      width: 94%;
      height: 380px;
      display: flex;
      margin: 0 3% 30px 3%;
      box-shadow: 0 0 5px rgba(0,0,0,0.3);
      border-radius: 8px;
      padding: 10px;
      box-sizing: border-box;
    .label_conside{
      width: 5%;
      max-width: 80px;
      float: left;
      text-align: center;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .label{
        width: 22px;
        background: #ffb607;
        color: white;
        border-radius: 20px;
        text-align: center;
        padding: 20px 0
      }
    }
    .chart_wrap{
      float: left;
      height: 100%;
      flex: 1;
      margin-right: 20px;
    }
  }
}
#main{
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    height: 380px;
    margin-bottom: 20px;
    background: #ffffff;
    border-radius: 8px;
}
</style>
杨超越男朋友。
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts双y轴实现（解决刻度线不对齐）
m0_55546349的博客
01-13 1954
echarts双y轴实现（解决刻度线不对齐）
echarts双Y轴刻度不对齐以及有负数时x轴线不太底部问题
ya_nan_zhang的博客
08-30 5968
echarts双Y轴刻度不对齐以及有负数时x轴线不太底部问题 1、遇到的问题 双Y轴刻度不对齐以及x轴不在底部问题 2、解决方法 1）解决x轴线不在底部问题 在axisLine里面设置onZero属性 2）解决对齐问题 问题描述： 1、这里已经强制设置了min max 以及interval为5但是人不对齐 发现是最大值和倒数第二个值间隔不均匀导致的 所以这里的max要通过计算来获取 2、这里柱子对应左侧y轴 两条折线对应右侧y轴 所以这里要求出两条折线的最大值和最小值进而比较出最终的最小值和最大值 解决
pyecharts 双Y轴默认网格线不一致如何解决
三妹的博客
04-07 3202
双Y轴的图片常常会出现默认自带的网格线不重合的情况，如下图，我个人觉得非常丑： 所以我想到了两个比较 trick 的解决办法： 方法一： 一条 line 中加上is_splitline_show = False 意思是把默认自带的网格线去掉，如下图： 方法二： 如果两个 Y 轴的刻度间隔数有希望能一致的话，则可以手动设置其中一个Y 轴最大值来保证两个 Y 轴的间隔数一...
Echarts绘制Y轴数据相差较大的图
最新发布
weixin_73344106的博客
05-16 570
实现效果如上，Y轴刻度值成等比数列。
解决Echarts中双坐标轴分割错位问题
qq_23334071的博客
09-01 430
解决Echarts中双坐标轴分割错位问题。
echart折线图双坐标轴刻度线对齐，图例位置调整
Cinderellahh92的博客
04-09 5561
1.在HTML中定义chart <div id="top-chart"></div> 2.js中定义chart配置及数据处理 export default { data () { return { // echart配置 chartTop: { // 设置图例的位置 legend: [ { itemWidth: 10, item.
Echarts 当Y轴取值存在正负值的时候，x轴文字与x轴贴合（不在底部显示）
weixin_40624809的博客
06-28 2595
在X轴添加margin属性 xAxis: { margin: -200, } 效果图如下：（另外，Grid中不要写containLabel: true。会导致显示不全）
实现ECharts双Y轴左右刻度线一致的例子
09-16
总结，实现ECharts双Y轴刻度线一致的关键在于正确配置两个Y轴的`min`、`max`、`splitNumber`和`interval`属性，并确保它们的刻度线颜色、样式等保持一致。同时，通过计算最大值和最小值来调整Y轴的范围，以达到理想...
FusionCharts图表显示双Y轴双(多)曲线
09-05
在描述中，我们了解到FCF_MSLine.swf这个图表类型不支持双Y轴的显示，而MSCombiDY2D.swf则提供了这样的功能。MSCombiDY2D是FusionCharts的一种复合图表类型，它可以同时展示多种数据系列，并且可以配置为双Y轴模式，...
解决百度Echarts图表坐标轴越界的方法
10-17
在使用百度Echarts进行数据可视化时，可能会遇到坐标轴越界的问题，这通常是由于图表的数据范围超过了预设的坐标轴范围。本篇文章将详细介绍如何解决Echarts图表坐标轴越界的问题，以及提供实用的示例代码来帮助你...
echarts多个x轴，多个y轴.zip
12-31
ECharts默认情况下，一个图表只有一个x轴和一个y轴，但通过设置`axis`属性，我们可以添加额外的轴。每个轴都有自己的数据映射规则，这使得在同一图表上展示不同数据系列变得可能。例如，一个x轴可以表示时间，另一个...
微信小程序在ios下Echarts图表不能滑动的问题解决
10-16
主要介绍了微信小程序在ios下Echarts图表不能滑动的解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,下面我们来一起学习下吧
一行代码解决echarts双y轴刻度线对不齐的问题
qq_35381576的博客
04-08 398
切记不能两个Y轴都加，不然echarts宽度会缩小。只需要在其中一个y轴加上。
echart 柱状图 两个纵轴坐标 刻度不一样
weixin_30457551的博客
06-05 996
在使用echart的过程中, 有的时候柱状图会使用两个纵坐标, 如果两个纵坐标的最大值是一样的还好,这样刻度也会一样. 但是多数情况下最大值是不一样的, 这样就造成了,刻度线很乱,显示不均匀. 解决办法: 使用max ,splitNumber,interval 三个属性配合 { type: "value", name: ...
解决多个独立echarts折线图，原点不在同一轴线上的问题
Mr_Feng0的博客
01-08 507
解决多个独立echarts折线图，原点不在同一轴线上的问题
解决Echarts折线图的y轴刻度值与图表渲染不一致的BUG
Wjhsmart的博客
02-06 1053
在做Echarts图表时，发现当有多条折线图渲染时，折线图和y轴上面的数字不匹配的bug。如下图所示，本文记录一下解决方案。
Echarts多曲线数值与Y周刻度不符合
滕米
10-25 397
由于echarts的配置option中series的数据配置了stack属性，导致多曲线堆叠，导致曲线数值与Y轴刻度不一致；解决方法：1、删除该属性，2、给stack不同的值。
echarts折线图设置不均匀刻度，不等距轴的解决方案
WanweI897的博客
11-11 7529
问题： 在y轴为数值轴且有部分数据相差过大时，因为y轴等距的缘故，会形成以下图表，显示效果不佳。 x轴数据：var xData = ['敌法师','幻影刺客','虚空假面','恐怖利刃','猛犸颠勺者']; y轴数据：var yData = [20, 35, 67, 88, 1000]; 解决方案： 将y轴数据每一项开立方根，使得数据之间的差距缩小，将得到的数组用于echarts。 data: yData.map(i=>Math.cbrt(i)) 2. 经过第一步，页面的图形效果已经改变，此
ECharts 双y轴时如何处理0刻度线对齐的问题
懒虫的博客
10-12 763
ECharts 双y轴时如何处理0刻度线对齐的问题
echarts左右双y轴刻度
08-23
- *1* *2* [echarts双y轴实现（解决刻度线不对齐）](https://blog.csdn.net/m0_55546349/article/details/121786189)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值