echarts为啥运行magictype后，不显示图标

Posted 2023-05-03

参考技术A <script type="text/javascript">
require.config(
paths:
echarts:'./js/echarts',
'echarts/chart/bar' : './js/echarts-map',
'echarts/chart/line': './js/echarts-map',
'echarts/chart/map': './js/echarts-map'

);
var option =
title :
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
,
tooltip :
trigger: 'axis'
,
legend:
data:['蒸发量','降水量']
,
toolbox:
show : true,
feature :
mark :
show : true,
title :
mark : '辅助线开关',
markUndo : '删除辅助线',
markClear : '清空辅助线'
,
lineStyle :
width : 2,
color : '#1e90ff',
type : 'dashed'

,
dataZoom :
show : true,
title :
dataZoom : '区域缩放',
dataZoomReset : '区域缩放后退'

,
dataView : show : true,
title : '数据视图',
readOnly: false,
lang : ['数据视图', '关闭', '刷新']
,
magicType:
show : true,
title :
line : '折线图切换',
bar : '柱形图切换',
stack : '堆积',
tiled : '平铺'
,
type : ['line', 'bar', 'stack', 'tiled']
,
restore : show: true,
title:'还原',
color:'black'
,
saveAsImage : show: true,
title:'保存为图片',
type:'jpeq',
lang:['点击本地保存']


,
calculable : true,
dataZoom :
show : true,
realtime : true,
start : 20,
end : 80
,
xAxis : [

type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

],
yAxis : [

type : 'value'

],
series : [

name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint :
data : [
type : 'max', name: '最大值',
type : 'min', name: '最小值'
]
,
markLine :
data : [
type : 'average', name: '平均值'
]

,

name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint :
data : [
name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18,
name : '年最低', value : 2.3, xAxis: 11, yAxis: 3
]
,
markLine :
data : [
type : 'average', name : '平均值'
]


]
;

require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
],
function(ec)
var myChart = ec.init(document.getElementById('demo1'));
myChart.setOption(option);


);

</script>
这样看看本回答被提问者和网友采纳

如何理解echarts中显示的图表类型是啥？

【中文标题】如何理解echarts中显示的图表类型是啥？

【英文标题】：how to understand What is the type of chart displayed in echarts?如何理解echarts中显示的图表类型是什么？

【发布时间】：2020-03-17 07:50:56

【问题描述】：

我在图表中使用这些选项：

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 formatter？

【参考方案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"
                
            
        );        
    
);

以上代码是对this example的修改

【参考方案2】：

您可以简单地检查组件子类型，并根据它显示工具提示。 虽然 componentSubType 没有记录在 eCharts API 中，但我发现它出现在格式化程序的回调参数中

示例代码：

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