如何理解echarts中顯示的圖表類型是什么？

Question

我將這些選項用於圖表：

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

當magicType更改時如何更改tootlip格式化程序？

Answer 1

您可以使用magictypechanged事件。

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

上面的代碼是對這個例子的修改

Answer 2

您可以簡單地檢查組件子類型，並根據它顯示工具提示。 盡管 eCharts API 中沒有記錄 componentSubType，但我發現它出現在格式化程序的回調參數中

示例代碼：

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