解决Echarts中Y轴数值极其相近的方法

根据可户需求在实现Echarts折线图的时候发现数值极其相近,3条折线图都重合到一起,非常影响用户体验,因此此方法

方法的思路来源于Y轴最大值与最小值区间的处理

核心代码如下(基于vue实现)
// 准备日期数据
            this.dateList =this.threeU.dateString
            // 准备数值数据
            this.dataList =this.threeU.uas
            // 计算数据最大值和最小值
            let minValue = '0'
            let maxValue = '0'
            let list = this.dataList.filter(item => (item && item != 'null' && item != 'NaN'))
            let precision = 10000 //精度
            maxValue = Math.ceil(Math.max.apply(null, list) * precision) / precision;
            minValue = Math.floor(Math.min.apply(null, list) * precision) / precision;
            // 计算间隔,返回y轴最大值,y轴最小值 ,间隔
            let getLeftData = (min, max) => {
                // 控制分隔条数,
                let diff = max - min
                return {
                    max: max + diff,
                    min: min - diff,
                    // 分割成5等份 
                    interval: (max + diff - (min - diff)) / 5,
                };
            }
            this.interObj = getLeftData(minValue, maxValue)

整体代码

<!--
 * @Author: 李勇
 * @Date: 2021-03-25 21:14:19
 * @LastEditors: 李勇
 * @LastEditTime: 2021-04-09 10:26:13
 * @FilePath: \line-lose-phaseIi\src\views\timeSharing\components\curve.vue
 * @Description: 
-->
<template>
    <div class="curve_box">
        <Title text="三相电压" />
        <div class="curve" ref="curve"></div>
    </div>
</template>
<script>
import Title from "@/components/Title.vue";
import echarts from "echarts";
export default {
    components: {
        Title
    },
    created() {
        this.$nextTick(() => {
            this.curve();
        })
    },
    props: {
        threeU: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data(){
        return{
            dataList:{
                type:Array,
                default:[]
            },
            dateList:{
                type:Array,
                default:[]
            },
            interObj:{
                type:null
            }
        }
    },
    watch: {
        dataList: {
            // 在父组件数据发生改变后子组件要做到实时更新,就需要子组件用watch来监听数据的变化
            // 看情况是否需要newValue和oldValue之间值比较
            handler(newVal, oldVal) {
                if (this.myChart) {
                    if (newVal) {
                        this.myChart.setOption(newVal)
                    } else {
                        this.myChart.setOption(oldVal)
                    }
                } else {
                    this.curve()/* 重新执行初始化图表实例 */
                }
            },
            deep: true
        }
    },
    methods: {
        curve() {
            var myChart = echarts.init(this.$refs.curve);
            // 准备日期数据
            this.dateList =this.threeU.dateString
            // 准备数值数据
            this.dataList =this.threeU.uas
            // 计算数据最大值和最小值
            let minValue = '0'
            let maxValue = '0'
            let list = this.dataList.filter(item => (item && item != 'null' && item != 'NaN'))
            let precision = 10000 //精度
            maxValue = Math.ceil(Math.max.apply(null, list) * precision) / precision;
            minValue = Math.floor(Math.min.apply(null, list) * precision) / precision;
            // 计算间隔,返回y轴最大值,y轴最小值 ,间隔
            let getLeftData = (min, max) => {
                // 控制分隔条数,
                let diff = max - min
                return {
                    max: max + diff,
                    min: min - diff,
                    // 分割成5等份 
                    interval: (max + diff - (min - diff)) / 5,
                };
            }
            this.interObj = getLeftData(minValue, maxValue)
            var option = {
                 legend: {
                    icon: 'circle',
                    top: '2%',
                    right: '1%',
                    itemWidth: 6,
                    itemGap: 20,
                    textStyle: {
                        color: '#556677'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        label: {
                            show: true,
                            backgroundColor: '#fff',
                            color: '#556677',
                            borderColor: 'rgba(0,0,0,0)',
                            shadowColor: 'rgba(0,0,0,0)',
                            shadowOffsetY: 0
                        },
                        lineStyle: {
                            width: 0
                        }
                    },
                    formatter: '{b0}<br/>{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
                    backgroundColor: 'rgba(24, 71, 185, .6)',
                    textStyle: {
                        color: '#fff'
                    },
                    padding: [10, 10],
                    extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
                },
                grid: {
                    top: '15%',
                    bottom: "12%",
                    left: "10%",
                    right: "10%",
                },
                xAxis: {
                    type: 'category',
                    data: this.dateList,
                    axisLabel: {
                        interval: 'auto',
                        textStyle: {
                            color: '#999',//坐标值得具体的颜色

                        },
                        formatter: function (params) {
                            // console.log("params", params.slice(10))
                            return params.slice(10)
                        }
                    },
                    axisLine: {
                        show: true,//x轴线隐藏
                        fontSize: 12,
                    },
                    axisTick: {
                        show: true,//隐藏x轴的标点
                    },
                },
                yAxis: {
                    type: 'value',
                    // 设置y轴间隔
                    interval: this.interObj.interval,
                    // 设置y轴最大值
                    min: this.interObj.min,
                    // 设置y轴最小值
                    max: this.interObj.max,
                    axisLabel: {
                        textStyle: {
                            color: '#999',
                        },
                        interval: 'auto',
                        formatter: function (value, index) {
                            return value.toFixed(0) ;
                        }
                    },
                    // 显示分隔线
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: ['#ccc'],
                            width: 1,
                            type: 'solid'
                        }
                    },
                },
                series: [
                    {
                    name: "A相",
                    data: this.threeU.uas,
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 4,
                    itemStyle: {
                        color: '#39FDDB'
                    },
                },
                {
                    name: "B相",
                    data: this.threeU.ubs,
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 4,
                    itemStyle: {
                        color: '#F45E23'
                    },
                },
                {
                    name: "C相",
                    data: this.threeU.ucs,
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 4,
                    itemStyle: {
                        color: '#C63CFF'
                    },
                },
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.curve_box {
    height: 100%;
    width: 100%;
}
.curve {
    width: 100%;
    height: calc(100% - 33px);
}
</style>

效果图如下
在这里插入图片描述

希望对大家有所帮助,如有更好的方法可以留言指教

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
当我们使用ECharts制作图表时,Y轴数值通常是图表的核心部分,因为它们描述了数据的大小和变化。要设置Y轴的值,我们可以通过以下步骤进行操作。 首先,我们需要创建一个基础的ECharts图表实例,并设置一个X轴和一个Y轴。可以使用如下代码初始化一个基础的ECharts图表: ```javascript var myChart = echarts.init(document.getElementById('main')); var option = { xAxis: {}, yAxis: {} }; myChart.setOption(option); ``` 在这个例子,我们创建了一个ECharts实例,并将其绑定到一个名为“main”的DOM元素上。” 然后,我们需要设置Y轴的最小值和最大值。要实现这一点,我们可以在Y轴的选项添加“min”和“max”属性。例如,将Y轴最小值设置为0,最大值设置为100: ```javascript var option = { xAxis: {}, yAxis: { min: 0, max: 100 } }; myChart.setOption(option); ``` 我们可以使用其他属性来改变Y轴的外观和行为,例如设置刻度线的数量、更改轴线的颜色等等。此外,我们还可以将Y轴标签设置为特定格式的数字或字符串。此处提供的只是最基础的设置方法,更多高级的设置可以在ECharts官方文档找到。 总之,在ECharts设置Y轴数值需要经过多个步骤。首先,我们需要初始化一个基础的ECharts图表实例,然后设置Y轴的最小和最大值,以及其他属性和标签。这样,我们就可以创建具有定制化Y轴数值的图表了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值