как понять Какой тип диаграммы отображается в диаграммах? - PullRequest
Новая
       71

как понять Какой тип диаграммы отображается в диаграммах?

0 голосов
/ 17 марта 2020

Я использую эти параметры для диаграммы: 

option = {
legend: {},
tooltip: {},
label :{},
toolbox:{ show: true,
                feature: {
                    magicType: {
                        type: ['bar','line','stack']
                    },
                }},
tooltip :{
    show: true,
    formatter: params=> {
        return params.value[params.value.length-1];
    }
},
dataset: {
    source: data
},
xAxis: {type: 'category'},
yAxis: {},
series: {type: 'bar'}};

как изменить форматер tootlip при изменении magicType?

Ответы [ 2 ]

0 голосов
/ 19 марта 2020

Вы можете просто проверить подтип компонента и отобразить подсказку, основанную на этом. Хотя componentSubType не задокументирован в API eCharts, но я обнаружил, что он представлен в параметре обратного вызова форматера

пример кода: 

formatter: params=> {
  if(params.componentSubType == "line")
            return "LINE logic";
  else if(params.componentSubType == "bar")
           return "BAR logic";
  else if(params.componentSubType == "stack")
           return "STACK logic";
  else
           return "default logic";
}
0 голосов
/ 19 марта 2020

Вы можете использовать волшебное событие с изменением . 

option = {
    color: ['#3398DB'],
    legend: {},
    toolbox: {
        feature: {
            magicType: {
                type: ['line', 'bar', 'stack']
            }
    },    
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {            
            type: 'shadow'        
        }
    },
    grid: {
        left: 100,
        right: 100,
        bottom: 100,
        top: 100,
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'test',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
        }
    ]
};


myChart.on('magictypechanged', function(e) {
    if (e.currentType === "line")
    {
        myChart.setOption({
            legend: {
                textStyle: {
                    color: "#0f0"
                }
            }
        });
    }
    else {
        myChart.setOption({
            legend: {
                textStyle: {
                    color: "#000"
                }
            }
        });        
    }
});

Приведенный выше код является модификацией в этом примере

...