4

I'm trying to create a zoomable line chart with echarts. The chart should show at first only 5 days. I use the dataZoom type 'inside' and also 'slider'. But the slider box isn't shown properly.

I played around a bit with the code, but I'm not able to fix this problem.

Here is my code: 

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>

actual result: The slider doesn't show the correct data preview in the box at the bottom. As you can see, everyone would assume if they look to the slider box, that there is data for the first week.

expected result: The slider box should show a correct data preview, so that the user knows for which dates data exists.

Thanks for your help!

Nele
  • 83
  • 1
  • 13

1 Answers1

2

Yes, Echart's doesn't have a feature like this, I also had the same scenario. you need to get the inside zoom level and calculate the zoom level based on your time and update the inside zoom level.

Example:

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

When your time changes, you need to get the dataZoom and find out the start and end zoom level and set it 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
Naren
  • 4,152
  • 3
  • 17
  • 28
  • Can't you use `startValue` and `endValue` to provide actual x axis values rather than percents? – Kangur Sep 10 '20 at 11:15
  • you can use that if you're using `startValue endValue` in dataZoom, But In my case I was using start and end percentages, So I should be using `start` and `end`. `startValue endValue` and `start end` can't be mixed as per their documentation. https://echarts.apache.org/en/option.html#dataZoom-inside.startValue – Naren Sep 10 '20 at 18:21