how to understand What is the type of chart displayed in echarts?

Question

I use these options for the chart:

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'}};

how to change tootlip formatter in when magicType change?

score 1 · Answer 1 · answered Mar 19 '20 at 05:47

You can use magictypechanged event.

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"
                }
            }
        });        
    }
});

The code above is a modification on this example

score 0 · Answer 2 · answered Mar 19 '20 at 06:04

you can simply check the component subtype, and display the tooltip based on that. Although the componentSubType is not documented in the eCharts API, but i found it presented in the formatter's callback parameter

sample code:

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";
}

how to understand What is the type of chart displayed in echarts?

2 Answers2