描述:需求是根据年份显示的数据是柱状图,月份是折线图,折线图是累增模式,比如 0,1,0,2=> 0,1,1,(1+2=3) 这样的数据。
首先echarts的toolbox中的feature属性下的toolbox.feature. magicType (动态类型切换)没法自定义点击时间,那么切换的时候就无法按照对应的数据进行显示。我这边是把这个属性工具直接隐藏,然后自己自定义工具栏来实现。
echarts的toolbox.feature 自定义
注意,自定义的工具名字,只能以 my 开头,例如下例中的 myTool1,myTool2:
toolbox: {
top: "top",
show: true,
feature: {
mark: {
show: true
},
/**自定义的工具栏 */
myTool1: {
show: true,
title: '切换为折线图',
icon: 'path://M85.333333 896h853.333334v42.666667H85.333333z,M85.333333 85.333333h42.666667v853.333334H85.333333zM575.317333 650.325333l-187.946666-177.28-168.064 163.413334-29.781334-30.592 197.376-191.914667 188.757334 178.048 321.152-295.168 28.885333 31.402667z',//可以复制阿里矢量图标的svg代码,path多个值用“,”隔开
onclick: function () {
that.myToolHandlerLine()
}
},
myTool2: {
show: true,
title: '切换为柱状图',
icon: 'path://M109.03 844.9h805.95v85H109.03zM168.72 547.42h89.55v226.66h-89.55zM467.22 320.76h89.55v453.32h-89.55zM765.72 94.1h89.55v679.97h-89.55z',
onclick: function () {
that.myToolHandlerBar()
}
},
magicType: {
show: false,
type: ["line", "bar"],
},
restore: {
show: false
},
saveAsImage: {
show: true
}
},
width: "120px"
},最终效果,2个图标对应切换图标显示

版权声明:本文为qq_31452297原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。