echarts渲染没有达到预期

Question

想要达到的效果如下图

数据是这样

const time = [
  "15:00",
  "16:00",
  "17:00",
  "18:00",
  "19:00",
  "20:00",
  "21:00",
  "22:00",
  "23:00",
  "0:00",
  "1:00",
  "2:00",
  "3:00",
  "4:00",
  "5:00",
  "6:00",
  "7:00",
  "8:00",
  "9:00",
  "10:00",
  "11:00",
  "12:00",
  "13:00",
  "14:00",
  "15:00",
  "16:00",
  "17:00",
  "18:00",
  "19:00",
  "20:00",
  "21:00",
  "22:00",
  "23:00",
  "0:00",
  "1:00",
  "2:00",
  "3:00",
  "4:00",
  "5:00",
  "6:00",
  "7:00",
  "8:00",
  "9:00",
  "10:00",
  "11:00",
  "12:00",
  "13:00",
  "14:00",
  "15:47"
]

const value = [
  0.136649,
  0.136644,
  0.136669,
  0.136687,
  0.136704,
  0.136696,
  0.136692,
  0.136679,
  0.136665,
  0.136667,
  0.136667,
  0.136678,
  0.136677,
  0.136677,
  0.136677,
  0.136677,
  0.136677,
  0.136677,
  0.136677,
  0.136656,
  0.136637,
  0.13663,
  0.13663,
  0.136626,
  0.136629,
  0.136624,
  0.136622,
  0.136622,
  0.136631,
  0.136632,
  0.136632,
  0.136632,
  0.136651,
  0.136651,
  0.136654,
  0.136654,
  0.136656,
  0.136656,
  0.136656,
  0.136656,
  0.136656,
  0.136656,
  0.136656,
  0.136671,
  0.136652,
  0.136648,
  0.136652,
  0.136649,
  0.13663
]

实际效果是这样

Answer 1

你好，根据截图效果来看，核心原因在于Y轴上的区间值默认从0开始了，可以通过设置Y坐标轴区间的最大值和最小值来处理。参考配置和实现效果如下（基于Vue2+echarts5.4.3实现的，供参考相关配置）：

<template>
    <div class="mainDiv">
        <div class="titleDiv">时间分布折线图</div>
        <div class="chartDiv" id="chartLineOne"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {}
    },
    name: 'AnsChartLine',
    mounted() {
        this.renderChart()
    },
    methods: {
        // 渲染图表
        renderChart() {
            let myChart = this.$echarts.init(document.getElementById('chartLineOne'))
            var option = {
                tooltip: {
                    show: true,
                },
                grid: {
                    top: '8%',
                    bottom: '10%',
                    left: '4%',
                    right: '4%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [
                        '15:00',
                        '16:00',
                        '17:00',
                        '18:00',
                        '19:00',
                        '20:00',
                        '21:00',
                        '22:00',
                        '23:00',
                        '0:00',
                        '1:00',
                        '2:00',
                        '3:00',
                        '4:00',
                        '5:00',
                        '6:00',
                        '7:00',
                        '8:00',
                        '9:00',
                        '10:00',
                        '11:00',
                        '12:00',
                        '13:00',
                        '14:00',
                        '15:00',
                        '16:00',
                        '17:00',
                        '18:00',
                        '19:00',
                        '20:00',
                        '21:00',
                        '22:00',
                        '23:00',
                        '0:00',
                        '1:00',
                        '2:00',
                        '3:00',
                        '4:00',
                        '5:00',
                        '6:00',
                        '7:00',
                        '8:00',
                        '9:00',
                        '10:00',
                        '11:00',
                        '12:00',
                        '13:00',
                        '14:00',
                    ],
                },

                yAxis: {
                    type: 'value',
                    min: 0.13662,
                    max: 0.13672,
                },

                series: [
                    {
                        name: '值',
                        type: 'line',
                        data: [
                            0.136649, 0.136644, 0.136669, 0.136687, 0.136704, 0.136696, 0.136692, 0.136679, 0.136665, 0.136667, 0.136667,
                            0.136678, 0.136677, 0.136677, 0.136677, 0.136677, 0.136677, 0.136677, 0.136677, 0.136656, 0.136637, 0.13663,
                            0.13663, 0.136626, 0.136629, 0.136624, 0.136622, 0.136622, 0.136631, 0.136632, 0.136632, 0.136632, 0.136651,
                            0.136651, 0.136654, 0.136654, 0.136656, 0.136656, 0.136656, 0.136656, 0.136656, 0.136656, 0.136656, 0.136671,
                            0.136652, 0.136648, 0.136652, 0.136649, 0.13663,
                        ],
                        areaStyle: {
                            // 配置面积图中的颜色渐变
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#B7C5F9',
                                    },
                                    {
                                        offset: 1,
                                        color: '#F4F4F5',
                                    },
                                ],
                            },
                        },
                    },
                ],
            }
            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(option)
        },
    },
}
</script>

<style scoped>
</style>