Question

我正在尝试使用echarts创建可缩放的折线图。该图表应仅在最初5天显示。我使用dataZoom类型“内部”和“滑块”。但是滑块框显示不正确。

我使用了一些代码，但无法解决此问题。

这是我的代码：

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

option = {
    xAxis: {
        type: 'time',
    },
    yAxis: {
        type: 'value',
        min: 0,
        max: 10
    },
     dataZoom: [
        {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            startValue: '2019-10-21 00:00:00',
            endValue: '2019-10-28 12:35:06',
            minValueSpan: 3600 * 24 * 1000 * 7,
            filterMode: 'filter'
        },
        {
            type: 'inside',
            xAxisIndex: [0],
            startValue: '2019-10-21 00:00:00',
            endValue: '2019-10-28 12:35:06',
            minValueSpan: 3600 * 24 * 1000 * 7,
            filterMode: 'filter'
            },
    ],
    series: [{
        data: [
            {name: '2019-10-28 12:35:06', value: ['2019-10-28 12:35:06', null]},
            {name: '2019-10-15 12:35:06', value: ['2019-10-15 12:35:06', 6]},
            {name: '2019-10-10 12:35:06', value: ['2019-10-10 12:35:06', 8]},
            {name: '2019-10-05 12:35:06', value: ['2019-10-05 12:35:06', 10]},
            {name: '2019-10-01 12:35:06', value: ['2019-10-01 12:35:06', 1]},
            {name: '2019-09-28 12:35:06', value: ['2019-09-28 12:35:06', 4]},
            {name: '2019-09-20 12:35:06', value: ['2019-09-20 12:35:06', 5]},
            {name: '2019-09-15 12:35:06', value: ['2019-09-15 12:35:06', 0]},
            {name: '2019-09-10 12:35:06', value: ['2019-09-10 12:35:06', 1]},
            {name: '2019-09-09 12:35:06', value: ['2019-09-09 12:35:06', 0]},
            {name: '2019-09-08 12:35:06', value: ['2019-09-08 12:35:06', 5]},
            {name: '2019-09-05 12:35:06', value: ['2019-09-05 12:35:06', 9]},
            {name: '2019-09-01 12:35:06', value: ['2019-09-01 12:35:06', 3]},
            {name: '2019-08-03 12:35:06', value: ['2019-08-03 12:35:06', 2]},
            {name: '2019-08-02 12:35:06', value: ['019-08-02 12:35:06', 5]},
            {name: '2019-08-01 12:35:06', value: ['019-08-02 12:35:06', 7]},
            ],
        type: 'line',
    },
    ]
};


myChart.setOption(option);

<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<div id="main" style="width: 800px;height:600px;"></div>

实际结果：滑块在底部的框中显示的数据预览不正确。如您所见，每个人都假设如果看一下滑块框，那么第一周就有数据了。

预期结果：滑块框应显示正确的数据预览，以便用户知道数据存在的日期。

感谢您的帮助！

Answer 1

是的，Echart没有这样的功能，我也有相同的情况。您需要获取inside zoom level并根据您的时间计算缩放级别并更新inside zoom级别。

示例：

// This initial zoom level
const dataZoom = [
  {
    type: 'inside',
    start: 0,
    end: 100
  },
  {
    start: 0,
    end: 10,
    handleSize: '80%'
  }
]

当时间改变时，您需要获取dataZoom并找出start和end缩放级别，并将其设置为dataZoom。

const end = 100 // always 100%
const totalTime = new Date(lastIndexOfYourDataTime).getTime() - new Date(firstIndexOfYourDataTime).getTime() // Calculate total Data time band.
const start = 100 - ((5 Days time here(in ms) / totalTime) * 100) // you will get the start zoom level.
dataZoom[0].start = start
dataZoom[0].end = end

echarts：dataZoom滑块未显示正确的数据预览

1 个答案: